var wprod_array = 0;
var wprod_area  = 0;

$(document).ready(function(){
	onWindowResized();
	imageSlider();
	wprod_array = calcProductSliderWidth();
		wprod_area  = $("#area_product_navigation").width();
	$(window).wresize( function(){    
		onWindowResized();
	});
	$(document).pngFix();
	
});
function afterFooterLoaded() {
	onWindowResized();
	showSelectedProducts(product_id)
}

function onWindowResized()
{
	setViewPort();
	reposFooter();
	reposPage(product_id);
	reposPageContents(product_id);
}

function calcProductSliderWidth()
{
	//todo: need a better solution: on image loaded, rescale the slider
	var psWidth = 421; 
	
	//$('#area_product_slider .prod_icon a.page-link img').each(function(){
	//	var imgWidth = $(this).width();
	//	psWidth +=  imgWidth + 3;
		
	//	$(this).parents('.prod_icon').css('width', imgWidth);
	//});
	
	$('#area_product_slider').css('width',psWidth);
	return psWidth;
}

function imageSlider()
{
	$('#product_slider').slider({
		
		slide: function(event, ui) 
		{ 
			var leftpct = ui.value;
			var leftpx  = leftpct * (wprod_array - wprod_area) / 100;
			$("#area_product_slider").css('left',-leftpx);
		}
	});
}

function reposPage(id)
{
	if (s_subpage == 'algemeen')
	{
		reposAlgemeenPage(id);
	} else {
		reposServeerritueelPage(id);
	}
}

function reposPageContents(id)
{
	// vars 
	// image size, based on actual file size
	var imgX = 1912;
	var imgY = 971;
	var footerHeight  = $('#area_footer').height();
	
	// repos background
	var bHeight = vpHeight - footerHeight;
	var imgWidth = bHeight/imgY * imgX;
	var aTop = vpHeight - footerHeight - 80;
	
	if(imgWidth > vpWidth) 
	{
		$('#algemeen_container').css('width', vpWidth);
		//$('html').css('overflow-x' ,'hidden'); 
	}
	
	// set product page left
	var left = vpWidth/2 - imgWidth/2; 
	var pLeft = ( left < 0 ) ? left : 0;
	
	if(imgWidth > vpWidth) 
	{
		$('#algemeen_container').css('width', vpWidth + Math.abs(pLeft));
		//$('html').css('overflow-x' ,'hidden'); 
	}
	
	$('#algemeen_container').css('left', pLeft);
	
	// set filler
	var fillerWidth = (left < 0) ? 0 : left;
	
	
	// resize left-right filler
	$('#algemeen_container .resizeable-left img').css('height', bHeight);
	$('#algemeen_container .resizeable-left img').css('width', fillerWidth);
	
	$('#algemeen_container .resizeable-right img').css('height', bHeight);
	$('#algemeen_container .resizeable-right img').css('width', fillerWidth);
	
	// resize filler
	$('#algemeen_container .resizeable-filler img').css('height', bHeight);
	$('#algemeen_container .resizeable-filler img').css('width', vpWidth);

	
	// resize image
	$('#algemeen_container .resizeable-image img').css('height', bHeight);
	
	/*
	// repos prod navigation
	var nTop = vpHeight - 280;
	var nLeft = 50;
	$('#mixtip_products').css('top', nTop);
	$('#mixtip_products').css('left', nLeft);
	
	// repos infobox
	var iLeft = '65%';//vpWidth * 15/21 - 30;
	var iTop  = vpHeight/5 - 20;
	$('#product-'+id+ ' .product-info-box').css('left', iLeft);
	$('#product-'+id+ ' .product-info-box').css('top', iTop);
	*/
	
	// repos payoff
	var pTop = vpHeight/5 - 25;
	var pLeft = vpWidth/6 - 100;
	$('#text-payoff').css('top', pTop);
	$('#text-payoff').css('left', pLeft);
	
	// repos navigation arrows
	if (num_product_items > 1){
		var arrows = '#area_arrows';
		$(arrows).css('display','block');
		var aLeft= vpWidth/2 - $(arrows).width()/2;
		$(arrows).css('top',aTop);
		$(arrows).css('left',aLeft);
	}
	
	// repos product array
	var paTop = aTop - 80 - (aTop * 0.20);
	$("#area_product_navigation").css('top',paTop);
	
	// repos slider
	var slider = $('#area_slider');
	var sTop = aTop + 50 - (aTop * 0.20);
	slider.css('top', sTop);
	
	// repos slider wrapper
	var sliderWrapper = $('#area_slider_wrapper');
	var sTop = aTop + 30 - (aTop * 0.20);
	sliderWrapper.css('top', sTop);
}


function reposAlgemeenPage(id)
{	
	// vars
	var bgHeight = 316;
	var prodNavHeight = $('#area_product').height();
	var footerHeight  = $('#area_footer').height();
	var footerTop  = vpHeight - footerHeight;
	
	// repos product info
	var pinfo = '.product-info-box';
	
	var bWidth = $(pinfo).width();
	var iTop  = '30%';
	/*
	var iLeft = wWidth * 0.85;
	*/
	
	$(pinfo).css('z-index',10);
	$(pinfo).css('top', iTop);
	$(pinfo).css('left', 'auto');	
	$(pinfo).css('right', wWidth * 0.05 - 30 + 'px');
}

