/*
Canvas reflection part is based on reflection.js
*/

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

	var Gallery= new ReflectionObject;

	Gallery.init();
	
	Gallery.setOptions('borderColor','acacac');
	Gallery.setOptions('borderOnColor','ffff00');
	Gallery.setOptions('refWidth',75);
	Gallery.setOptions('refHeight',75);
	Gallery.setOptions('height',75);
	Gallery.setOptions('width',75);
	Gallery.setOptions('opacity',0.4);
	
	Gallery.addItem('001');
	Gallery.addItem('002');
	Gallery.addItem('003');
	Gallery.addItem('004');
	Gallery.addItem('005');
	Gallery.addItem('006');
	Gallery.addItem('007');
	Gallery.addItem('008');
	Gallery.addItem('009');
	
	//set scroll options (timeout,step)
	$('img-holder').setFXOptions(40,4);
	
	Gallery.start();
});


//Yes, i adimt, this was bit inspired by moo.fx :]

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('marginLeft');
		margin=parseInt(margin.replace('px',''));
		margin=margin+element.fxoptions.step;
		element.setStyle({marginLeft:margin+'px'});
 
		element.fxoptions.timeoutHandler=setTimeout(element.scrolLeft.bind(element), element.fxoptions.timeout);

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

		element.fxoptions.timeoutHandler=setTimeout(element.scrolRight.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(){
	
		$('img-holder').setStyle({width:((this.options['elementsNum']*this.options['width'])+(this.options['elementsNum'])*12)+'px'});
		$('img-holder').setStyle({marginLeft:-(((this.options['elementsNum']*this.options['width'])+(this.options['elementsNum'])*12))/2+300+'px'});

		//Add event listeners on scroll buttons
		$('md').observe('mouseover',function(event){
			$('img-holder').scrolRight();
			
		});	
		$('md').observe('mouseout',function(event){ 
			$('img-holder').stopScroll();
		
		});	

		$('ml').observe('mouseover',function(event){
			$('img-holder').scrolLeft();
		});	
		$('ml').observe('mouseout',function(event){
			$('img-holder').stopScroll();
		});
		
	}

	this.addItem=function(imageNUMID){
		var image=$('img'+imageNUMID);
		var canvas = $('canvas'+imageNUMID);
		
		this.BindFunction(image);
		this.options['elementsNum']=this.options['elementsNum']+1;
		image.NUMID=imageNUMID;
		
		
		if (document.all && !window.opera) { // oh shut, we are in IE, lets think of something ...
			var p=image;
			/* 
			I know, lets  Replace canvas element with image
			Then apply transformations and filter to it.
				
			*/
			 
			p.className = 'reflected';
			p.style.cssText = 'vertical-align: bottom';

			var reflection = document.createElement('img');
			
			reflection.src = p.src;
			/*
			I'm not gonna even pretend that i understand what this filter bellow does.
			This code (whole reflection part to be precise) is taken from reflection.js 
			http://cow.neondragon.net/stuff/reflection/
			*/
			reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(this.options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(this.options['height']*100)+')';
			p.parentNode.replaceChild(reflection,canvas);
		
		}else{ // weeeee, we are not in IE, lets use canvas!!!!
			var ctx = canvas.getContext("2d");
			ctx.save();
			ctx.fillStyle = '#acacac' 
			ctx.fillRect(0,0,this.options['refWidth']+2,this.options['refHeight']+2);
			ctx.translate(0,image.height-1);
			ctx.scale(1,-1);
			ctx.drawImage(image, 1, -1,this.options['refWidth'], image.height);
			ctx.restore();
			
			ctx.globalCompositeOperation = "destination-out";
			var gradient = ctx.createLinearGradient(0, 0, 0, this.options['refHeight']+2);

			gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
			gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-this.options['opacity'])+")");
			ctx.fillStyle = gradient;
			
			if (navigator.appVersion.indexOf('WebKit') != -1) {
				ctx.fill();
			} else {
				ctx.fillRect(0, 0, this.options['refWidth']+2, this.options['refHeight']*2);
			}
		}
	
	}
}
	
	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);
	}