// Inspired by base2 and Prototype
// It is here, so that it is easyer to create a new CLASS
(function(){
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;

  // The base Class implementation (does nothing)
  this.Class = function(){};

  // Create a new Class that inherits from this class
  Class.extend = function(prop) {
    var _super = this.prototype;

    // Instantiate a base class (but only create the instance,
    // don't run the init constructor)
    initializing = true;
    var prototype = new this();
    initializing = false;

    // Copy the properties over onto the new prototype
    for (var name in prop) {
      // Check if we're overwriting an existing function
      prototype[name] = typeof prop[name] == "function" &&
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          return function() {
            var tmp = this._super;

            // Add a new ._super() method that is the same method
            // but on the super-class
            this._super = _super[name];

            // The method only need to be bound temporarily, so we
            // remove it when we're done executing
            var ret = fn.apply(this, arguments);
            this._super = tmp;

            return ret;
          };
        })(name, prop[name]) :
        prop[name];
    }

    // The dummy class constructor
    function Class() {
      // All construction is actually done in the init method
      if ( !initializing && this.init )
        this.init.apply(this, arguments);
    }

    // Populate our constructed prototype object
    Class.prototype = prototype;

    // Enforce the constructor to be what we expect
    Class.constructor = Class;

    // And make this class extendable
    Class.extend = arguments.callee;

    return Class;
  };
})();

var FrontProduct = Class.extend({
  
  divId: "",
  numberOfImages: -1,
  currentImageNumber: 0,
  lastImageNumber: -1,
  rotateInt: -1,
  
  rotationSpeed: 3000,
  isValid: false,
  
  init: function(divId) {
    this.divId = divId;
    var div = jQuery(divId);
    if (div.length > 0) {
      this.isValid = true;
    }
    this.numberOfImages = div.find(' ul li').length;
    div.find(' ul li').css({opacity: 0.0});
    div.find(' ul li:first').css({opacity: 1.0});
  },
  
  start: function () {
    if (this.isValid) {
      var par = this;
      this.rotateInt = window.setInterval(function(){
        par.rotate()
      }, this.rotationSpeed);
    }
  },
  
  stop: function () {
    window.clearInterval(this.rotateInt);
  },
  
  rotate: function () {
    this.stop();
    this.lastImageNumber = this.currentImageNumber;
    this.currentImageNumber++;
    if (this.currentImageNumber >= this.numberOfImages) {
      this.currentImageNumber = 0;
    }
    //Get the first image
    var current = (jQuery(this.divId + ' ul li.shown')?  jQuery(this.divId + ' ul li.shown') : jQuery(this.divId + ' ul li:first'));

    if ( current.length == 0 ) {
      current = jQuery(this.divId + ' ul li:first');
    }

    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $jQuery(this.divId + ' ul li:first') :current.next()) : jQuery(this.divId + ' ul li:first'));

    //Set the fade in effect for the next image, the show class has higher z-index
    next.css({opacity: 0.0}).addClass('shown').animate({opacity: 1.0}, 500);

    //Hide the current image
    current.animate({opacity: 0.0}, 500).removeClass('shown');
    this.start();
  }
  
});

