var activeImage = 1;
var totalImages = 1;
var isbusy = false;
var zindex = 2;
var oldimage;

function showImage(nr)
{
	var foto = $('df'+nr);
	if (!isbusy && zindex != foto.style.zIndex)
	{
		isbusy = true;
		
		var effect = new Effect.Opacity(oldimage, {
			delay: 0,
			duration: 0.2,
			transition: Effect.Transitions.linear,
			from: 1,
			to: 0,
			afterFinish: function()
			{
				var effect2 = new Effect.Opacity(foto, {
					delay: 0,
					duration: 0.5,
					transition: Effect.Transitions.linear,
					from: 0,
					to: 1,
					beforeStart: function()
					{
						foto.removeClassName('hidden');
						foto.setOpacity(0);
						zindex += 1;
						foto.style.zIndex = zindex;
					},
					afterFinish: function()
					{
						isbusy = false;
					}
				});
			}
		});
		
	}
}

function next()
{
	if (totalImages == 1)
		totalImages = $('dynamic').select('.dynamic').length;

	if (activeImage < totalImages && !isbusy)
	{
		oldimage = $('df'+ activeImage);
		activeImage += 1;
		showImage(activeImage)
	}
}

function previous()
{
	if (activeImage > 1 && !isbusy)
	{
		oldimage = $('df'+ activeImage);
		activeImage -= 1;
		showImage(activeImage)
	}
}

//dynamic foto
var maxdf = 0
var activedf = 0;
var arrdf;
var df;
var delay;

function loopdf()
{
	if (maxdf == 0)
	{
		arrdf = $('dynamic').select('.dynamic');
		maxdf = arrdf.length;
		if (maxdf > 1)
		{
			delay = arrdf[maxdf-1].select('.interval')[0].innerHTML;
			showdf();
		}
	}
}

function showdf()
{
	if (activedf < maxdf)
	{
		df = arrdf[activedf];
		var effect = new Effect.Opacity(df, {
			delay: delay,
			duration: 2.0,
			transition: Effect.Transitions.linear,
			from: 0,
			to: 1,
			beforeStart: function()
			{
				df.setOpacity(0);
				df.style.zIndex = df.style.zIndex*1+1;
			},
			afterFinish: function()
			{
				delay = arrdf[activedf].select('.interval')[0].innerHTML;
				activedf += 1;
				if (activedf >= maxdf)
					activedf = 0;
				showdf();
			}
		});
	}
}

var fadenr = -1;
var zindex = 3;
// mouseover
function fadeOver(nr, obj)
{
	if (fadenr != nr)
	{
		// effect is al eens gebruikt
		if (typeof(effecten[nr]) == 'object')
			effecten[nr].cancel();
		
		// opacity bekijken
		if(obj.getStyle('opacity') == 1)
			obj.setOpacity(0);
			
		//effect (weer) activeren
		effecten[nr] = new Effect.Appear(obj, {duration:1, from:0, to:1});
		
		//het vorige appeareffect ophalen en laten faden (indien aanwezig)
		if (fadenr >= 0)
		{
			// dit moet eigenlijk nu altijd wel
			if (typeof(effecten[fadenr]) == 'object')
			{
				effecten[fadenr].cancel();
				effecten[fadenr] = new Effect.Fade(effecten[fadenr].element, {duration:0.5, from:(effecten[fadenr].element.getStyle('opacity')), to:0});
			}
		}
		fadenr = nr;
	}
}

//De kleuren...
function showProduct(nr,btn,obj)
{
	if (!btn.hasClassName('btnSelect'))
	{
		// omlijn de kleurknop
		obj.up(0).select('div.color').each(function(s)
		{
			if (s.hasClassName('btnSelect'))
			{
				s.removeClassName('btnSelect');
				oldObj = $('productImage'+s.id.replace('clr',''));
			}
		});
		btn.addClassName('btnSelect');
		
		obj.setStyle(
		{
			'zIndex': zindex,
			'display': 'none'
		});
		
		zindex += 1;
		
		
		new Effect.Parallel([
			new Effect.Appear(obj,
			{
				duration:1,
				from:0,
				to:1
			}),
			new Effect.Appear(oldObj,
			{
				duration:1,
				from:1,
				to:0
			})
		]);
		
		// productInfo
		fadeOver(nr, obj.down(1));
	}
}

var activebig = 0
var bigbusy = false;
function showBig(nr)
{
	if (nr != activebig && bigbusy == false)
	{
		bigbusy = true;
		new Effect.Parallel([
			new Effect.Appear($('big'+nr),
			{
				duration:1,
				from:0,
				to:1
			}),
			new Effect.Appear($('big'+activebig),
			{
				duration:1,
				from:1,
				to:0,
				afterFinish: function()
				{
					activebig = nr;
					bigbusy = false;
				}
			})
		]);
	}
}

