$(document).ready(function(){
  jQuery.fn.orbit = function(images, options) {

    settings = jQuery.extend({
      name: "orbit"
    }, options);
    
    var object = this;
    var loadingIncrement = 0;
        
    this.load = function() {
      $(object).append($('<li id="orbit-loading"></li>'));
      $('li#orbit-loading').append($('<div id="orbit-loading-status"></div>'));
      $('li#orbit-loading').append($('<div id="orbit-loading-bar"></div>'));
      jQuery.each(images, function(index, value) {
        $(object).append($('<li id="image_' + index + '"></li>'));
        var current = $('li#image_' + index);
        var img = new Image();
        $(img).load(function () {
          $("div#orbit-loading-status").text("Loading image " + (loadingIncrement + 1) + " of " + images.length);
          $(current).append(this).hide();
          loadingIncrement++;
          $("div#orbit-loading-bar").width(object.width() / images.length * loadingIncrement);
          if (loadingIncrement == images.length - 1) object.initiate();
        }).error(function() {
          
        }).attr('src', value).attr('width', '522').attr('height', '522');
        
      });
    };
    
    this.initiate = function() {
      $(object).mousemove(function(e) {
        object.calculateIndex(e);
      })
      $("li#orbit-loading").remove();
      $('li#image_0').fadeIn();
    }
    
    this.deactivate = function() {
      $(object).children().remove();
    }
    
    this.calculateIndex = function(e) {
      var relativeX = e.pageX - object.offset().left;
      var relativeY = e.pageY - object.offset().top;
      var rotation = this.calculateRotation(relativeX, relativeY);
      var currentIndex = Math.floor(rotation / 361 * $(object).children().length);
      $(object).children().each(function(i) {
        if(i == currentIndex) {
          $(this).show();
        } else {
          $(this).hide();
        }
      });
    }
    
    this.calculateRotation = function(x, y) {
      x = x - (object.width() / 2);
      y = y - (object.height() / 2 );
      var radius = Math.atan2(y, x) * 180 / Math.PI + 180;
      return Math.floor(radius);
    }
    
    this.load();
    
    return this;
    
  };
  
  jQuery.fn.zoomer = function(options) {

    settings = jQuery.extend({
      name: "zoomer"
    }, options);
    
    var object = this;
    var loadingIncrement = 0;
    var images = [
      {src: "assets/images/content/interact/durga-main.jpg", id: 'main'},
      {src: "assets/images/content/interact/durga-saraswati.jpg", id: 'saraswati'},
      {src: "assets/images/content/interact/durga-lakshmi.jpg", id: 'lakshmi'},
      {src: "assets/images/content/interact/durga-durga.jpg", id: 'durga'},
      {src: "assets/images/content/interact/durga-ganesha.jpg", id: 'ganesha'},
      {src: "assets/images/content/interact/durga-kartik.jpg", id: 'kartik'},
      {src: "assets/images/content/interact/durga-dawon.jpg", id: 'dawon'},
      {src: "assets/images/content/interact/durga-mahisha.jpg", id: 'mahisha'},
      {src: "assets/images/content/interact/durga-mahisha2.jpg", id: 'mahisha2'}
    ]
    
    this.load = function() {
      $(object).append($('<div id="zoomer-loading"></div>'));
      $('div#zoomer-loading').append($('<div id="zoomer-loading-status"></div>'));
      $('div#zoomer-loading').append($('<div id="zoomer-loading-bar"></div>'));
      jQuery.each(images, function(index, value) {
        var img = new Image();
        $(img).load(function () {
          $("div#zoomer-loading-status").text("Loading image " + (loadingIncrement + 1) + " of " + images.length);
          $(object).append(this);
          $(this).hide();
          $(this).attr('id', value.id).addClass('god-image');
          loadingIncrement++;
          $("div#zoomer-loading-bar").width(object.width() / images.length * loadingIncrement);
          if (loadingIncrement == images.length) object.initiate();
        }).error(function() {
          alert("Error");
        }).attr('src', value.src);
      });
    };
    
    this.initiate = function() {
      $("div#zoomer-loading").remove();
      $("img#main").attr("useMap", "#durga-map");
      $("div#durga-container").css("position", "relative");
      $("img.god-image").css("position", "absolute");
      $("img#saraswati").css({"top": 0, "left": 0, "border-right": "6px solid #fff"});
      $("img#lakshmi").css({"top": 0, "left": 191, "border-left": "6px solid #fff"});
      $("img#durga").css({"top": 207, "left": 0, "border-top": "6px solid #fff"});
      $("img#ganesha").css({"top": 0, "left": 166, "border-left": "6px solid #fff"});
      $("img#kartik").css({"top": 0, "left": 0, "border-right": "6px solid #fff"});
      $("img#dawon").css({"top": 263, "left": 0, "border-top": "6px solid #fff"});
      $("img#mahisha").css({"top": 0, "left": 0, "border-bottom": "6px solid #fff"});
      $("img#mahisha2").css({"top": 0, "left": 0, "border-bottom": "6px solid #fff"});

      // Unable to use hover() method here, as IE doesn't recognise it for <area> elements
      $("area#saraswati-area").mouseover(function() {$("img#saraswati").fadeIn("fast");});
      $("area#saraswati-area").mouseout(function() {$("img#saraswati").fadeOut("fast");});
      $("area#lakshmi-area").mouseover(function() {$("img#lakshmi").fadeIn("fast");});
      $("area#lakshmi-area").mouseout(function() {$("img#lakshmi").fadeOut("fast");});
      $("area#durga-area").mouseover(function() {$("img#durga").fadeIn("fast");});
      $("area#durga-area").mouseout(function() {$("img#durga").fadeOut("fast");});
      $("area#ganesha-area").mouseover(function() {$("img#ganesha").fadeIn("fast");});
      $("area#ganesha-area").mouseout(function() {$("img#ganesha").fadeOut("fast");});
      $("area#kartik-area").mouseover(function() {$("img#kartik").fadeIn("fast");});
      $("area#kartik-area").mouseout(function() {$("img#kartik").fadeOut("fast");});
      $("area#dawon-area").mouseover(function() {$("img#dawon").fadeIn("fast");});
      $("area#dawon-area").mouseout(function() {$("img#dawon").fadeOut("fast");});
      $("area#mahisha-area").mouseover(function() {$("img#mahisha").fadeIn("fast");});
      $("area#mahisha-area").mouseout(function() {$("img#mahisha").fadeOut("fast");});
      $("area#mahisha2-area").mouseover(function() {$("img#mahisha2").fadeIn("fast");});
      $("area#mahisha2-area").mouseout(function() {$("img#mahisha2").fadeOut("fast");});
      $("map#durga-map area").click(function() {return false;});
      $("img#main").fadeIn();
    }
    
    this.deactivate = function() {
      $(object).children().remove();
    }
    
    this.load();
    
    return this;
  };
  
  images = [
    "assets/images/content/interact/shivrot-01.jpg",
    "assets/images/content/interact/shivrot-02.jpg",
    "assets/images/content/interact/shivrot-03.jpg",
    "assets/images/content/interact/shivrot-04.jpg",
    "assets/images/content/interact/shivrot-05.jpg",
    "assets/images/content/interact/shivrot-06.jpg",
    "assets/images/content/interact/shivrot-07.jpg",
    "assets/images/content/interact/shivrot-08.jpg",
    "assets/images/content/interact/shivrot-09.jpg",
    "assets/images/content/interact/shivrot-10.jpg",
    "assets/images/content/interact/shivrot-11.jpg",
    "assets/images/content/interact/shivrot-12.jpg",
    "assets/images/content/interact/shivrot-13.jpg",
    "assets/images/content/interact/shivrot-14.jpg",
    "assets/images/content/interact/shivrot-15.jpg",
    "assets/images/content/interact/shivrot-16.jpg",
    "assets/images/content/interact/shivrot-17.jpg",
    "assets/images/content/interact/shivrot-18.jpg",
    "assets/images/content/interact/shivrot-19.jpg",
    "assets/images/content/interact/shivrot-20.jpg"
  ]
  
  var orbit = null;
  var zoomer = null;
  
  $('#orbit .placeholder a').click(function() {
    $('#zoomer').animate({
      width: 162,
      height: 522
    }, 500);
    $('#orbit').animate({
      width: 522,
      height: 522
    }, 500, null, activate_orbit);
    $('#models').animate({
      height: 522
    }, 500);
    $('#orbit .placeholder').fadeOut(250);
    return false;
  });

  $('#zoomer .placeholder a').click(function() {
    $('#orbit').animate({
      width: 162,
      height: 522
    }, 500);
    $('#zoomer').animate({
      width: 522,
      height: 522
    }, 500, null, activate_zoomer);
    $('#models').animate({
      height: 522
    }, 500);
    return false;
  });

  var activate_orbit = function() {
    $('#zoomer .placeholder').fadeIn(500);
    if (zoomer) zoomer.deactivate();
    orbit = $("ul#orbit-container").orbit(images);
  }

  var activate_zoomer = function() {
    $('#zoomer .placeholder').fadeOut(500, initiate_zoomer);
    $('#orbit .placeholder').fadeIn(500);
    if (orbit) orbit.deactivate();
  }
  
  var initiate_zoomer = function() {
    zoomer = $("div#durga-container").zoomer()
  }

});