/*
Canvas reflection part is based on reflection.js
http://cow.neondragon.net/stuff/reflection/
*/
var speed = 80;
var smooth = 2;
var canvas_width = 938;
var canvas_height = 170;
var my_box_large = 600;
var my_box_small = 130;
var transparantie = 0.40;
var reflect_hoog = 0.50;
var richting = 'right';

var box_options = '&box='+my_box_small;

Event.observe(window,'load',function(){	
	init_gallery();
	setTimeout("make_gallery()", 3000);
});

function fill_gallery() {
	
	gallery_ary.push(gallery_ary.shift());	
	seq_ary.push(seq_ary.shift());	

	$('img-holder').innerHTML = '';	
	
	if(gallery_ary.length > 0) {
			 
		for(var i= 0;i < gallery_ary.length;i++) {		
		
			var new_div = document.createElement('div'); 
			$(new_div).className = "gallery-item";
			$(new_div).id = "div_"+i;
			
			gallery_ary[i].id = 'img_'+i;								
			new_div.appendChild(gallery_ary[i]);
			var new_canvas = document.createElement('canvas');
			new_canvas.id = 'canvas_'+i;
			new_canvas.width = gallery_ary[i].style.width;
			new_canvas.height = gallery_ary[i].style.height;
			new_div.appendChild(new_canvas);
			
			$('img-holder').appendChild(new_div);			
		}
		
		reorder_gallery();
	}

}

function make_gallery() {		
	$('imgs').style.width = canvas_width+'px';
	$('imgs').style.height = canvas_height+'px';	
	
	var Gallery= new ReflectionObject;

	Gallery.init();
	
	Gallery.setOptions('borderColor','D1DDEF');
	Gallery.setOptions('borderOnColor','ffffff');
	Gallery.setOptions('refWidth',my_box_small);
	Gallery.setOptions('refHeight',my_box_small);
	Gallery.setOptions('height',my_box_small);
	Gallery.setOptions('width',my_box_small);
	Gallery.setOptions('opacity',0.3);	
	
	for(var i=0;i<gallery_ary.length;i++) {	
		$('div_'+i).style.width = $('img_'+i).getStyle('width');
		$('div_'+i).style.height = $('img_'+i).getStyle('height');
		Gallery.addItem(i);
	}	
	
	$('img-holder').setFXOptions(speed,smooth);
	
	Gallery.start();	
}

function reorder_gallery() {		

	var Gallery= new ReflectionObject;

	Gallery.init();
	
	Gallery.setOptions('borderColor','ffffff');
	Gallery.setOptions('borderOnColor','ffffff');
	Gallery.setOptions('refWidth',my_box_small);
	Gallery.setOptions('refHeight',my_box_small);
	Gallery.setOptions('height',my_box_small);
	Gallery.setOptions('width',my_box_small);
	Gallery.setOptions('opacity',0.3);	
	
	for(var i=0;i<gallery_ary.length;i++) {
		$('div_'+i).style.width = $('img_'+i).getStyle('width');
		$('div_'+i).style.height = $('img_'+i).getStyle('height');		
		Gallery.addItem(i);
	}	
	
	$('img-holder').setFXOptions(speed,smooth);
	
	Gallery.reorder();	
}

var MyFX={
	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);

		if(margin > 10) {
			$('img-holder').stopScroll();
			$('img-holder').scrolRight();
			richting = 'right';
		}		

	},
	
	scrolRight:function(element,step){
		element=$(element);
		var margin = element.getStyle('marginLeft');
		margin = parseInt(margin.replace('px',''));
		var breedte = element.getStyle('width');
		breedte = parseInt(breedte.replace('px',''));
		
		margin=margin-element.fxoptions.step;
		element.setStyle({marginLeft:margin+'px'});
		element.fxoptions.timeoutHandler=setTimeout(element.scrolRight.bind(element), element.fxoptions.timeout);
		var right_pos = breedte-(-margin);

		if(right_pos < canvas_width) {
			$('img-holder').stopScroll();
			$('img-holder').scrolLeft();
			richting = 'left';
		}
	},
	
	stopScroll:function(element){
		element=$(element);
		clearTimeout(element.fxoptions.timeoutHandler);
		element.fxoptions.active=true;
	}

}


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.margin_right = function(value){
		var _margin_right = value;
	}
	
	this.start=function(){
		var ruimte_rechts = $('div_0').getStyle('marginRight'); 
		var tussen_ruimte = parseInt(ruimte_rechts.replace('px',''));
		$('img-holder').setStyle({width:((this.options['elementsNum']*this.options['width'])+(this.options['elementsNum'])*tussen_ruimte)+(this.options['elementsNum']*2)+'px'});
		//$('img-holder').setStyle({marginLeft:-(((this.options['elementsNum']*this.options['width'])+(this.options['elementsNum'])*tussen_ruimte))/2+300+'px'});
		$('img-holder').setStyle({marginLeft:'0px'});
		$('img-holder').scrolRight();	
	}
	
	this.reorder=function(){
		$('img-holder').setStyle({marginLeft:'0px'});
		
	}	

	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;
		
