// the popup titles
var titles = new Array('Over ons','Impressie','Login','Distoptiek (verzending)','Startpakket','Prijzen');

var status = 0;
var loaded = 0;
var lastwindow = '';
var currentid = -1;
var i = 0;

var popupleft;
var popuptop;

function preloader(id)
{
	$("#popupmenu").html('');
	$("#popupcontent").html('<div id="loader"><img src="_images/loader.gif" /></div>');
	
	// Set the title via js (because IE browers older than IE8 don't know what content: means in CSS)
	$("#popuptitle").text(titles[id-1]);
	
	// load the needed data
	if (lastwindow != '')
		$("#popup").removeClass(lastwindow);
	
	$("#popup").addClass("page"+id);
	
	$("#popupmenu").load("_includes/pages/"+id+"/menu.html"); // The menu (Doh xP)
	$("#popupcontent").load("_includes/pages/"+id+"/default.html"); // The default content page which is loaded
	
	// set a couple of variables
	lastwindow = "page"+id;
	currentid = id;
	
	loadPopup();
}

function loadPopup()
{
	// center the layer
	var windowwidth = document.documentElement.clientWidth;
	var windowheight = document.documentElement.clientHeight;
	
	popupleft = windowwidth/2;
	popuptop = windowheight/2;
	
	$("#popup").css(
	{
		"position": "absolute",
		"top": popuptop,
		"left": popupleft,
		"width": 0,
		"height": 0
	});
	
	$("#darkener").css(
	{
		"height": windowheight
	});
	
	// load the stuff on screen
	$("#darkener").css({ "opacity": "0.7" });
	$("#darkener").fadeIn("fast");
	
	// the animation
	$("#popup").animate({ left:popupleft-389, width:773 }, "medium", "linear")
					.animate({ top:popuptop-200, height:400 },  "medium",  "linear" );
	
	status = 1;
}

function changewindow(newid)
{
	// Just immediately hide it.. otherwise it can become a bit ugly =(
	$("#popup").css({'display': 'none'});
	
	status = 0;
	currentid = -1;
	
	// load the new one
	preloader(newid);
}

function disablePopup()
{
	if(status == 1)
	{
		$("#darkener").fadeOut("fast");
		$("#popup").fadeOut("fast");
		
		status = 0;
		currentid = -1;
	}
}

// ====================================
// This function is called when the page is loaded
//
$().ready(function()
{
	// add events to the buttons
	$("#b1").click(function(){ preloader(1); });
	$("#b2").click(function(){ preloader(2); });
	$("#b3").click(function(){ window.open('https://www.glascrew.nl/subpagina/klanten.aspx','login'); });
	$("#b4").click(function(){ preloader(4); });
	$("#b5").click(function(){ preloader(5); });
	$("#b6").click(function(){ window.open('http://www.glascrew.nl/voorwaarden.pdf'); });
	
	// font effect
	$("#b1, #b2, #b3, #b4, #b5, #b6").hover(
	function () { $(this).stop().animate({ fontSize:'20pt', opacity:'0.8'}, 250 ); }, 
	function () { $(this).stop().animate({ fontSize:'17pt', opacity:'1'}, 250 ); });
	
	// popuplayer effects
	$("#popupclose").click(function()
	{
		disablePopup();
	});
	
	$("#popupclose").hover(
	function () { $(this).css({ border:'1px solid #6fa5fd', cursor:'pointer'}); }, 
	function () { $(this).css({ border:'none', cursor:'none'}); });
	
	$("#darkener").click(function()
	{
		disablePopup();
	});
	
	$().keypress(function(e) // 26 = ESC button on the keyboard..
	{
		if(e.keyCode == 27 && status == 1)
		{
			disablePopup();
		}
	});
	
	// ====================================
	// The slideshow part
	// Some vars for the slideshow
	var numimages = slideimages.length;
	var nextimage = 0;
	
	// add all the images (in divs)
	var slide1html = '<div id="sid0" class="firstslide" style="background: url(_images/slideshow/'+slideimages[i]+'.gif) no-repeat 50% 50%"></div>';
	var slide2html = '<div id="sid0-2" class="firstslide" style="background: url(_images/slideshow/'+slideimages[i]+'-2.gif) no-repeat 50% 50%"></div>';
	
	for (i = 1; i < numimages; i++)
	{
		slide1html += '<div id="sid'+i+'" class="slide" style="background: url(_images/slideshow/'+slideimages[i]+'.gif) no-repeat 50% 50%"></div>';
		slide2html += '<div id="sid'+i+'-2" class="slide" style="background: url(_images/slideshow/'+slideimages[i]+'-2.gif) no-repeat 50% 50%"></div>';
	}
	
	$("#slideleft").html(slide1html);
	$("#slideright").html(slide2html);
	
	$('#slideleft').everyTime(5000,function()
	{
		// inject image in the hidden div so it can be shown in the upcoming cycle
		if (nextimage+1 == numimages)
		{
			lastimage = nextimage;
			nextimage = 0;
		}
		else
		{
			lastimage = nextimage;
			++nextimage;
		}
		
		$('#sid'+lastimage).fadeOut('slow');
		$('#sid'+lastimage+'-2').fadeOut('slow');
		
		$('#sid'+nextimage).fadeIn('slow');
		$('#sid'+nextimage+'-2').fadeIn('slow');
	});
	
});


