/*
Gallery viewer javascript
requires prototype framework and script.aculo.us library
*/

Event.observe(window,'load',function(){

	var Gallery= new ReflectionObject;

	Gallery.init();
	
	
	// thumbnail options
	Gallery.setOptions('borderColor','000000');
	Gallery.setOptions('borderOnColor','f6843e');
	Gallery.setOptions('refWidth',75);
	Gallery.setOptions('refHeight',75);
	Gallery.setOptions('height',75);
	Gallery.setOptions('width',75);
	Gallery.setOptions('opacity',0.4);

	//set scroll options (timeout,step)
	$('thumbnaillist').setFXOptions(20,8);

	Gallery.start();
});



var MyFX={
	//set some basic options, like timeout and step for scroll
	// (less means smoother scroll)
	setFXOptions: function(element,timeout,step){
		var element=$(element);
		element.fxoptions={
			timeout:timeout,
			step:step,
			timeoutHandler:{},
			active:false
		}

	},

	scrolLeft:function(element,step){
		if(element.fxoptions.active) element.fxoptions.active=false;
		element=$(element);
		var margin=element.getStyle('margin-left');
		margin=parseInt(margin.replace('px',''));
		margin=margin+element.fxoptions.step;

		if(margin <= -8){
			element.setStyle({marginLeft:margin+'px'});
			element.fxoptions.timeoutHandler=setTimeout(element.scrolLeft.bind(element), element.fxoptions.timeout);
		}

	},
	
	scrollRight:function(element,step){
		element=$(element);
		var margin=element.getStyle('margin-left');
		margin=parseInt(margin.replace('px',''));
		margin=margin-element.fxoptions.step;
		element.setStyle({marginLeft:margin+'px'});


		 // begin finding far right width
					var thumbnailswidth=0;
					$$('.galleryitem').each(function(s) {
						thumbnailswidth=parseInt(thumbnailswidth + s.getWidth());
					}); 
			var thumbnailwidth = $('thumbnaillist').up().getWidth();
			thumbnailwidth=parseInt(thumbnailswidth-thumbnailwidth);
			var thumbnailleft = $('thumbnaillist').getStyle('margin-left');
			thumbnailleft=parseInt(thumbnailleft.replace('px',''));
			var thumbnailrightlimit= '-'+thumbnailwidth;
			thumbnailrightlimit = parseInt(thumbnailrightlimit);
			// end finding far right width
			
			if(thumbnailleft < thumbnailrightlimit){
			}else{
				element.fxoptions.timeoutHandler=setTimeout(element.scrollRight.bind(element), element.fxoptions.timeout);
			}
			
	},
	stopScroll:function(element){
		element=$(element);
		clearTimeout(element.fxoptions.timeoutHandler);
		element.fxoptions.active=true;
	}

}

//Extend element methods with our FX functions that we use for scrolling
Element.addMethods(MyFX);




var ReflectionObject = function(){
	
	this.init=function(){
		this.options={};
		//this.options['elementsNum']=0;
	}
	
	
	this.setOptions=function(name,value){
		this.options[name]=value;
	}
	
	this.getOptions=function(name){
		return this.options[name];
	}
	


	this.start=function(){
		
		//$('thumbnaillist').setStyle({width:((this.options['elementsNum']*this.options['width'])+(this.options['elementsNum'])*12)+'px'});
		//$('thumbnaillist').setStyle({marginLeft:-(((this.options['elementsNum']*this.options['width'])+(this.options['elementsNum'])*12))/2+300+'px'});

		//Add event listeners on scroll buttons
		$('previousbutton').observe('mouseover',function(event){
			var thumbnailleft = $('thumbnaillist').getStyle('margin-left');
			thumbnailleft=parseInt(thumbnailleft.replace('px',''));
			if(thumbnailleft = -6 || thumbnailleft < -6){
				$('thumbnaillist').scrolLeft();
			}else{	
			}
		});	
		
		$('previousbutton').observe('mouseout',function(event){ 
			$('thumbnaillist').stopScroll();	
		});	


		$('nextbutton').observe('mouseover',function(event){
			 // begin finding far right width
					var thumbnailswidth=0;
					$$('.galleryitem').each(function(s) {
						thumbnailswidth=parseInt(thumbnailswidth + s.getWidth());
					}); 
			var thumbnailwidth = $('thumbnaillist').up().getWidth();
			thumbnailwidth=parseInt(thumbnailswidth-thumbnailwidth);
			var thumbnailleft = $('thumbnaillist').getStyle('margin-left');
			thumbnailleft=parseInt(thumbnailleft.replace('px',''));
			var thumbnailrightlimit= '-'+thumbnailwidth;
			thumbnailrightlimit = parseInt(thumbnailrightlimit);
			// end finding far right width
			
			if(thumbnailleft < thumbnailrightlimit){
			}else{
				$('thumbnaillist').scrollRight();
			}
		});	
		
		
		$('nextbutton').observe('mouseout',function(event){
			$('thumbnaillist').stopScroll();
		});
		
	}


}
	
	ReflectionObject.prototype.BindFunction=function(image){
		
		var offColor=this.options['borderColor'];
		var onColor=this.options['borderOnColor'];
		
		offFunction=function(event) {
			var element = Event.element(event);
			element.setStyle({'border' :  'solid 1px #'+offColor});
		}
		
		onFunction=function(event) {
			var element = Event.element(event);
			element.setStyle({'border' :  'solid 1px #'+onColor});
		}
		
		$(image).observe('mouseout', offFunction);
		$(image).observe('mouseover', onFunction);
	}