/*

MF 2010: Prototype based image slider custom class

*/

// Prototype mouse wheel custom extension
Object.extend(Event, {
        wheel:function (event) {
          var delta = 0;
          if (!event) event = window.event; // IE event
          // Set crossbrowser mouse delta
          if (event.wheelDelta) {
            // IE, Opera, Safari, Chrome - must devide delta on 120
            delta = event.wheelDelta/120;
          } 
          else if (event.detail) {
            // Firefox, must devide delta on 3
            delta = -event.detail/3;
          }
         
          // !!! cancel current event (by default - window scrolling)
          if (event.preventDefault)
            event.preventDefault();
          event.returnValue = false; // IE fix

          return Math.round(delta);
        }
});
// end of extension

var tpImagesSlider = Class.create({
  initialize: function(itemsVisible, currentElement, mainContainer, imagesContainer, scrollImagesContainer, leftArrow, rightArrow) {

    this.itemsVisible = itemsVisible;
    this.currentElement = currentElement;
    this.mainContainer = mainContainer;
    this.imagesContainer = imagesContainer;
    this.scrollImagesContainer = scrollImagesContainer;
    this.generateLeftRightArrows = 0;
    this.showControls = 0;
    this.duration = 0.1;

    // check if there are small images
    if ($(this.imagesContainer) != null) {
    	this.images = $(this.imagesContainer).getElementsByTagName('span');
    	// assumes that all thumbnails have the same width
    	this.imageWidth = this.images[0].offsetWidth;
    		
    	if ( this.images.length > this.itemsVisible ) {
    	   // if use slider - resize containers size by visible items count
    	   this.setContainersSize(this.itemsVisible);
    
           if (this.generateLeftRightArrows) {
    	       this.backwardLink = this.addControlers('bwdLink');
    		   this.forwardLink  = this.addControlers('fwdLink');
           }
           else {
               this.backwardLink = $(leftArrow);
    		   this.forwardLink  = $(rightArrow);
           }
           
           // make 'left' forward link hack
           this.forwardLink.style.left = this.itemsVisible * 68 + 16 + 'px';
    
           // make left-right arrows visible
           this.backwardLink.style.display = 'block';
           this.forwardLink.style.display = 'block';
    
           $(this.backwardLink).observe('click', function() { this.slideByStep(1); }.bind(this) );
           $(this.forwardLink).observe('click', function() { this.slideByStep(-1); }.bind(this) );
    
           this.showControls = 1;
    
           if (this.currentElement != 0) {
              if (this.currentElement > 0) {
                 var i = 1;
                 while (i <= this.currentElement) {
                    this.slideByStep(i);
                 }
              }
           }
           // pre-process arrows: step == this.currentElement
           this.processArrows(this.currentElement);
        }
        else {
    	   // if no slider - must resize containers by actual elements count
    	   this.setContainersSize(this.images.length);
        }
    
        Event.observe($(this.mainContainer), "mousewheel", this.mouseWheelHandler.bind(this), false); // IE, Opera, Chrome, Safari
        Event.observe($(this.mainContainer), "DOMMouseScroll", this.mouseWheelHandler.bind(this), false); // Firefox
    
    	// if there's a specific default thumbnail to start with, slide to it
    	if( this.currentElement !== 0 ) {
    	   this.currentElement -= 1;
    	   this.slideByStep(1);
    	}
    }
  },

  mouseWheelHandler: function(e) {

    var mouseWheelCode = Event.wheel(e);

    if (mouseWheelCode > 0) {
      this.slideByStep(-1);
    }
    else {
      this.slideByStep(1);
    }
  },

  addControlers: function(cssClass) {

    element = new Element('div', { 'class': cssClass });

	element.setStyle({
	   display: this.showControls ? '' : 'none'
	});

    Element.insert( $(this.mainContainer), { 'top': element } );

	return element;
  },

  setContainersSize: function(actualImagesCount) {

    // IE7 width fix
    var ieVersion = navigator.appVersion.match(/MSIE (\d\.\d)/);
    var ie7Fix1 = 0;
    var ie7Fix2 = 0;
    if (ieVersion != null) {
      ieVersion = ieVersion[1] - 0;
      ie7Fix1 = (ieVersion == 7)?20:0;
      ie7Fix2 = ie7Fix1 / 4;
    }

    $(this.mainContainer).setStyle({
	   width: actualImagesCount * this.imageWidth + (11 * 2 * this.showControls) + (actualImagesCount * 4) + ie7Fix1 + 'px'
	});

	$(this.scrollImagesContainer).setStyle({
	   width: actualImagesCount * this.imageWidth + (11 * 2 * this.showControls) + (actualImagesCount * 4) + ie7Fix1 + 'px'
	});
  },

  processArrows: function(step) {
    // disable/enable forward link
    if (step < 0) {
       if (this.currentElement <= this.itemsVisible - this.images.length) {
          $(this.forwardLink).style.display  = 'none';
          $(this.backwardLink).style.display  = 'block';
       }
       else {
          $(this.backwardLink).style.display  = 'block';
       }
    }
    if (step >= 0) {
       if (this.currentElement > (this.itemsVisible - this.images.length)) {
          $(this.backwardLink).style.display  = 'block';
          $(this.forwardLink).style.display  = 'block';
       }
       if (this.currentElement == 0) {
          $(this.backwardLink).style.display  = 'none';
       }
     }
  },

  slideByStep: function(step) {
    
    // check if can scroll left/right
	if ( ( (this.currentElement > this.itemsVisible - this.images.length) && step < 0 ) 
            || ( step > 0 && this.currentElement !== 0 ) ) {

      // increment currentElement index
      this.currentElement += step;
      // IE7 width fix
      var ieVersion = navigator.appVersion.match(/MSIE (\d\.\d)/);
      var ie7Fix = 0;
      if (ieVersion != null) {
        ieVersion = ieVersion[1] - 0;
        ie7Fix = (ieVersion == 7)?(4 - this.currentElement):0;
      }

      new Effect.Morph(this.imagesContainer, {
    	  style: 'margin-left: ' + (this.imageWidth + 4 + ie7Fix) * this.currentElement + 'px;',
		  duration: this.duration,
          afterFinish: (function() { this.processArrows(step); }).bind(this) 
		  })
	}
  }
});