/**
 * Apex Framework
 * 
 * @revised $LastChangedDate: 2008-11-20 11:40:34 +0800 (Thu, 20 Nov 2008) $
 * @version $Id: Gallery.js 4 2008-11-20 03:40:34Z eugim $
 */
 
ApexGallery = Class.create({
	
	id : '',
	
	_container : null,
	
	_previewMaskEl : null,
	
	_thumbNailMaskEl : null,
	
	_thumbNailMouseHandles : [],
	
	_thumbStartLeft : -570,
	
	_thumbNextDistance : 60,
	
	_thumbCurrentDistance : null,
	
	_thumbMaxDistance : null,
	
	_itemStartLeft : 0,
	
	_itemNextDistance : -470,
	
	_itemCurrentDistance : null,
	
	_itemMaxDistance : null,
	
	itemChangeInterval : 6000, //6 seconds
	
	itemCount : null,
	
	initialize : function(config){
		
		Object.extend(this, config);
		this._init();
	},
	
	_init : function(){
		
		this._container 	  = $(this.id);
		this._previewMaskEl   = this._container.getElementsByClassName('apex-gallery-mask')[0];
		this._thumbNailMaskEl = this._container.getElementsByClassName('apex-gallery-item-thumbs-mask')[0];
		this._thumbNailMouseHandles = this._container.getElementsByClassName('apex-gallery-item-thumbs-mouse-handler')[0].select('span'); 
		
		//install listeners for clicking thumbnails
		for(var i = 0, len = this._thumbNailMouseHandles.length; i < len; i++){
			this._thumbNailMouseHandles[i].observe('click', this._handleMouseClick.bindAsEventListener(this));	
		}
		
		//set masking of thumbnail (needed to implement on the client; IE has problems if not implemented on client)
		this._thumbNailMaskEl.setStyle({
			visibility : 'visible'
		   ,opacity : .8
		});
		
		//start initial slide of thumbnail
		this._thumbCurrentDistance = this._thumbStartLeft;
		this._itemCurrentDistance  = this._itemStartLeft;
		 
		this._thumbMaxDistance = this._thumbStartLeft + (this._thumbNextDistance * (this.itemCount - 1));
		this._itemMaxDistance  = this._itemStartLeft + (this._itemNextDistance * (this.itemCount - 1));
		this._thumbNailMaskEl.setStyle({
			left : this._thumbCurrentDistance + 'px'
		});
		
		this.startSlideShow();
	},
	
	_handleMouseClick : function(e){
		
		this.stopSlideShow();
		var hndlIndex = this._thumbNailMouseHandles.indexOf(Event.element(e)) + 1;
		this._thumbCurrentDistance = this._thumbStartLeft  + ((this._thumbNextDistance * hndlIndex) - (this._thumbNextDistance * 2));
		this._itemCurrentDistance  = this._itemStartLeft  + ((this._itemNextDistance * hndlIndex) - (this._itemNextDistance * 2));
		this.changeSlide();
		this.startSlideShow();
	},
	
	changeSlide : function(){
		
		//move thumb
		this._thumbCurrentDistance = this._thumbMaxDistance <=  this._thumbCurrentDistance ?
									 this._thumbStartLeft :
									 this._thumbCurrentDistance + this._thumbNextDistance;
		this._thumbNailMaskEl.setStyle({
			left : this._thumbCurrentDistance + 'px'	
		});
		
		//move item
		this._itemCurrentDistance = Math.abs(this._itemMaxDistance) <= Math.abs(this._itemCurrentDistance) ?
									this._itemStartLeft :
									this._itemCurrentDistance + this._itemNextDistance;
		this._previewMaskEl.setStyle({
			left : this._itemCurrentDistance + 'px' 
		});
	},
	
	stopSlideShow : function(){
		clearInterval(this._intervalId);
	},
	
	startSlideShow : function(){
		var obj = this;
		this._intervalId = setInterval(function(){
			obj.changeSlide();	
		}, this.itemChangeInterval);
	}
});