// JavaScript Document

function toggle_large (link_plaatje) 
{
	document.getElementById('hoofd_illustratie').src=link_plaatje.firstChild.src;
}
function getWidthAndHeight() {
    var uitwijking = ( (560 - this.width ) / 2 ) - 26;
	var uitwijking_span = ( (560 - this.width ) / 2 ) + 5;
	//alert( this.width );
	var width = this.width;
	if( width > 510 )
	{
		uitwijking = 510 - width;
		uitwijking_span = uitwijking + 30;
	}
	
    
	sluiten_plaatje.style.right = uitwijking+'px';
	sluiten_span.style.right = uitwijking_span+'px';
	
	var hoogte = this.height + 26;
	var hoogte_span = this.height + 30;
	sluiten_plaatje.style.top = hoogte+'px';
	sluiten_span.style.top = hoogte_span+'px';
    return true;
}
function loadFailure() {
    alert("'" + this.name + "' failed to load.");
    return true;
}
var sluiten_plaatje;
var sluiten_span;
function show_large ( link_plaatje )
{
	url_plaatje = link_plaatje.src;
	var iets =	url_plaatje.match ( /.*\/(.*\.jpg)/ );
	
	// 2 divs nodig om plaatje te centreren
	var plaatje_div = document.createElement( 'div' );
	plaatje_div.setAttribute ( 'id', 'plaatje_vergroting' );
	var plaatje2_div = document.createElement( 'div' );
	plaatje2_div.setAttribute ( 'id', 'plaatje_vergroting2' );
	plaatje_div.appendChild ( plaatje2_div );
	var plaatje3_div = document.createElement( 'div' );
	plaatje3_div.setAttribute ( 'id', 'plaatje_vergroting3' );
	
	// link creëren om popup af te sluiten
	var plaatje_link = document.createElement ( 'a' );
	plaatje_link.setAttribute ( 'href', 'javascript:popup_sluiten();');
	
	if ( !sluiten_plaatje )
	{
		sluiten_plaatje = document.createElement ( 'img' );
		sluiten_plaatje.setAttribute ( 'src', '/images/close.gif' );
		sluiten_plaatje.setAttribute ( 'class', 'sluiten_plaatje' );
		sluiten_plaatje.setAttribute ( 'className', 'sluiten_plaatje' );
		sluiten_plaatje.setAttribute ( 'id', 'sluiten_plaatje' );
		sluiten_plaatje.setAttribute ( 'style', 'padding:0px;' );
		sluiten_plaatje.onclick = popup_sluiten;
		
		sluiten_span = document.createElement ( 'span' );
		sluiten_span.setAttribute ( 'class', 'sluiten_span' );
		sluiten_span.setAttribute ( 'className', 'sluiten_span' );
		sluiten_span.setAttribute ( 'id', 'sluiten_span' );
		sluiten_span.setAttribute ( 'style', 'right:60px;' );
		sluiten_span.innerHTML = 'Sluiten';
	}
	
	var groot_plaatje = new Image();
	groot_plaatje.onload = getWidthAndHeight;
	groot_plaatje.onerror = loadFailure;
	groot_plaatje.src = '/productinfo/' + iets[ 1 ];
	
	// plaatje toepassen op link en link toepassen op div
	plaatje_link.appendChild ( groot_plaatje );
	plaatje3_div.appendChild ( plaatje_link );
	plaatje3_div.appendChild ( sluiten_plaatje );
	plaatje3_div.appendChild ( sluiten_span );
	plaatje2_div.appendChild ( plaatje3_div  );
	
	// div creëren om site weg te blurren en inactief te maken
	var blur_div = document.createElement( 'div' );
	blur_div.setAttribute ( 'id', 'blur_div' );
	document.body.appendChild ( blur_div );
	
	// div toepassen op site
	document.body.appendChild ( plaatje_div );
	
}
function test()
{
	alert( 'test' );
}
function popup_sluiten ()
{
	document.body.removeChild ( document.getElementById ( 'plaatje_vergroting' ) );
	document.body.removeChild ( document.getElementById ( 'blur_div' ) );
}
var zoom_icon_laten_zien = false;
var icon_in_beeld;

function show_zoom( plaatje )
{
	
	var illustraties = document.getElementById ( 'illustraties' );
	if( zoom_icon_laten_zien && !icon_in_beeld )
	{
		var vergroot_div = document.createElement( 'div' );
		vergroot_div.setAttribute ( 'id', 'vergroting' );
		
		var vergroot_glas = document.createElement( 'img' );
		vergroot_glas.setAttribute ( 'src', '/images/icon_zoom.gif' );
		
		vergroot_glas.onmouseover = function() {
			plaatje = document.getElementById ( 'hoofd_illustratie' );
			set_icon( plaatje );
		};
		vergroot_glas.onmouseout = function() {
			plaatje = document.getElementById ( 'hoofd_illustratie' );
			hide_icon( plaatje );
		};
		vergroot_glas.onclick = function ( ) {
			plaatje = document.getElementById ( 'hoofd_illustratie' );
			show_large( plaatje );
		};
		vergroot_glas.style.cursor = 'pointer';
		
		vergroot_div.appendChild( vergroot_glas );

		illustraties.appendChild( vergroot_div );
		
		icon_in_beeld = true;
	}
	if ( !zoom_icon_laten_zien && icon_in_beeld )
	{
		illustraties.removeChild ( document.getElementById ( 'vergroting' ) );
		icon_in_beeld = false;
	}
	
}
function set_icon( plaatje )
{
	//alert ( 'show icon' );
	zoom_icon_laten_zien = true;
	var t = setTimeout ( function () {
	show_zoom(plaatje);
	}
	, 500 );

}
function hide_icon( plaatje )
{
	//alert ( 'hide icon' );
	zoom_icon_laten_zien = false;
	var t = setTimeout ( function () {
	show_zoom(plaatje);
	}
	, 500 );
}