/*		
		image.observe('click',function(event){								   
			var element=Event.element(event);				

			if(!$('gallery-pop-window')){			
				//document.body.insert('<div id="gallery-pop-window"><div id="pop-img" ></div><div id="ctrl-bar"><a id="pop-close" href="#">Close [x]</a></div></div>');
				$('pop-close').observe('click',function(){
					$('gallery-pop-window').style.left = '-10000px';
					$('gallery-pop-window').style.top = '-10000px';					
					$('gallery-pop-window').hide();				
				});
			
			}

			$('pop-close').observe('click',function(){
				$('gallery-pop-window').style.left = '-10000px';
				$('gallery-pop-window').style.top = '-10000px';					
				$('gallery-pop-window').hide();				
			});
			$('gallery-pop-window').show();			
			var url_ary = element.src.split('/');
			var file_name = url_ary[url_ary.length-1];
			$('pop-img').update('<img src="../includes/photo.php?file=/fotobanner/'+file_name+'&box='+my_box_large+'" alt="image" />');
			setTimeout(function() {set_box(element.id)}, 500);	
			
		})
		
		if (document.all && !window.opera) { 
			var p=image;			
			 
			p.className = 'reflected';
			p.style.cssText = 'vertical-align: bottom';

			var reflection = document.createElement('img');
			reflection.src = p.src;
			
			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 { 
		
			var ctx = canvas.getContext("2d");
			ctx.save();
			ctx.fillStyle = '#acacac' 
			ctx.fillRect(0,0,image.width+2,image.height+20);
			ctx.translate(0,image.height-1);
			ctx.scale(1,-1);
			ctx.drawImage(image, 1, -1,image.width, image.height);
			ctx.restore();
			
			ctx.globalCompositeOperation = "destination-out";
			var gradient = ctx.createLinearGradient(0, 0, 0, image.height+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 && navigator.appVersion.indexOf('Chrome') == -1) {
				//if(navigator.appVersion.indexOf(’Chrome’) == -1)) {				
					ctx.fill();
				//} else {
				//	ctx.fillRect(0, 0, image.width+2, image.height*2);	
				//}
			} else {
				ctx.fillRect(0, 0, image.width+2, image.height*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});
			if(richting == 'left') {
				$('img-holder').scrolLeft();				
			} else {
				$('img-holder').scrolRight();								
			}
		}
		
		onFunction=function(event) {
			var element = Event.element(event);
			element.setStyle({'border' :  'solid 1px #'+onColor});
			$('img-holder').stopScroll();
			
		}
		
		Reflection.add(image, { height: reflect_hoog, opacity: transparantie });
				
		$(image).observe('mouseout', offFunction);
		$(image).observe('mouseover', onFunction);
	}

function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	
	return [curleft,curtop];
}

function set_box(sel_img) {
	var img_width = $('pop-img').getStyle('width').substr(0,$('pop-img').getStyle('width').indexOf("px")); 
	var img_height = $('pop-img').getStyle('height').substr(0,$('pop-img').getStyle('height').indexOf("px"));
	
	if(img_width > img_height) {
		var verhouding =  img_width/my_box_large;
	} else {
		var verhouding =  img_height/my_box_large;
	}
	
	img_width = img_width/verhouding;
	img_height = img_height/verhouding;
	
	var new_h = img_height;
	var new_w = img_width;
	
	$('gallery-pop-window').style.width = new_w+1+'px';
	$('gallery-pop-window').style.height = new_h+30+'px';
	
	var coord_left = parseInt((screen_w - $('gallery-pop-window').offsetWidth) / 2, 10);
	var coord_top = parseInt((screen_h - $('gallery-pop-window').offsetHeight) / 2, 10);

	$('gallery-pop-window').style.left = coord_left+'px';
	$('gallery-pop-window').style.top = coord_top+'px';

}