function createSlider()
{
	new Control.Slider('handles','track', [options]);
}
	
	function colorFade(target,element,start,end,steps,speed) {
	  var startrgb,endrgb,er,eg,eb,step,rint,gint,bint,step;
	  steps = steps || 20;
	  speed = speed || 20;
	  clearInterval(target.timer);
	  
	  if (end[0] == '#')
	  {
		end = end.replace('#','');
		endrgb = colorConv(end);
	  }
	  else
		endrgb = end;
		
	  er = endrgb[0];
	  eg = endrgb[1];
	  eb = endrgb[2];
	  if(!target.r) {
		if (start[0] == '#')
		{
			start = start.replace('#','');
			startrgb = colorConv(start);
		}
		else
			startrgb = start;

		r = startrgb[0];
		g = startrgb[1];
		b = startrgb[2];
		target.r = r;
		target.g = g;
		target.b = b;
	  }
	  rint = Math.round(Math.abs(target.r-er)/steps);
	  gint = Math.round(Math.abs(target.g-eg)/steps);
	  bint = Math.round(Math.abs(target.b-eb)/steps);
	  if(rint == 0) { rint = 1 }
	  if(gint == 0) { gint = 1 }
	  if(bint == 0) { bint = 1 }
	  target.step = 1;
	  target.timer = setInterval( function() { animateColor(target,element,steps,er,eg,eb,rint,gint,bint) }, speed);
	}

	function isArray(obj){return(typeof(obj.length)=="undefined")?false:true;}

	// incrementally close the gap between the two colors //
	function animateColor(target,element,steps,er,eg,eb,rint,gint,bint) {
	  var color;
	  if(target.step <= steps) {
		var r = target.r;
		var g = target.g;
		var b = target.b;
		if(r >= er) {
		  r = r - rint;
		} else {
		  r = parseInt(r) + parseInt(rint);
		}
		if(g >= eg) {
		  g = g - gint;
		} else {
		  g = parseInt(g) + parseInt(gint);
		}
		if(b >= eb) {
		  b = b - bint;
		} else {
		  b = parseInt(b) + parseInt(bint);
		}
		color = 'rgb(' + r + ',' + g + ',' + b + ')';
		if(element == 'background') {
		  target.style.backgroundColor = color;
		} else if(element == 'border') {
		  target.style.borderColor = color;
		} else {
		  target.style.color = color;
		}
		target.r = r;
		target.g = g;
		target.b = b;
		target.step = target.step + 1;
	  } else {
		clearInterval(target.timer);
		color = 'rgb(' + er + ',' + eg + ',' + eb + ')';
		if(element == 'background') {
		  target.style.backgroundColor = color;
		} else if(element == 'border') {
		  target.style.borderColor = color;
		} else {
		  target.style.color = color;
		}
	  }
	}

	// convert the color to rgb from hex //
	function colorConv(color) {
	  var rgb = [parseInt(color.substring(0,2),16), 
		parseInt(color.substring(2,4),16), 
		parseInt(color.substring(4,6),16)];
	  return rgb;
	}

// begin ---- knopeffect
	function slowhigh(which2, base)
	{
		imgobj = which2
		instantset(base)
		highlighting = setInterval("gradualfade(imgobj)", 30)
	}

	function slowlow(which2, base)
	{
		cleartimer()
		instantset(base)
	}

	function instantset(degree)
	{
			imgobj.style.MozOpacity = degree / 100
	}

	function cleartimer()
	{
		if (window.highlighting) clearInterval(highlighting)
	}

	function gradualfade(cur2)
	{
		if (cur2.style.MozOpacity < 1)
			cur2.style.MozOpacity = Math.min(parseFloat(cur2.style.MozOpacity) + 0.1, 0.99)
	}
// eind ---- knopeffect


	function fadecolor(li, dir)
	{
		var color1 = $('color1').getStyle('color');
		//voor ie
		if (color1[0] != '#')
		{
			color1 = color1.replace('rgb(','');
			color1 = color1.replace(')','');
			color1 = color1.replace(' ','');
			color1 = color1.split(',');
		}
		var color2 = $('color2').getStyle('color');
		//voor ie
		if (color2[0] != '#')
		{
			color2 = color2.replace('rgb(','');
			color2 = color2.replace(')','');
			color2 = color2.replace(' ','');
			color2 = color2.split(',');
		}

		if (dir == 'over')
			colorFade(li,'color',color1,color2,5,15)
		else
			colorFade(li,'color',color2,color1,15,40)
	}
	
	var sliderbusy = false;
	
	function startslide()
	{
		sliderbusy = true;
		document.onmousedown = function() { return false; };
		document.onselectstart = function () { return false; };
	}
	
	function stopslide()
	{
		sliderbusy = false;
		document.onmousedown = null;
		document.onselectstart = null;
	}
	
	function scrollWrapper(slider, el, event)
	{
		if (sliderbusy)
		{
			var mouseY = event.clientY-$('storewrapper').viewportOffset()[1]-10;
			
			var sliderheight = slider.getHeight();//22
			var height = $('storewrapper').getHeight();//142
			var heightWrapper = el.getHeight();
			
			
			if (mouseY < 0)
				mouseY = 0
			
			if (mouseY > height-sliderheight)
				mouseY = height-sliderheight;
				
			slider.style.top = mouseY + 'px';
			
			var scrollHeight = heightWrapper - height;
			//geen scrollbar nodig
			if (scrollHeight < 0)
				sliderbusy = false;
				
			var top = (mouseY*scrollHeight)/(height-sliderheight) *-1;
			el.style.top = top +'px';
		}
	}