/* Javascript Document */

function getImagesAJAXRequest(panelID, panelElementID) {
	var imagesURL = '/elements/panels/panel_images.php?panelid='+panelID;
	//Ajax response
	$.ajax({type: 'GET',
			url: imagesURL, 
			success: function (data) { $('#'+panelElementID).replaceWith(data); 	Widget.init();
			}
	});
}

 Widget = {
  //settings
  //width of small image
  increment: 90,
  //number of viewable images
  numViewable : 5,
  galleryWrapper:'#panel-nav-wrapper',
  scrollWrapper: '#panel-nav',
  bigImages:'#panel-big-images',
  leftButton:'#clickleft',
  rightButton:'#clickright',
  currentImageWrapper: '#current_image',
  
  //defaults
  position:0,
  currentImage: 0,
  started: 0,
  //change to alter the speed of the auto-rotate
  pause: 3000,
  finished : 0,
  init:function(){
  	 	//set various properties
		this.scrollPane = $(this.galleryWrapper);
   		this.scrollContent = $(this.scrollWrapper);
		this.images = $(this.bigImages);		
		this.numItems =  this.scrollContent.children().size(); 
		this.maxScroll = (this.numItems - 1 ) * this.increment;
		this.scrollPane.css('overflow','hidden');

		
		//intial state
		this.images.children().hide();
		this.setBigImage();
		this.addClickEvents();
		this.startTimer();
	
	
		$(this.currentImageWrapper).hover(
				function () {clearInterval(Widget.timer);}, 
      			function () {Widget.startTimer();});
		
		// left and right movement
		$(this.leftButton)
			.click(
				function(){
					if(Widget.finished == 0){	Widget.moveLeft() };	
				})
			.hover(
				function () {clearInterval(Widget.timer);}, 
      			function () {Widget.startTimer();});
	
		
		$(this.rightButton).click(function(){
			if(Widget.finished == 0){							   
				Widget.finished = 1;
				Widget.toMove = Widget.numItems-1;	
				Widget.scrollContent.css({'left':'-'+Widget.increment+'px'});
				Widget.moveItem();
				Widget.moveSlider(0);
				Widget.setBigImage();
			 }
			
		}).hover(
				function () {clearInterval(Widget.timer);}, 
      			function () {Widget.startTimer();});
										 
  },
  
  moveLeft:function(){
  		Widget.toMove = 0;
		Widget.moveSlider(Widget.increment*-1);
  },
  startTimer: function(){
  	Widget.timer = window.setInterval(function () {
		//comment out next line to stop auto rotate
		Widget.moveLeft();
	},Widget.pause);
  },
  moveItem:function(){
  		var itemToMove = Widget.scrollContent.children()[Widget.toMove];
		var imageToMove = Widget.images.children()[Widget.toMove];
		
		if(Widget.toMove == 0){
			$(itemToMove).remove().appendTo(Widget.scrollWrapper);
			$(imageToMove).remove().appendTo(Widget.images);
		} else {
			$(itemToMove).remove().prependTo(Widget.scrollWrapper)
			$(imageToMove).remove().prependTo(Widget.images);
		}
		Widget.addClickEvents();
  }, 
  addClickEvents:function(){
 	 this.scrollContent.children().each(function( i ){
		$(this).unbind().click(function(){	
			Widget.currentImage = i;
			Widget.setBigImage();	
		}).hover(
      		function () {clearInterval(Widget.timer);}, 
      		function () {Widget.startTimer();});
		});
  },
  //actually move the slider
  moveSlider:function(direction){
	this.scrollContent.animate({'left':direction}, 500,'linear',function(){
		if(Widget.toMove == 0){
			Widget.moveItem();
			Widget.scrollContent.css({'left':0});
			Widget.setBigImage();
		}
	});
  },
  //change the big image and move the indicator
  setBigImage:function(){		
		var currentBigImage = this.images.children()[this.currentImage];
		var currentThumbImage =  this.scrollContent.children()[this.currentImage];
		
		this.images.children().fadeOut(1200);
		$(currentBigImage).fadeIn(800);	
		var thumbPosition = $(currentThumbImage).position();
		$(this.currentImageWrapper).animate({'left':thumbPosition.left}, 100);
		Widget.finished = 0;
		
  }
};