// ====================================
// Layer Javascripting
// These are called from within the layer
// 
var lasttimer = '';

// Load file with alle the content
function showcontent(file)
{
	// show loader
	$("#popupcontent").html('<div id="loader"><img src="_images/loader.gif" /></div>');
	
	// get the content
	$('#popupcontent').load('_includes/pages/'+currentid+'/'+file+'.html');
}

// load a specific page of the loaded file.
function showpage(page)
{
	$('#page'+currentpage).css({'display':'none'});
	$('#page'+page).css({'display':'block'});
	
	currentpage = page;
	
	refreshnavigation();
}

// vars for the content navigation
var navigationhtml = '';

function refreshnavigation()
{
	navigationhtml = '';
	
	if (pages == 1)
		$('#pagination').css({'display':'none'});
	else
	{
		if (currentpage == 1)
			navigationhtml += '<li class="previous-off">&laquo; Vorige</li>';
		else
		{
			previouspage = currentpage - 1;
			navigationhtml += '<li class="previous"><a href="javascript:showpage('+previouspage+');">&laquo; Vorige</a></li>';
		}
		
		for (i = 1; i <= pages; ++i)
		{
			if (i == currentpage)
				navigationhtml += '<li class="active">'+i+'</li>';
			else
				navigationhtml += '<li><a href="javascript:showpage('+i+');">'+i+'</a></li>';
		}
		
		if (currentpage == pages)
			navigationhtml += '<li class="next-off">Volgende &raquo;</li>';
		else
		{
			nextpage = currentpage + 1;
			navigationhtml += '<li class="next"><a href="javascript:showpage('+nextpage+');">Volgende &raquo;</a></li>';
		}
	}
	
	$('#pagination').html(navigationhtml);
}

// slideshow for the layers
var werkplaatsslide = 0;
var teamslide = 0;

function loadlayerslideshow(slideshowid, slideimages, seconds)
{
	var numlimages = slideimages;
	var nextlimage = 0;
	var lastlimage = numlimages;
	var rand = Math.floor(Math.random()*11);
	
	if (slideshowid == 'team')
		nextlimage = $('#current').val();
	
	$('#'+slideshowid+'_T').everyTime(seconds, function()
	{
		if (parseInt(nextlimage)+1 >= numlimages)
		{
			lastlimage = nextlimage;
			nextlimage = 0;
		}
		else
		{
			lastlimage = nextlimage;
			++nextlimage;
		}
		
		$('#loader').fadeOut('medium');
		$('#'+slideshowid+'sid'+lastlimage).fadeOut('medium');
		$('#'+slideshowid+'sid'+nextlimage).fadeIn('medium');
		
		// for the team slideshow ; put the current image number in a hidden element :)
		if (slideshowid == 'team')
			$('#current').val(nextlimage);
	});
	
	if (slideshowid == 'werkplaats')
		werkplaatsslide = 1;
	else if (slideshowid == 'team')
		teamslide = 1;
}