document.observe("dom:loaded", function() {
	if($('product_picture_content')) {
		$('product_picture_content').hide();
		new Effect.Appear('product_picture_content',{duration : 1.5});
	}

});


function showPreview(key) {
	$$(".product_preview").each(function(e) {
		e.hide();
	});
	new Effect.Appear("product_preview_"+key, {duration : 1});
}





// --------------------------------------------------------------------------
// image list : managing the slide show
var imageList = {
	'images': null,
	'index': 0,
	'fadeTimeout': null,
	'nextTimeout': null,
	
	initialize: function(current, images) {
		this.images = images;
		
		var newimg = document.createElement('img');
		newimg.setAttribute('id','image_switcher');
		$('main_header').appendChild(newimg);
		
		//Switch to first image
		if ($('image_switcher') != null) {
			$('image_switcher').style.zIndex = 10;
			var curfile = this.images[this.index].file;
			$('image_switcher').hide();
			$('image_switcher').src = curfile;
			setTimeout(function() {
				var cur = curfile;
				new Effect.Appear('image_switcher', {
					beforeStart : function() {ajaxUpdate('','site/ajax.slideshow.php','file='+ cur,function(req) {});}
				});
			},1000);
		}
		
		//Create a periodical executer
		if(images.length > 1) {this.nextTimeout = setTimeout("imageList.next();", 3000);}
		
	},
	
	next: function() {
		this.index++;
		if(this.index == this.images.length) this.index = 0;
		var curfile = this.images[this.index].file;
		$('main_header').style.backgroundImage = 'url('+ $('image_switcher').src +')';
		//$('image_switcher').style.display = "none";
		new Effect.Fade('image_switcher', {
			afterFinish : function() {$('image_switcher').src = curfile;}
		});
		
		setTimeout(function() {
			var cur = curfile;
			new Effect.Appear('image_switcher', {
				beforeStart : function() {ajaxUpdate('','site/ajax.slideshow.php','file='+ cur,function(req) {});}
			});
		},2000);
		this.nextTimeout = setTimeout("imageList.next();", 4000);
		
	}
}


var indexPos = 1;
var indexPosVar = 0;
var xpos = null;
var widths = null;
var scrollWidth =0;
		
// scrollable image via javascript
var scrollable = {
	
	initialize : function(xpospar,widthpar) {
		if ($("scrollerwrap")) {
			scrollWidth = $('product_content_items').getWidth();			
			xpos = xpospar;
			widths = widthpar;
			
			var slider = new Control.Slider('handler', 'track', {
				axis: 'horizontal',
				//onSlide: function(v) { updateCounter(v, $('product_content'), slider,false);  },
				onChange: function(v) { scrollHorizontal(v, $('product_content'), slider,true); }
			});
			
			var curx = 0;
			var dist = 0;
			var slidepos = 0;
			var click = false;
			function scrollHorizontal(value, element, slider, animate) {
				curx = Math.round(value * ($('product_content_items').getWidth()-widths[widths.length-1]- 200));
				new Effect.Move('product_content_items', { x: (-1*curx), mode : "absolute"});
				if (click == false) {
					if (value == 1) {
						indexPos = xpos.length-1;
					} else {
						for(var id = 0;id<xpos.length;id++){
							if (value  + 300/scrollWidth < xpos[id] ) { 
								indexPos = id;
								break;
							}
							
						}
					}
				} 
				slidepos = value;
				$("counter_item").innerHTML  = indexPos;	
			}
			
			function updateCounter(value, element, slider, animate)  {
				curx = Math.round(value * ($('product_content_items').getWidth()-widths[widths.length-1]- 200));
				if (click == false) {
					for(var id = 0;id<xpos.length;id++){
						if (value  + 300/scrollWidth < xpos[id] ) { 
							indexPosVal = id;
							break;
						}
						
					}
				} 
				$("counter_item").innerHTML  = indexPosVal;	
			}
			
			
			$("scroll_right").observe("click", function(e) {
				if (indexPos == xpos.length-1) return;
				indexPos++;
				//console.log("right : "+indexPos);
				var next = xpos[indexPos-1] - 200/scrollWidth;
				click= true;
				slider.setValue(next);
				click = false;
			});
			$("scroll_left").observe("click", function(e) {
				if (indexPos == 1) return;
				indexPos--;
				var next = xpos[indexPos-1] - 200/scrollWidth;
				click= true;
				slider.setValue(next);
				click = false;
			});
			
		}
	}
	
}

function loadProductImages(page_id) {
	ajaxUpdate("product_thumb","site/producten.php","load=true&page_id="+page_id,
		function(req) {}
	); 
}

function ajaxUpdate(divout,handler,params,successFunc) {
	new Ajax.Updater(
		divout,
		'ajax.php',
		{
			method : 'post',
			parameters : 'page='+handler+"&"+params,
			requestHeaders: ['Expires', 'Thu, 17 May 2001 10:17:17 GMT', 'Cache-Control', 'no-cache, must-revalidate', 'Pragma', 'no-cache'],
			evalScripts: true,
			onComplete : successFunc
		}
	);
}