var ProductImageShift = Class.extend({
  
  largeImageContainer: null,
  images: new Array(),
  numberOfImages: -1,
  currentImageNumber: 0,
  lastImageNumber: -1,
  rotateInt: -1,
  isStarted: false,
  
  rotationSpeed: 3500,
  
  init: function () {
    this.largeImageContainer = jQuery('div#roundedBoxImageContainer');
    var lic = this.largeImageContainer.get(0);
    
    var cImg = this.largeImageContainer.find('img').get(0);
    if (cImg) {
      var img = new Image();
      img.src = cImg.getAttribute('src');
      if (img.width > 0 || img.height > 0) {
        cImg.style.width = img.width + 'px';
        cImg.style.height = img.height + 'px';
        lic.style.width = img.width + 'px';
        lic.style.height = img.height + 'px';
      } else {
        img.onload = function () {
          cImg.style.width = img.width + 'px';
          cImg.style.height = img.height + 'px';
          lic.style.width = img.width + 'px';
          lic.style.height = img.height + 'px';
        }
      }
    }
    
    this.images = jQuery("div#imageBar div.smallImage img");
    this.numberOfImages = this.images.length;
    
    this.start();
  },
  
  prepareShift: function () {
    this.stop();
    this.lastImageNumber = this.currentImageNumber;
    this.currentImageNumber++;
    if (this.currentImageNumber >= this.numberOfImages) {
      this.currentImageNumber = 0;
    }
    
    var thumb = this.images[this.currentImageNumber];
    var tSrc = thumb.getAttribute('src');
    var lSrc = tSrc.replace('/thumbs/', '/large/');
    var large = new Image();
    large.src = lSrc;
    
    if (large.width > 0 || large.height > 0) { // IE has already loaded this ones
      this.shift(lSrc);
    } else {
      large.onload = function () {
        this.shift(lSrc);
      }.bind(this);
    }
    this.start();
  },
  
  shiftTo: function (index) {
    this.stop();
    this.currentImageNumber = index;
    
    var thumb = this.images[this.currentImageNumber];
    var tSrc = thumb.getAttribute('src');
    var lSrc = tSrc.replace('/thumbs/', '/large/');
    var large = new Image();
    large.src = lSrc;
    
    //thumb.focus();
    
    //alert(lSrc);
    
    if (large.width > 0 || large.height > 0) { // IE has already loaded this ones
      this.shift(lSrc);
    } else {
      large.onload = function () {
        this.shift(lSrc);
      }.bind(this);
    }
  },
  
  shift: function (lSrc) {
    var img = this.largeImageContainer.find('img').get(0);
    
    var nImg = new Image();
    nImg.src = lSrc;
    nImg.style.display = 'none';
    var p = this.largeImageContainer.get(0);
    p.appendChild(nImg);
    this.transition();
    
    //img.src = lSrc;
  },
  
  transition: function () {
    var p = this.largeImageContainer.get(0);
    var imgCurrent = this.largeImageContainer.find('img').get(0);
    var imgNext = this.largeImageContainer.find('img').get(1);
    jQuery(imgCurrent).css({
      'zIndex':'2'
    });
    jQuery(imgNext).css({
      'display':'',
      'zIndex':'1'
    });
    
    jQuery(imgCurrent).animate({
      'opacity':0
    }, 500, function () {
      if (jQuery(p).find('img').length > 1) {
        var cImg = jQuery(p).find('img').get(0);
        p.removeChild(cImg);
        var cImg = jQuery(p).find('img').get(0);
        if (cImg) {
          var img = new Image();
          img.src = cImg.getAttribute('src');
          if (img.width > 0 || img.height > 0) {
            cImg.style.width = img.width + 'px';
            cImg.style.height = img.height + 'px';
            jQuery(p).animate({
              'width': img.width + 'px',
              'height': img.height + 'px'
            }, 200);
            //p.style.width = img.width + 'px';
            //p.style.height = img.height + 'px';
          } else {
            img.onload = function () {
              cImg.style.width = img.width + 'px';
              cImg.style.height = img.height + 'px';
              jQuery(p).animate({
                'width': img.width + 'px',
                'height': img.height + 'px'
              }, 200);
              /*p.style.width = img.width + 'px';
              p.style.height = img.height + 'px';*/
            }
          }
        }
      }
    });
    
  },
  
  start: function () {
    if (this.isStarted) {
      return;
    }
    this.isStarted = true;
    this.rotateInt = window.setInterval(this.prepareShift.bind(this), this.rotationSpeed);
  },
  
  stop: function () {
    if (!this.isStarted) {
      return;
    }
    this.isStarted = false;
    window.clearInterval(this.rotateInt);
    this.isStarted = false;
  }

});

var fp1 = null;
var fp2 = null;
var fp3 = null;
var pis = null;

jQuery(window).ready(function () {
  
  if (page_options.isFront) {
    fp1 = new FrontProduct("div#product1");
    fp2 = new FrontProduct("div#product2");
    fp3 = new FrontProduct("div#product3");
  } else if (page_options.isProductInfoPage) {
    pis = new ProductImageShift();
  }
  
});

jQuery(window).load(function () {
  
  if (page_options.isFront) {
    fp1.start();
    fp2.start();
    fp3.start();
  }
  
});