// -----------------------------------------------------------------------------------
//
// ImageSlider v1.2
// http://travisjbeck.com/blog/javascript/the-imageslider-mootools-class/
// by Travis Beck - http://travisjbeck.com
// Last Modification: 10/6/08
//
//
// Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
//    - Free for use in both personal and commercial projects
//    - Attribution requires leaving author name, author link, and the license info intact.
//	
// Requires MooTools v1.2 - http://mootools.net/
//
// =========USAGE=========
// var mySlider = new ImageSlider({
//    objToSlide: 'sliderHolder',            //REQUIRED (String)   - The id of the holder element that will be sliding
//    sliderElements: 'div',                 //REQUIRED (String)   - The type of elements contained within the slider can be any html element(div, p, a, span)
//    numOfElementsToSlide: 2,               //OPTIONAL (Number)   - Number of elements to slide
//    numOfElementsShown: 3,                 //REQUIRED (Number)   - Number of elements visible or unmasked
//    leftBtn: 'slideLeftBtn',               //REQUIRED (String)   - The ID of the element that when clicked will slide your imageslider left
//    rightBtn: 'slideRightBtn',             //REQUIRED (String)   - The ID of the element that when clicked will slide your imageslider right
//    easing: Fx.Transitions.Expo.easeInOut, //OPTIONAL (Function) - The type of easing to use on transition (more info on easing http://mootools.net/docs/Fx/Fx.Transitions#Fx-Transitions)
//    onSlideComplete: function(index){      //OPTIONAL (Function) - Callback Function to fire once sliding is completed. returns index.
//       //index is the negative index of the current position
//    }
// });
// 
// =========PUBLIC FUNCTIONS=========
// mySlider.slideTo(position:Number);
//
// Slides to the position provided. 
// Position is the number of the element you want to slide to
//
// =========CALLBACKS=========
// onSlideComplete(index:Number)
//
// Called after the slide animation has completed
// -----------------------------------------------------------------------------------


var ImageSlider = new Class({
   Implements: [Options, Events],
   options: {
      objToSlide: '',
      sliderElements: '', /* can be any html element (div, p, a, span) */
      numOfElementsToSlide: 2, /* this is the number of elements that slide when the button is hit */
      numOfElementsShown: 3, /* this is the total number of elements shown at any give time */
      leftBtn: '',
      rightBtn: '',
      easing: Fx.Transitions.Expo.easeInOut
      //onSlideComplete: $empty
      
   },
   initialize: function(options){
      this.setOptions(options);
      this.options.objToSlide = $(this.options.objToSlide);
      if(!(this.options.objToSlide)){return false;}//do nothing
      this.setup();
   },
   
   setup: function(){
      var o = this.options;
      o.sliderElements = (o.objToSlide.getElements(o.sliderElements));
      o.leftBtn = $(o.leftBtn);
      o.rightBtn = $(o.rightBtn);
      o.objToSlide.setStyles({
         position: 'relative',
         left: 0
      });
      var element = $(o.sliderElements[0]);
      var margins = parseFloat(element.getStyle('margin-left')) + parseFloat(element.getStyle('margin-right'));
      var size  = element.getSize();
      o.elementWidth = size.x + margins;
      o.objToSlide.setStyle('width', (o.elementWidth * o.sliderElements.length));
      o.index = 0;
      o.total = o.sliderElements.length - o.numOfElementsShown;
      o.totalMoves = -(o.total / o.numOfElementsToSlide);
      o.myFx = new Fx.Morph(o.objToSlide, {duration: 500, transition: o.easing, link: 'chain'});
      
      o.leftBtn.addEvent("click", this.leftClick.bindWithEvent(this));
      o.rightBtn.addEvent("click", this.rightClick.bindWithEvent(this));
      o.leftBtn.setStyles({'opacity': '0.5', 'cursor': 'auto'});
   },
   
   leftClick: function(e){
      e.stop();
      if(this.sliding){return;}
      var o = this.options;
      var newPos;
      o.index += 1;
      if(o.index < 0){
         newPos = (o.elementWidth * o.numOfElementsToSlide)*o.index;
      }else{
         o.index = 0;
         newPos = 0;
      }
      var cur = o.objToSlide.getCoordinates(o.objToSlide.getParent()).left;
      if(cur == newPos){return false;}
      this.slide(newPos);
      
      //alert("totalMoves: " + o.totalMoves + ", index: " + o.index);
      if (o.index == 0) o.leftBtn.setStyles({'opacity': '0.5', 'cursor': 'auto'});
      if (o.totalMoves < o.index) o.rightBtn.setStyles({'opacity': '1', 'cursor': 'pointer'});
   },
   
   rightClick: function(e){
      e.stop();
      if(this.sliding){return;}
      var o = this.options;
      var newPos;
      o.index -= 1;
      if(o.index >= o.totalMoves){
         newPos = (o.elementWidth * o.numOfElementsToSlide)*o.index;
      }else{
         o.index = o.totalMoves;
         newPos = (o.elementWidth * o.numOfElementsToSlide)*o.index;
      }
      var cur = o.objToSlide.getCoordinates(o.objToSlide.getParent()).left;
      if(cur == newPos){return false;}
      this.slide(newPos);
      
      //alert("totalMoves: " + o.totalMoves + ", index: " + o.index);
      if (o.totalMoves >= o.index) o.rightBtn.setStyles({'opacity': '0.5', 'cursor': 'auto'});
      if (o.index != 0) o.leftBtn.setStyles({'opacity': '1', 'cursor': 'pointer'});
   },
   
   slide: function(newPos){
      this.sliding = true;
      this.options.myFx.start({
         'left': newPos
      }).chain(function(){
         this.sliding = false;
         this.fireEvent('onSlideComplete', this.options.index);
      }.bind(this));
   },
   
   slideTo: function(pos){
      if($type(pos) != "number"){return false;}
      var o = this.options;
      pos = pos + 1;
      var newPos;
      o.index = -(((pos - o.numOfElementsShown) / o.numOfElementsToSlide).round());
      if(o.index >= o.totalMoves){
         newPos = (o.elementWidth * o.numOfElementsToSlide)*o.index;
      }else{
         o.index = o.totalMoves;
         newPos = (o.elementWidth * o.numOfElementsToSlide)*o.index;
      }
      this.slide(Math.min(0,newPos));
   }
});
window.addEvent('domready', function(){
	/* thumbnails example , links only */
	/*
	new ImageSlider({itemsVisible:5, // the number of thumbnails that are visible
					currentElement: 0, // the current element. starts from 0. If you want to start the display with a specific thumbnail, change this
					leftBtn: 'leftBtn',
              		rightBtn: 'rightBtn',
					thumbsContainer: 'thumbs',
					elementScrolled: 'thumb_container',
					overallContainer: 'gallery_container'});
	*/			
     new ImageSlider({
              objToSlide: 'sliderContainer',
              sliderElements: 'a',
              numOfElementsToSlide:6, 
              numOfElementsShown: 7,
              leftBtn: 'leftBtn',
              rightBtn: 'rightBtn'
           });

});