/*
* Image Pan
* @copyright Kameleon CMS Limited (info@kameleon-cms.com)
* @author Tom Mason
* @requires Mootools 1.2
* @builddate 01/06/2010
* @tested IE6,IE7,IE8,FF3,Safari 3 (windows), Google Chrome
*/

var kamPan = new Class({
	Implements:[Options,Events],
	options:{
		transitionPeriod:10000,
		transitionDelay:0
	},
	rootElement:null,
	imageArr:new Array(),
	panDiv:null,
	coords:null,
	fx:null,
	currentImage:null,
	direction:0,
	index:0,
	forwardButton:null,
	backButton:null,
	numberArr:new Array(),
	pauseToggle:0,
	fxFlag:false,

	initialize: function(options){
		this.setOptions(options)
	},
	
	init: function(rootElement){
		var self = this;
		this.rootElement = $(rootElement);
		
		if(this.rootElement != null){
				//get nav controls
				this.forwardButton = $('forward');
				this.backButton = $('back');
				
				//get numbers
				this.numberArr = $('panNav').getElements('li');
				this.numberArr.each( function(currentNumber){
					var innerValue = currentNumber.getElement('a').get('html')
					if(parseFloat(innerValue) > 0){
						currentNumber.addEvent('click', function(evt){
							evt.stop();
							self.jumpTo(innerValue -1);
						});
					}
				});
				
				//get pause
				if($('pause') != null){
					$('pause').addEvent('click', function(evt){
						if(self.fxFlag == true){						
							if(self.pauseToggle == 0){								  
								self.fx.pause();
								self.pauseToggle = 1;
								this.setStyles({
									'background': 'url(/style/images/pause-button.png) no-repeat 0 0'
								});
							}else{
								(self.direction == 0) ? self.direction == 1 : self.direction = 0;
								self.fx.resume();
								self.pauseToggle = 0;
								this.setStyles({
									'background': 'url(/style/images/play-button.png) no-repeat 0 0'
								});
	
							}
						}
					});
				}
				
				this.forwardButton.addEvent('click', function(evt){
					evt.stop();
					self.forwardIndex();											  
				});
				
				this.backButton.addEvent('click', function(evt){
					evt.stop();
					self.backIndex();
				});

				//get images
				this.imageArr = this.rootElement.getElements('img');

				//remove all elements inside the rootElement
				this.rootElement.erase('html');
				
				//root coords
				this.coords = this.rootElement.getCoordinates();
				
				//add panning div
				this.panDiv = new Element('div',{
					'id':'panDiv'			
				});
				
				//panning div styles
				this.panDiv.setStyles({
					'height': this.coords.height + 'px',
					'width': this.coords.width +'px'					  
				});
									  
				this.panDiv.inject(this.rootElement);
				
				//set up fx
				this.fx = new Fx.Morph( this.panDiv, {					
					transition: 'sine:out',
					onStart: function(){
						self.fxFlag = true;	
					},
					onComplete: function(){
						self.fxFlag = false;
						self.panImage();				
					}
				});
				this.setImage(this.index);
				
				this.panImage();		
			}
		
	},
	
	setImage: function(index){
		if(this.imageArr[index] != ''){	
			this.currentImage = this.imageArr[index];
			var currentImgSrc = this.currentImage.get('src');
			
			this.panDiv.setStyles({
				'background': 'url(' + currentImgSrc + ') no-repeat 0 0'
			});	 
		}
	},
	
	resetPan: function(){
		this.fx.cancel();
		this.panDiv.setStyle('backgroundPosition','0px');
		this.setImage(this.index);
		this.direction = 0;
		this.panImage();
		this.markNumber(this.index);
		this.pauseToggle = 0;
		$('pause').setStyles({
			'background': 'url(/style/images/play-button.png) no-repeat 0 0'				 
		});		
	},
	
	forwardIndex: function(){
		this.index++;
		if(this.index == this.imageArr.length) this.index = 0;
		this.resetPan();
	},
	
	backIndex: function(){
		this.index--
		if(this.index < 0 ) this.index = this.imageArr.length - 1;
		this.resetPan();
	},
	
	markNumber: function(index){
		this.numberArr.each( function(currentNumber){
			currentNumber.removeClass('selected');
			if(index + 1 == currentNumber.getElement('a').get('html')){
				currentNumber.addClass('selected');	
			}
		});
	},
	
	jumpTo: function(index){
		this.index = index;
		this.resetPan();
	},
	
	panImage: function(){				
		var self = this;
		var startPan = function(){
			self.startPan();
		}		
		startPan.delay(this.options.transitionDelay);	
	},
	
	startPan: function(){
		var height = parseFloat(this.currentImage.get('height'));
		var viewableHeight = this.panDiv.getSize().y;
		var self = this;
		
		this.fx.options.duration = (height / viewableHeight) * 2000;
		
		if(height > viewableHeight){

			var panTo = null;			
			
			if(self.direction == 0){
				panTo = height - viewableHeight;
				self.direction = 1;
			}else{
				panTo = 0;			
				self.direction = 0;
			}				
			self.fx.start({'backgroundPosition':'0 -'+panTo});			
		}			
	}
	
});