// instellingen
var dock = {
	dockscrollbreedte: 600,
	beginvertraging: 0.4,
	tussenruimte: 10,
	totaal: 0,
	currentpage: 0,
	currentdetail: false,
	use_tab: false
};

function dock_init(openit)
{
	// alleen doen als er producten zijn, en dus de dock bestaat
	if ($('productDock'))
	{

		// dockcontent de goede breedte geven
		$('dockContent').setStyle('width', dock.dockscrollbreedte);
		
		// starten. de links in het dock worden verdeeld in pagina's met de juiste breedte.
		var paginas = 0;
		var huidige = 0;
		
		// detail divs onzichtbaar maken
		$$('.productDetail').fade('hide').setStyle('display','block');
		
		var w;
		var a = $$('#dockContent a');
		var img;
		var plek;
		
		for (var i in a)
		{
			if ($type(a[i])=='element')
			{
				// de img in de a pakken
				img = a[i].getFirst('img');
				
				// breedte van element optellen bij huidige breedte. past het nog dan komt ie
				// er achteraan. zo niet dan naar nieuwe pagina springen.
				w = img.getStyle('width').toInt();
				
				if (huidige + w > dock.dockscrollbreedte)
				{
					huidige = 0;
					paginas++;
				}
				
				plek = dock.dockscrollbreedte*paginas + huidige + 'px';
				a[i].setStyle('left', plek);

				huidige = huidige + w + dock.tussenruimte + 0;
			}
		}
		// totaal aantal paginas opslaan
		dock.totaal = paginas+1;
	
		// linkerpijl eerst uit
		$$('#productDock #leftarrow').hide();
		// is er maar 1 pagina dan ook de rechter.
		if (dock.totaal==1) $$('#productDock #rightarrow').hide();
		
		// de dock een animatiehandle geven
		dock.handle = new Fx.Tween($('productDock'), {'property':'bottom'});
		dock.pager = new Fx.Tween($('dockInnerContent'), {'property':'left'});
		
		if (false)
		{
			if (openit)
			{
				// meteen laten zien
				dock_open();
			}
			else
			{
				// tenslotte bij einde inladen pagina het dock in beeld brengen na een bepaalde vertraging
				dock.timer = dock_show.create({delay:(dock.beginvertraging*1000)});
				dock.timer();	
			}
		}
	}
}

function dock_next()
{
	dock.currentpage++;
	dock.pager.start(dock.currentpage*dock.dockscrollbreedte*-1);
	if (dock.currentpage+1==dock.totaal) $$('#productDock #rightarrow').hide();
	$$('#productDock #leftarrow').show();	
}

function dock_previous()
{
	dock.currentpage--;
	dock.pager.start(dock.currentpage*dock.dockscrollbreedte*-1);
	if (dock.currentpage==0) $$('#productDock #leftarrow').hide();
	$$('#productDock #rightarrow').show();	
}

function dock_show()
{
	if (dock.use_tab)
		dock.handle.start(-75);
	else
		dock_open();
}

function dock_open()
{
	dock.handle.start(0);
	if (dock.user_tab)
	{
		$('closeDock').show();
		$('openDock').hide();
	}
}

function dock_close()
{
	dock.handle.start(-75);
	if (dock.use_tab)
	{
		$('openDock').show();
		$('closeDock').hide();
	}
}

function dock_open_detail(nummer)
{
	if (dock.currentdetail) dock_close_detail();
	dock.currentdetail = nummer;
	var detail = $('detail'+nummer+'');
	
	// zijn er meer thumbnails aanwezig? zo ja dan moeten we thumbnails in html bouwen (als ze er nog niet zijn!)
	if (typeof thumblist!='undefined')
	{
		var list = eval('thumblist.detail'+nummer+'');
		if (list && !list.done)
		{
			var thumbholder = $$('#detail'+nummer+' .thumbholder');
			thumbholder = thumbholder[0];
			
			var thumb;
			
			var leftcol = detail.getFirst('div');
						
			// er zijn thumbnails. thumbnail voor hoofdplaatje is er al en is actief. maak de andere.
			for (var i=0; i<list.length; i++)
			{
				// maak een thumb image
				thumb = new Element('img');
				thumb.addClass('imgno'+(i+1)+'');
				thumb.addClass('productFotoThumb');
				thumb.src = list[i].src;
				thumb.width = (list[i].width)/5;
				thumb.height = (list[i].height)/5;
				thumb.addEvent('click', function(event) { swapProductFoto(event.target); });
				
				// invoegen				
				thumb.inject(thumbholder);
				
				// voeg ook een hoofd plaatje in, met originele grootte, bovenin de left column
				
				thumb = new Element('img');
				thumb.addClass('imgno'+(i+1)+'');
				thumb.addClass('productFoto');
				thumb.setStyle('opacity', 0);
				thumb.src = list[i].src;
				thumb.width = (list[i].width);
				thumb.height = (list[i].height);
				// invoegen				
				thumb.inject(leftcol, 'top');
			}				

			list.done = true;
		}
	}
	// weergeven item
	detail.fade('in');
	
}

function swapProductFoto(x)
{
	// vind juiste class
	for (var i=0; i<4; i++)
	{
		if (x.hasClass('imgno'+i+'')) var theclass = 'imgno'+i+'';
	}
	
	// zoek juiste parent
	var detail = x.getParents('.productDetail');
	detail = detail[0].getProperty('id');

	// loop de plaatjes langs in de parent. als de class matcht: aanzetten, anders uit
	var pics = $$('#'+detail+' .productFoto');
	for(i=0; i<pics.length; i++)
	{
		if (pics[i].hasClass(theclass))
		{
			pics[i].fade('in');
		}
		else
		{
			pics[i].fade('out');
		}
	}
	
	// alle thumbs de active class uit en alleen deze weer aan
	$$('#'+detail+' .thumbholder img').removeClass('activeThumb');
	x.addClass('activeThumb');
	
}

function dock_close_detail()
{
	if (dock.currentdetail) $('detail'+dock.currentdetail+'').fade('out');
	dock.currentdetail = false;
}