function reposServeerritueelPage(id)
{
	// vars
	var bgHeight = 316;
	var prodNavHeight = $('#area_product').height();
	var footerHeight  = $('#area_footer').height();
	var footerTop  = vpHeight - footerHeight;
		
	// resize empty background
	var minHeight = bgHeight + prodNavHeight + footerHeight;	
	var emptyBgHeight = vpHeight - (bgHeight + prodNavHeight + footerHeight);
	$('#area_background_empty').css('height',emptyBgHeight);
	
	
	// repos area product image
	var imgWidth = 360;
	var imgHeight = 429;
	$('#product-' + id).css('display','block');
	
	var pLeft = (vpWidth - imgWidth)/2 - 10;
	var pTop  = footerTop - imgHeight + 20;
	$('#product-' + id + ' .product-image').css('left',pLeft);
	$('#product-' + id + ' .product-image').css('top',pTop);
	
	// repos product info
	var pinfo = '#product-' + id + ' .product-info-box';
	var iTop = footerTop - 400;
	var iLeft = pLeft + imgWidth + 20;
	
	$(pinfo).css('top', iTop);
	$(pinfo).css('left', iLeft);

	
	// repos payoff
	var pTop = vpHeight/5;
	var pLeft = vpWidth/6 - 90;
	$('#text-payoff').css('top', pTop);
	$('#text-payoff').css('left', pLeft);
	
	// repos navigation arrows
	var arrows = '#area_arrows';
	$(arrows).css('display','block');
	var aTop = vpHeight - footerHeight - 80;
	var aLeft= vpWidth/2 - $(arrows).width()/2;
	$(arrows).css('top',aTop);
	$(arrows).css('left',aLeft);
}


function productOn(elm)
{
	var icon = $(elm).attr('rel');
	$(elm).attr('src',icon + '-on.png');
}

function productOff(elm)
{
	var icon = $(elm).attr('rel');
	$(elm).attr('src',icon + '-off.png');
}


function productsPrev()
{
	product_item_start = (product_item_start > 0)? product_item_start - 1 : 0;
	showProductItems(product_item_start);
	if (product_item_start == 0){
		$('.prod_nav_prev_icon').css('display','none');
	} else {
		$('.prod_nav_prev_icon').css('display','');
	}
	$('.prod_nav_next_icon').css('display','');
}

function productsNext()
{
	var minVisibleProducts = 2;
	product_item_start = product_item_start + 1;
	if (num_product_items - product_item_start > minVisibleProducts)
	{
		$('.prod_nav_next_icon').css('display','');
	} else {
		$('.prod_nav_next_icon').css('display','none');
	}
	$('.prod_nav_prev_icon').css('display','');
	showProductItems(product_item_start);
}

function showProductItems(product_item_start)
{
	$('.prod_icon').each(function(){
		for (var i=0; i < num_product_items; i++)
		{
			if (i >= product_item_start && i < (product_item_start + num_visible_products))
			{
				$('#prod_icon-'+i).css('display','inline');
			} else {
				$('#prod_icon-'+i).css('display','none');
			}
		}
	});
}


function gotoProductIndex(offset)
{
	var target = current_product_index + offset;
	target = (target < 0) ? product_tastes.length - 1 : target;
	target = (target > product_tastes.length - 1) ? 0 : target;
	
	current_product_index = target;
	
	var target_taste = product_tastes[target];
	var elm = $('img.taste-' + target_taste);
	gotoProduct(elm);
}

function gotoProduct(elm)
{
	var id = $(elm).attr('id').replace(/product-id-/,'');
	var old_prod = 'product-'+product_id;
	var new_prod = 'product-'+id;
	
	var w  = $(window).width();
	var pw = $('#'+old_prod).width();
	var pleft = w/2 - pw/2;
	
	var min_left = $('#body_container').width()/2 - pw/2;
	pleft = (pleft < min_left) ? min_left : pleft;
	

	// hide arrows
	$('.icon-arrow').each(function(){
		$(this).css('display','none');
	});

	// hide old product	
	$('#'+old_prod).css('display','none');
	
	// repos and show new product
	reposPage(id);
	
	// arrow
	showSelectedProducts(id);

	product_id = id;

}

function showSelectedProducts(id)
{
	if ($('img#product-id-'+id).attr('class') == undefined) return;
	
	var taste = $('img#product-id-'+id).attr('class').replace(/taste-/,'');
	
	$('.icon-'+taste).each(function(){
		$(this).css('display','block');
	});
}

function showTab(elm, name)
{
	var id = 'verhaal_container';
	
	// reset
	var tabs = ['moment','campagne','merk'];
	for (var i=0; i<3 ; i++)
	{
		$('#'+id+' .tab-' + tabs[i]).css('display','none');
		var img = $('#'+id+' .t-' + tabs[i] + ' img').attr('src').replace(/_over/,'_out');
		$('#'+id+' .t-' + tabs[i] + ' img').attr('src', img);
	}
	
	//alert($(elm).attr('src'));
	
	// show
	$('#'+id+' .tab-' + name).css('display','');
	var src =  $('#'+id+' .t-' + name + ' img').attr('src').replace(/_out/,'_over');

	$('#'+id+' .t-' + name + ' img').attr('src',src);
	
}