$(document).ready(function () {
	var $shop_buttons = $("div.box_shop button");
	$product_container = $("#orders_text");
	$product_empty = $("#no_orders");

	$shop_buttons.click(function()
	{
		var product_id = parseInt(this.id.replace('product-',''));
		addOrder(product_id,parseInt($("#select-"+product_id).val()));
	});

	$('p span.delete', $product_container).live('click', function() {
		deleteOrder(parseInt(this.id.replace('del-','')));
	});

	$('p select.cart-editor', $product_container).live('change', function() {
		addOrder(parseInt(this.id.replace('selectorder-','')), this.value);
	});


// Open links in a new window				

	$('a[href^="http://"]').attr({ 
		target: "_blank"
  	});


	            
// Modalbox, thanks to wolfr

	var modalHTML = '<div class="modal" style="display: none;"><div class="mContent"><a href="#" class="buttonClose" title="Dit venster sluiten"><strong>Close</strong> (X)</a><img src="" alt="" /><p class="caption"></p></div></div><div id="modalOverlay" style="display: none\;">&nbsp\;</div>';
	$('body').append(modalHTML);

	// Preload all images
	$('a.showme').each(function() {
		var src = $(this).attr('href');
		$('body').append('<img class="imageShim" src="' + src + '" />');
	});

	// When clicking on an <a> with class lightbox
	$('a.showme').click(function(evt)
	{
		// Prevent default link behaviour
		evt.preventDefault();

		// Define contents of lightbox
		$('.modal img')
			.attr('src', $(this).attr('href'))
			.attr('alt', $(this).attr('alt'));

		// Caption = img alt tag
		$('.caption').html($(this).find('img').attr('alt'));

		// Load the image offscreen
		var imageSource = $(this).attr('href');
		$('body').append('<img id="imageShim" src="' + imageSource + '" />');

		var imageShim = $('#imageShim');
		var shimWidth = imageShim.width();
		var shimHeight = imageShim.height();
		// console.log('The width of the image is ' + shimWidth + ' and the height is ' + shimHeight);

		// initialize object references
		var oElement = $('.modal');
		var oWindow = $(window);

		// calculate offset
		var offsetLeft = parseInt((oWindow.width() - shimWidth) / 2);
		var offsetTop = parseInt((oWindow.height() - shimHeight) / 2);

		oElement.css('left', offsetLeft)
				.css('top', offsetTop)
				.css('width', shimWidth)
				.css('height', shimHeight)
				.css('position', 'fixed');

		// IE6 should use position: absolute; since fixed is not supported
		if($.browser.msie && $.browser.version =='6.0') {
			oElement.css('position', 'absolute')
			        .css('top', offsetTop + oWindow.scrollTop());
		}

		// open lightbox
		showBox();
	});

});

function showBox() {

	// IE6/7/8 does not correctly support opacity
	if (jQuery.browser.msie) {

		// show modal box: no animation for IE
		$('#modalOverlay, .modal').show();

		// IE bugfixes
		if($.browser.msie && $.browser.version =='6.0') {
			// Persistent overlay opacity for IE6
			// Make sure modalOverlay has full body height
			$('#modalOverlay').css("filter", "alpha(opacity=33)").css('height', $('body').height());
		}

	} else {
		// Simple fadeIn for the better browsers that support opacity well
		$('#modalOverlay, .modal').fadeIn("fast");
	}

	// Hide modal box when clicking outside it or on the close button
	$('#modalOverlay, .buttonClose').bind('click', function(evt) {
		// Prevent default link behaviour
		evt.preventDefault();
		//  Close modal box
		closeBox();
	});

	// Hide modal box when pressing escape button
	$('html').bind("keyup", function(evt) {
		if (evt.keyCode == 27 || evt.keyCode == 88) {
			closeBox();
		}
	});

}

function closeBox() {
	// Make sure the hide code has no effect on the modal box itself
	$('.modal').bind('click', function(evt) { evt.stopPropagation(); });

	// Clean up DOM: all shims should be removed
	$('#imageShim').remove();

	// Too much bugs with alpha/opacity, so IE6 gets a simple hide()
	if (jQuery.browser.msie) {
		$('#modalOverlay, .modal').hide();
	} else {
		// Hide modal and overlay
		$('#modalOverlay, .modal').fadeOut("fast");
	}

}


// Shop
var orders = [];
var $product_container = {};
var $product_empty = {};

function calcTotal()
{
	var count = orders.length;
	var total = 0;
	for(var i=0;i<count;i++)
	{
		total += (parseInt(orders[i].amount) * parseFloat(orders[i].price))
	}
	return total;
}

function getProductById(id)
{
	var count = products.length;
	for(var i=0;i<count;i++)
	{
		if(products[i].id === id)
		{
			return products[i];
			break;
		}
	}
	return {};
}

function addOrder(id, amount_product)
{
	// Delete order if already in pool
	deleteOrder(id);
	// Create order by product and amount
	var order = getProductById(id);
	order.amount = amount_product;
	// Add product to array
	orders.push(order);
	// Hide empty-message
	$product_empty.css('display', 'none');
	// Micro template orders
	var output = $.template(true, '/js/orders.tpl', orders, true);
	output += '<p id="total">Totaal: '+calcTotal()+' Euro</p>';
	$product_container.html(output);
}

function deleteOrder(id)
{
	var amount = orders.length;
	var new_array = [];
	for(var i=0;i<amount;i++)
	{
		if(orders[i].id !== id)
		{
			new_array.push(orders[i]);
		}
	}
	orders = new_array;
	if(orders.length != 0)
	{
		$product_container.html($.template('/js/orders.tpl', orders));
	}
	else
	{
		$product_empty.show();
		$product_container.html("");
	}
}