// Shop Module
// Build 2010

model.shop = new Array();
model.shop.cart = new Object();
model.shop.cart.content=new Array();

/*************** Model additions ******************/

model.shop.cart.add=function(id)
{
	var itemCacheId=searchCache('shop_item',id);
	if(itemCacheId){
		var itm = model.cache.shop_item[itemCacheId-1];
		itm.amount=parseFloat(itm.amount); //Make sure price is a float
		model.shop.cart.content.push(itm);

		//Show note
		var note = new String();
		note+='<img src="./images/icons/plus.png" alt="Item Added" class="icon" />';
		note+='<div class="text twolines">Item added to cart:<br/>'+itm.title+' ('+itm.media+')</div>';
		showNotification('cart',note,4000);
		renderSmallCart();
	}
}
model.shop.cart.remove=function(i)
{
	var content = model.shop.cart.content;
	var itm = content[i];
	
	//Show note
	var note = new String();
	note+='<img src="./images/icons/minus.png" alt="Item Removed" class="icon" />';
	note+='<div class="text twolines">Item removed from cart:<br/>'+itm.title+' ('+itm.media+')</div>';
	showNotification('cart',note,4000);
	
	//Remove item and update UI
	content.splice(i,1);
	renderSmallCart();
	renderLargeCart();
}

/*************** Main Server interaction ****************/

/**** Load functions ****/

function loadShopMenu(artist)
{
	var cmdArr=new Array();
	var cmd=new Array();

	if(artist){
		if(model.items && !model.items[artist] || !model.items){
			cmd.push(new Array('rpcCommand','shop_get_items_for_artist'));
			cmd.push(new Array('artist',artist));
			cmdArr.push(cmd);
			sendRPC(cmdArr);
		} else {
			var items = new Array();
			for(var i=0;i<model.items[artist].length;i++){
				var shopItemCacheId = searchCache('shop_item',model.items[artist][i]);
				items.push(model.cache.shop_item[shopItemCacheId-1]);
			}
			render_Itemlist(items);	
		}
	} else {
		if(!model.shopArtistlist){
			cmd.push(new Array('rpcCommand','shop_get_artistlist'));
			cmdArr.push(cmd);
			sendRPC(cmdArr);
		} else {
			render_ShopMenu(model.shopArtistlist);	
		}
	}
}

function loadItemdetails(id)
{
	var shopItemCacheId = searchCache('shop_item',id);
	if(shopItemCacheId){
		render_Itemdetails(model.cache.shop_item[shopItemCacheId-1]);
	} else {
		var cmdArr=new Array();
		var cmd=new Array();
	
		cmd.push(new Array('rpcCommand','shop_get_item_details'));
		cmd.push(new Array('id',id));
		cmdArr.push(cmd);
		sendRPC(cmdArr);
	}
}

/**** Process response functions ****/

function process_shop_get_artistlist_response(params)
{
	render_ShopMenu(params.artists);
	model.shopArtistlist=params.artists;
}

function process_shop_get_items_for_artist_response(params)
{
	params.items.sort(sortItemLst);
	render_Itemlist(params.items);
	
	//Cache for menu
	var artist=params.items[0].artist;
	var items=new Array();
	if(!model.items) model.items = new Array();
	for(var i=0;i<params.items.length;i++){
		items.push(params.items[i].id);						//Build item list array
		model.cache.add('shop_item',params.items[i]);		//Add item to cache
	}
	model.items[artist]=items;
}

function process_shop_get_item_details_response(params)
{
	render_Itemdetails(params);
	model.cache.add('shop_item',params);	
}

/******************* Main Render functions ***********************/

function render_ShopMenu(artists)
{
	var contentDiv = document.getElementById('content');
	var html=new String();

	html ='<h3>Shop</h3>';
	html+='<div class="portal"><p>';
	for(var i=0;i<artists.length;i++) {	
		var artist=artists[i];
		html+='<a onclick="loadShopMenu(\''+artist+'\')">'+artist+'</a><br/>';  
	}
	html+='</p></div>';
	contentDiv.innerHTML=html;
	scrollTop('content');
}

function render_Itemlist(items)
{
	var contentDiv = document.getElementById('content');
	var html=new String();	
	
	html+='<h3>Our Products for '+items[0].artist+'</h3>';
	for(var i=0;i<items.length;i++){
		var itm=items[i];
		html+='<div class="rounded"><div class="head"></div><div class="roundedBody shop">';
		html+='<img src="./images/covers/'+itm.id+'.jpg" alt="Cover" /><table>';
		html+='<tr><th scope="row">Artist:</th><td>'+itm.artist+'</td></tr>';
		if(itm.title) html+='<tr><th scope="row">Title:</th><td>'+itm.title+'</td></tr>';
		html+='<tr><th scope="row">Media:</th><td>'+itm.media+'</td></tr>'; 
		html+='<tr><th scope="row">Price:</th><td>&euro;'+itm.amount+'</td></tr></table>';
		html+='<div class="btn" onclick="model.shop.cart.add(\''+itm.id+'\')">Add to Cart</div>'; 
		html+='</div><div class="foot"></div></div>';	
	}
	contentDiv.innerHTML=html;
	scrollTop('content');
}

function render_Itemdetails(itm)
{
	var contentDiv = document.getElementById('content');
	var html=new String();
	
	//Tabs
	if(itm.title) html+='<div class="tab" onclick="loadBio(\''+itm.id+'\')">Biography</div>';
	if(itm.download=='true') html+='<div class="tab" onclick="loadDownload(\''+itm.id+'\')">Downloads</div>';
	html+='<div class="tab sel">Shop</div>'; 
	
	html+='<div class="rounded"><div class="head tabHead"></div><div class="roundedBody shop">';
	html+='<img src="./images/covers/'+itm.id+'.jpg" alt="Cover" /><table>';
	html+='<tr><th scope="row">Artist:</th><td>'+itm.artist+'</td></tr>';
	if(itm.title) html+='<tr><th scope="row">Title:</th><td>'+itm.title+'</td></tr>';
	html+='<tr><th scope="row">Media:</th><td>'+itm.media+'</td></tr>'; 
	html+='<tr><th scope="row">Price:</th><td>&euro;'+itm.amount+'</td></tr></table>';
	html+='<div class="btn" onclick="model.shop.cart.add(\''+itm.id+'\')">Add to Cart</div>'; 
	html+='</div><div class="foot"></div></div>';
	
	contentDiv.innerHTML=html;
}

/***************** Login/Reg system ******************/

function logout()
{
	model.user=new Array();
	modifyTopBar(false);
	loadMain('news');
	
	var note='<div class="text oneline">Logged out successfully.</div>';
	showNotification('success',note,4000);
}

function modifyTopBar(loggedin)
{
	var top = document.getElementById('top');
	if(loggedin){
		top.innerHTML = 'Logged in as: '+model.user.name+' <a onclick="logout()">(Logout)</a>';
	} else {
		top.innerHTML = '<a onclick="renderLogin(\'content\')">Login</a> | <a onclick="renderRegistration(\'content\')">Register</a>';
	}
}

function register(step)
{
	switch(step){
		case 1:
			model.registration=new Array();
			renderRegLoginForm('content');
			break;
		case 2:
			renderRegAddressForm('content');
			break;
		case 3:
			sendRegistration();
			break;
	}
}

/**** Server interaction ****/

//Login

function processLogin(form,referrer)
{
	var form = document[form];
	var user = form.user.value;
	var password = form.password.value;
	
	if(!user=='' && !password==''){
		var cmdArr=new Array();
		var cmd=new Array();
	
		cmd.push(new Array('rpcCommand','common_verify_login'));
		cmd.push(new Array('user',user));
		cmd.push(new Array('password',password));
		if(referrer) cmd.push(new Array('referrer',referrer));
		cmdArr.push(cmd);
	
		sendRPC(cmdArr);	
	} else {
		var note='<div class="text oneline">Please enter both fields.</div>';
		showNotification('error',note,4000);		
	}
}

function process_common_verify_login_response(params)
{
	var user = model.user;
	
	if(params.loginsuccess=='true'){
		user.id=params.user_id;
		user.name=params.fname+' '+params.lname;
		user.firstname=params.fname;
		user.lastname=params.lname;
		if(params.company) user.company=params.company;
		user.email=params.email;
		user.street=params.street;
		user.postcode=params.postcode;
		user.city=params.city;
		user.state=params.state;
		user.country=params.country;
		if(params.telephone) user.telephone=params.telephone;
		if(params.ordercount)user.ordercount=params.ordercount;
		
		modifyTopBar(true);
		var note='<div class="text twolines">Login successful.<br/>Welcome '+user.name+'</div>';
		showNotification('success',note,4000);
	
		if(params.referrer=='undefined') {
			loadMain('news');
		} else {
			eval(params.referrer);
		}
	} else {
		var note='<div class="text oneline">'+params.errormsg+'</div>';
		showNotification('error',note,4000);
	}
}

//Registration

function checkUserName(field)
{
	var user = field.value;
	var form = field.form.name;

	var cmdArr=new Array();
	var cmd=new Array();
	
	cmd.push(new Array('rpcCommand','common_check_username'));
	cmd.push(new Array('user',user));
	cmd.push(new Array('form',form));
	cmdArr.push(cmd);
	
	sendRPC(cmdArr);
}

function process_common_check_username_response(params)
{
	var field = document[params.form].username;
	if(params.userexists=='true'){
		field.style.border = '1px solid #FF0000';
		field.value='';
		field.focus();
		var note='<div class="text oneline">Sorry, that username already exists.</div>';
		showNotification('error',note,4000);
	} else {
		field.style.border = '';
	}
}

function sendRegistration()
{
	var reg = model.registration;
	var cmdArr=new Array();
	var cmd=new Array();
	
	cmd.push(new Array('rpcCommand','common_process_registration'));
	//User
	cmd.push(new Array('username',reg.username));
	cmd.push(new Array('password',reg.password_confirm));
	//Adress information
	cmd.push(new Array('firstname',reg.firstname));
	cmd.push(new Array('lastname',reg.lastname));
	if(reg.company!='')cmd.push(new Array('company',reg.company));
	cmd.push(new Array('email',reg.email));
	cmd.push(new Array('street',reg.street));
	cmd.push(new Array('postcode',reg.postcode));
	cmd.push(new Array('city',reg.city));
	cmd.push(new Array('province',reg.state));
	cmd.push(new Array('country',reg.country));
	if(reg.telephone!='')cmd.push(new Array('telephone',reg.telephone));
	cmdArr.push(cmd);
	
	sendRPC(cmdArr);
}

function process_common_process_registration_response(params)
{
	if(params.success=='true'){
		model.registration=null;
		var contentDiv = document.getElementById('content');
		var html = new String();
		
		html+='<h3>Registration</h3>';
		html+='<div class="story"><p>Registration was successful, you can now login.</p></div>';
		contentDiv.innerHTML=html;
	}
}

/**** Render functions ****/

// Login

function renderLogin(divid,referrer)
{
	var div = document.getElementById(divid);
	var html = String();
	if(referrer) {
		html+='<br/>';
	} else {
		html+='<h3>Login</h3>';
	}

	html+='<div id="login" class="story"><form name="login" action="" method="post">';
	html+='<label for="usr">Username:</label><input name="user" id="usr" type="text" size="20" /><br/>';
	html+='<label for="psswd">Password:</label><input name="password" id="psswd" type="password" size="20" /><br/>';
	html+='<div class="btn" onclick="processLogin(\'login\',\''+referrer+'\')">Login</div>';
	html+='</form></div>';

	div.innerHTML = html;
	document.login.user.focus();
}

function renderRegLoginForm(divid)
{
	var div = document.getElementById(divid);
	var formType = 'registration';
	var html = String();
	
	model.validation.push(["document.userinfo.username","alphaNum",true]);
	model.validation.push(["document.userinfo.password_confirm","passwordReg",true]);


	html+='<h3>Registration</h3>';
	html+='<div class="story"><p>Please enter the requested information</p>';
	html+='<form name="userinfo"><fieldset><legend>User information</legend>';
	html+='<label for="usr">Username*</label><input type="text" name="username" id="usr" onchange="checkUserName(this)" /><br/>';
	html+='<label for="psswd">Password*</label><input type="password" name="password" id="psswd" /><br/>';
	html+='<label for="psswd_cnfrm">Confirm Password*</label><input type="password" name="password_confirm" ';
	html+='id="psswd_cnfrm" onchange="validateField(this)" /></fieldset>';
	html+='<p><em>All fields marked with an asterisk (*) are required.</em></p>';
	html+='<div class="btn" onclick="processForm(\'userinfo\',\'userRegInfo\',\'register(2)\')">Next</div>';
	html+='</form></div>';
	
	div.innerHTML = html;
}

function renderAddressForm(divid)
{
	var formType = 'address';
	var div = document.getElementById(divid);
	var countries = ["Netherlands","United States","Anguilla","Argentina","Australia","Austria","Belgium","Brazil","Canada","Chile","China","Costa Rica","Cyprus","Czech Republic","Denmark","Dominican Republic","Ecuador","Estonia","Finland","France","Germany","Greece","Hong Kong","Hungary","Iceland","Israel","Italy","Jamaica","Japan","Latvia","Lithuania","Luxembourg","Malaysia","Malta","Mexico","Netherlands","New Zealand","Norway","Poland","Portugal","Singapore","Slovakia","Slovenia","South Africa","South Korea","Spain","Sweden","Switzerland","Taiwan","Thailand","Turkey","United Kingdom","Uruguay","Venuzuela"];
	
	// Add validations
	model.validation.push(["document.frm_address.firstname","alpha",true]);
	model.validation.push(["document.frm_address.lastname","alpha",true]);
	model.validation.push(["document.frm_address.company","alphaNum",false]);
	model.validation.push(["document.frm_address.email","email",true]);
	model.validation.push(["document.frm_address.street","alphaNum",true]);
	model.validation.push(["document.frm_address.postcode","alphaNum",true]);
	model.validation.push(["document.frm_address.city","alpha",true]);
	model.validation.push(["document.frm_address.state","alpha",true]);
	model.validation.push(["document.frm_address.country","alpha",true]);
	model.validation.push(["document.frm_address.telephone","none",false]);
	var html = String();
	
	html+='<form id="frm_address" name="frm_address" method="post" action="">';
	html+='<fieldset><legend>Personal</legend>';
    html+='<label for="fname">First name*</label><input type="text" name="firstname" id="fname" onchange="validateField(this)" /><br/>';
	html+='<label for="lname">Last name*</label><input type="text" name="lastname" id="lname" onchange="validateField(this)" /><br/>';
	html+='<label for="comp">Company</label><input type="text" name="company" id="comp" onchange="validateField(this)" /><br/>';
	html+='<label for="mail">E-mail*</label><input type="text" name="email" id="mail" onchange="validateField(this)" />';
	html+='</fieldset>';

	html+='<fieldset><legend>Address</legend>';
	html+='<label for="addr">Street & House No*</label><input type="text" name="street" id="addr" onchange="validateField(this)" /><br/>';
	html+='<label for="pstcode">Postcode*</label><input type="text" name="postcode" id="pstcode" onchange="validateField(this)" /><br/>';
	html+='<label for="cty">City*</label><input type="text" name="city" id="cty" onchange="validateField(this)" /><br/>';
	html+='<label for="prvince">State/Province*</label><input type="text" name="state" id="prvince" onchange="validateField(this)" /><br/>';
	html+='<label for="cntry">Country*</label><select name="country" id="cntry">';
	//Generation at end
	html+='</select><br/>';
	html+='<label for="tel">Telephone</label><input type="text" name="telephone" id="tel" /><br/>';
	html+='<input type="hidden" name="formtype" value="'+formType+'" />';
	html+='</fieldset>';
	html+='<p><em>All fields marked with an asterisk (*) are required.</em></p>';
	html+='<div class="btn" onclick="processForm(\'frm_address\',\'formAddress\',\'checkout(2)\')">Next</div>';
	html+='</form>';
	
	div.innerHTML = html;
	scrollTop('content');
	// Option generation from array
	for(i=0;i<countries.length;i++){
		document.frm_address.country[i] = new Option(countries[i],countries[i]);
	}
}

function renderRegAddressForm(divid)
{
	var formType = 'formRegAddress';
	var div = document.getElementById(divid);
	var countries = ["Netherlands","United States","Anguilla","Argentina","Australia","Austria","Belgium","Brazil","Canada","Chile","China","Costa Rica","Cyprus","Czech Republic","Denmark","Dominican Republic","Ecuador","Estonia","Finland","France","Germany","Greece","Hong Kong","Hungary","Iceland","Israel","Italy","Jamaica","Japan","Latvia","Lithuania","Luxembourg","Malaysia","Malta","Mexico","Netherlands","New Zealand","Norway","Poland","Portugal","Singapore","Slovakia","Slovenia","South Africa","South Korea","Spain","Sweden","Switzerland","Taiwan","Thailand","Turkey","United Kingdom","Uruguay","Venuzuela"];
	
	// Add validations
	model.validation.push(["document.frm_address.firstname","alpha",true]);
	model.validation.push(["document.frm_address.lastname","alpha",true]);
	model.validation.push(["document.frm_address.company","alphaNum",false]);
	model.validation.push(["document.frm_address.email","email",true]);
	model.validation.push(["document.frm_address.street","alphaNum",true]);
	model.validation.push(["document.frm_address.postcode","alphaNum",true]);
	model.validation.push(["document.frm_address.city","alpha",true]);
	model.validation.push(["document.frm_address.state","alpha",true]);
	model.validation.push(["document.frm_address.country","alpha",true]);
	model.validation.push(["document.frm_address.telephone","none",false]);
	var html = String();
	
	html+='<h3>Registration</h3>';
	html+='<div class="story"><p>Please enter the requested information.</p>';
	html+='<form id="frm_address" name="frm_address" method="post" action="">';
	html+='<fieldset><legend>Personal</legend>';
    html+='<label for="fname">First name*</label><input type="text" name="firstname" id="fname" onchange="validateField(this)" /><br/>';
	html+='<label for="lname">Last name*</label><input type="text" name="lastname" id="lname" onchange="validateField(this)" /><br/>';
	html+='<label for="comp">Company</label><input type="text" name="company" id="comp" onchange="validateField(this)" /><br/>';
	html+='<label for="mail">E-mail*</label><input type="text" name="email" id="mail" onchange="validateField(this)" />';
	html+='</fieldset>';

	html+='<fieldset><legend>Address</legend>';
	html+='<label for="addr">Street & House No*</label><input type="text" name="street" id="addr" onchange="validateField(this)" /><br/>';
	html+='<label for="pstcode">Postcode*</label><input type="text" name="postcode" id="pstcode" onchange="validateField(this)" /><br/>';
	html+='<label for="cty">City*</label><input type="text" name="city" id="cty" onchange="validateField(this)" /><br/>';
	html+='<label for="prvince">State/Province*</label><input type="text" name="state" id="prvince" onchange="validateField(this)" /><br/>';
	html+='<label for="cntry">Country*</label><select name="country" id="cntry">';

	//Generation at end
	html+='</select><br/>';
	html+='<label for="tel">Telephone</label><input type="text" name="telephone" id="tel" /><br/>';
	html+='<input type="hidden" name="formtype" value="'+formType+'" />';
	html+='</fieldset>';
	html+='<p><em>All fields marked with an asterisk (*) are required.</em></p>';
	html+='<div class="btn" onclick="processForm(\'frm_address\',\'formRegAddress\',\'register(3)\')">Next</div>';
	html+='</form></div>';
	
	div.innerHTML = html;
	// Option generation from array
	for(i=0;i<countries.length;i++){
		document.frm_address.country[i] = new Option(countries[i],countries[i]);
	}
}

/***************** Cart / Checkout system ****************/

//Cart
function addToCart(id,artist,title,media,price)
{
	model.shop.cart.add(id,artist,title,media,price);	
}

function removeFromCart(i)
{
	model.shop.cart.remove(i);	
}

//Checkout

function checkout(step){
	switch(step){
		case 1:       //start
			if(model.user.id){
				//change to confirm later
				checkout(2);
			} else {
				renderCOStep1();
			}
			break;
		case 2:
			renderCOStep2();
			break;
		case 3:
			renderCOConfirm();
			break;
		case 4:
			renderFinal();
			break;
	}
}

function setPaymentMethod(method)
{
	model.user.paymentMethod=method;
	checkout(3);
}

function calculateShipping(country)
{
	switch (country) {
		case "Netherlands":
			var shippingcst = 3.00;
			break;
		case "Austria":
		case "Belgium":
		case "Cyprus":
		case "Czech Republic":
		case "Denmark":
		case "Estonia":
		case "Finland":
		case "France":
		case "Germany":
		case "Greece":
		case "Hungary":
		case "Iceland":
		case "Ireland":
		case "Italy":
		case "Latvia":
		case "Lithuania":
		case "Luxembourg":
		case "Malta":
		case "Norway":
		case "Poland":
		case "Portugal":
		case "Slovakia":
		case "Slovenia":
		case "Spain":
		case "Sweden":
		case "Switzerland":
		case "United Kingdom":
			var shippingcst = 4.00;
			break;
		default:
			var shippingcst = 8.00;
			break;
	}
	return shippingcst;
}

/**** Server interaction ****/

function sendCart()
{
	var usr=model.user;
	var cart=model.shop.cart.content;
	if(usr && cart){
		var cmdArr=new Array();
		var cmd=new Array();
	
		cmd.push(new Array('rpcCommand','shop_process_bankpayment'));
		if(usr.id) cmd.push(new Array('userid',usr.id));
		cmd.push(new Array('firstname',usr.firstname));
		cmd.push(new Array('lastname',usr.lastname));
		cmd.push(new Array('email',usr.email));
		cmd.push(new Array('street',usr.street));
		cmd.push(new Array('postcode',usr.postcode));
		cmd.push(new Array('city',usr.city));
		cmd.push(new Array('province',usr.state));
		cmd.push(new Array('country',usr.country));
		if(usr.telephone!='')cmd.push(new Array('telephone',usr.telephone));
		
		for(var i=0;i<cart.length;i++){
			var itmName = 'item_'+i
			cmd.push(new Array(itmName,cart[i].id));
		}
		
		var shipping=calculateShipping(usr.country);
		cmd.push(new Array('shipping',shipping));
	
		cmdArr.push(cmd);
	
		sendRPC(cmdArr);
	}
}

function process_shop_process_bankpayment_response(params)
{
	var contentDiv = document.getElementById('content');
	var html=new String();
	if(params.mail==1){
		html+='<h3>Checkout</h3><div class="story"><p><strong>Thank you for your order.</strong></p>';
		html+='<p>You will receive an e-mail confirming your order shortly. The E-mail also contains the payment details needed ';
		html+='to complete your payment and finish the transaction. Items will be shipped as soon as possible after your payment has been received.</p></div>';
		contentDiv.innerHTML=html;
		model.shop.cart.content=new Array();			//Clear cart
		document.getElementById('cart').innerHTML='';
	} else {
		html+='<h3>Checkout</h3>';
		html+='<div class="story"><p>We encountered an internal error processing your order. Please try again later or contact us at info@corazong.com.</p></div>';
		contentDiv.innerHTML=html;
	}
}

function sendToPaypal()
{
	document.paypalForm.submit();
	var contentDiv=document.getElementById('content');
	var html=new String();
	html+='<h3>Checkout</h3>';
	html+='<div class="story"><strong>Thank you for your order.</strong>';
	html+='<p>Once you have completed the payment on Paypal you should soon receive an E-mail confirming your order. The ordered items';
	html+='will then be shipped to you as soon as possible.</p></div>';
	contentDiv.innerHTML=html;
	
	document.getElementById('cart').innerHTML=''; 					//Clear cart div
	model.shop.cart.content=new Array();							//Clear cart array
}

/**** Render Functions ****/

//Cart 
function renderSmallCart()
{
	var cart = document.getElementById('cart');
	var content = model.shop.cart.content;
	var html = new String();
	var total = 0.00;
	
	html+='<div id="cartheader" onclick="renderLargeCart()">Shopping Cart</div>';
	html+='<div id="cartcontentouter"><div id="cartcontentinner" onclick="renderLargeCart()">';
	if(content.length>0){
		for(i=0;i<content.length;i++){
			var itm = content[i];
			var title = itm.title;
			if(title.length>20) var title = title.substr(0,20)+'...'; //Check string length
			html+=title+'<br/>';
			total = total + itm.amount;
		}
	} else {
		html+='Your cart is empty!';	
	}
	html+='</div><div id="total">Total: &euro;'+fixDecimal(total)+'</div></div>';
	html+='<div id="cartfooter"';
	if(content.length>0) {
		html+='<div id="cartfooter"><a onclick="checkout(1)">Checkout >></a></div>';
	} else {
		html+='<div id="cartfooter">Checkout >></div>';
	}
	cart.innerHTML = html;	
}

function renderLargeCart()
{
	var contentDiv = document.getElementById('content');
	var content = model.shop.cart.content;
	var html = new String();
	var total = 0.00;
	
	html+= '<h3>Shopping Cart</h3>';
	html+= '<div id="cartLarge"><div id="cartLargeHeader"></div>';
	html+= '<div id="cartLargeContentouter"><div  id="cartLargeContentinner">';	
	html+= '<table width="370" border="0"><tr><th scope="col" width="7"></th><th scope="col" width="270">Item</th>';
	html+= '<th width="50" scope="col">Media</th><th width="40" scope="col">Price</th></tr>';
	if(content.length>0){
		for(i=0;i<content.length;i++){
			itm = content[i];
			html+= '<tr><td><a onclick="model.shop.cart.remove(\''+i+'\')">X</a></td><td>'+itm.title+' ('+itm.artist+')</td>';
			html+= '<td>'+itm.media+'</td><td>&euro;'+itm.amount+'</td></tr>';
			total = total + itm.amount;
		}
	} else {
		html+= '<tr><td></td><td>Your cart is empty!</td><td></td><td></td></tr>';	
	}
	html+= '</table>';
	html+= '</div><div id="largetotal">Total: &euro;'+fixDecimal(total)+'</div></div>';
	html+=	'<div id="cartLargeFooter">';
	if(content.length>0){
		html+='<a onclick="checkout(1)">Check Out >></a>';
	} else {
		html+='Check Out >>';
	}
	html+='</div></div>';
	
	contentDiv.innerHTML = html;
}

//Checkout

function renderCOStep1()
{
	var content = document.getElementById('content');
	var html = new String();
	html+='<h3>Checkout</h3>';
	html+='<div class="story"><strong>Step 1: Entering Address Information</strong></div>';
	html+='<div class="story checkoutCenter" id="checkoutContent"><p>Your address information is needed to complete your request.';
	html+='Please choose one of the methods below to provide us with the correct information.</p>';
	html+='<p><strong><em>Method 1 - Login or Register</em></strong></p>';
	html+='<p class="checkoutChoice">If you have a corazong account, plan on visting our site again,';
	html+='would like to receive our (monthly) newsletter or would simply like to ';
	html+='enjoy a small discount* (reserved for registered customers), this is the choice for you.</p>';
	html+='<div class="btn" onclick="renderLogin(\'checkoutContent\',\'checkout(2)\')">Login</div><div class="btn" onclick="register(1)">Register</div>';
	html+='<p><strong><em>Method 2 - Entering information without registration</em></strong></p>';
	html+='<p class="checkoutChoice">If you would just like to enter your address information without registering, please click below.</p>';
	html+='<div class="btn" onclick="renderAddressForm(\'checkoutContent\',false)">Address</div>';
	html+='</div>';
	html+='<div class="story steps"><strong>Step 1</strong> - Step 2 - Step 3 - Step 4</div>';
	content.innerHTML=html;
	scrollTop('content');
}

function renderCOStep2()
{
	var content = document.getElementById('content');
	var html = new String();
	html+='<h3>Checkout</h3>';
	html+='<div class="story"><strong>Step 2: Choose Payment Method</strong></div>';
	html+='<div class="story checkoutCenter" id="checkoutContent">';
	html+='<p>Please choose one of the methods below to provide us with the correct information.</p>';
	html+='<p><strong><em>Method 1 - Pay by Bank Transfer</em></strong></p>';
	html+='<p class="checkoutChoice">Banktransfer into the CoraZong Bank Account. Recommended for all customers with a bank-account '; 
	html+='in Holland or in any other EU-country. Our bank-information will be provided in an E-Mail along with payment instructions ';
	html+='as soon as the order is confirmed.</p>';
	html+='<div class="btn" onclick="setPaymentMethod(\'bank\')">Bank</div>';
	html+='<p><strong><em>Method 2 - Pay by Paypal/Credit card</em></strong></p>';
	html+='<p class="checkoutChoice">Alternatively you can also make payments through the services of PayPal. PayPal lets anyone ';
	html+='with an email address securely send online payments using their credit card or bank account. This is especially recommended ';
	html+='for all international (internet) payments. You will receive a payment-request as soon as order is complete and ready to be ';
	html+='shipped. For more info on PayPal please visit www.paypal.com.</p>';
	html+='<div class="btn" onclick="setPaymentMethod(\'paypal\')">Paypal</div>';
	html+='</div>';
	html+='<div class="story steps">Step 1 - <strong>Step 2</strong> - Step 3 - Step 4</div>';
	content.innerHTML=html;
	scrollTop('content');
}

function renderCOConfirm()
{
	var content = document.getElementById('content');
	var html = new String();
	var user = model.user;
	var cartTotal = 0.00;
	var shipping=calculateShipping(user.country);
	if(!user.name) user.name = user.firstname+' '+user.lastname;
	if(user.paymentMethod=='paypal') var paymentMethod = 'Paypal/Creditcard';
	if(user.paymentMethod=='bank') var paymentMethod = 'Bank Transfer';
	html+='<h3>Checkout</h3>';
	html+='<div class="story"><strong>Step 3: Confirm Payment Details</strong></div>';
	html+='<div class="story checkoutCenter" id="checkoutContent"><br/>';
	for(i=0;i<model.shop.cart.content.length;i++){
		var itm = model.shop.cart.content[i];
		cartTotal = cartTotal + itm.amount;
	}
	var total = cartTotal+shipping;
	html+='<table width="200" border="0">';
	html+='<tr><td>Cart Total:</td><td style="text-align:right">&euro;'+fixDecimal(cartTotal)+'</td></tr>'; 
	html+='<tr><td>Shipping:</td><td style="text-align:right">&euro;'+fixDecimal(shipping)+'</td></tr>';
	
	if(user.id && user.ordercount>0){					
		var discount = cartTotal * 0.10;						//Calculate discount
		var total = total - discount;
		html+='<tr><td><em>Your discount:</em></td><td style="text-align:right"><em>-&euro;'+fixDecimal(discount)+'</em></strong></td></tr>';
	}
	html+='<tr><td><strong>Total:</strong></td><td style="text-align:right"><strong>&euro;'+fixDecimal(total)+'</strong></td></tr></table>';
	
	html+='<p><strong>Address details:</strong><br/>';
	html+=user.name+'<br/>'+user.street+'<br/>'+user.city+' '+user.postcode+'<br/>'+user.country+'</p>';
	html+='<p><strong>Paymentmethod:</strong><br/>'+paymentMethod+'</p>';
	html+='<div class="btn" onclick="checkout(4)">Confirm</div>'; 
	html+='</div>';
	html+='<div class="story steps">Step 1 - Step 2 - <strong>Step 3</strong> - Step 4</div>';
	content.innerHTML = html;
}

function renderFinal()
{
	var content = document.getElementById('content');
	var html = new String();
	html+='<h3>Checkout</h3>';
	html+='<div class="story"><strong>Step 4: The Payment</strong></div>';
	html+='<div class="story checkoutCenter" id="checkoutContent">';
	if(model.user.paymentMethod=='paypal'){
		html+='<p><strong>Paypal/Creditcard Payment using Paypal</strong></p>';
		html+='<p>The transaction will now be completed using the paypal payment system. To proceed with the payment, please click ';
		html+='on the button below.</p>';
		html+=renderPaypalForm();
	} else if(model.user.paymentMethod=='bank'){
		html+='<p><strong>Payment by Bank Transfer</strong></p>';
		html+='<p>An E-mail containing payment details will now be sent to your E-mail address.<br/>'; 
		html+='To finish this part of the transaction, please click on the button below.</p>';
		html+='<div class="btn" onclick="sendCart()">Finish</div>';
	}
	html+='</div>';
	html+='<div class="story steps">Step 1 - Step 2 - Step 3 - <strong>Step 4</strong></div>';
	content.innerHTML = html;
}

function renderPaypalForm()
{
	var form = new String();
	var user = model.user;
	var shipping=calculateShipping(user.country);
	form+='<form name="paypalForm" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">';
	form+='<input type="hidden" name="cmd" value="_ext-enter">';
	form+='<input type="hidden" name="redirect_cmd" value="_cart">';
	form+='<input type="hidden" name="upload" value="1">';
	form+='<input type="hidden" name="business" value="info@corazong.com">';
	form+='<input type="hidden" name="currency_code" value="EUR">';
	form+='<input type="hidden" name="no_note" value="1">';
	form+='<input type="hidden" name="shipping_1" value="'+shipping+'">';	
	
	var cartContent=model.shop.cart.content;
	var itm_num=1;
	for(i=0;i<cartContent.length;i++){
		var itm=cartContent[i];
		form+='<input type="hidden" name="item_name_'+itm_num+'" value="'+itm.artist+' - '+itm.title+' ('+itm.media+')">';
		form+='<input type="hidden" name="item_number_ '+itm_num+'" value="'+itm.id+'">';
		form+='<input type="hidden" name="amount_'+itm_num+'" value="'+itm.amount+'">';
		itm_num++;
	}
	//Userinfo
	form+='<input type="hidden" name="first_name" value="'+user.firstname+'">';
	form+='<input type="hidden" name="last_name" value="'+user.lastname+'">';
	form+='<input type="hidden" name="email" value="'+user.email+'">';
	form+='<input type="hidden" name="address1" value="'+user.street+'">';
	form+='<input type="hidden" name="city" value="'+user.city+'">';
	form+='<input type="hidden" name="zip" value="'+user.postcode+'">';
	form+='<div class="btn" onclick="sendToPaypal()">Finish</div>';
	form+='</form>';
	return form;
}

/****************** Helper functions ******************/

function sortItemLst(a,b)
{
  var str1 = a.title.toLowerCase();
  var str2 = b.title.toLowerCase();
  if(str1 < str2) return -1;
  if(str1 > str2) return 1;
  return 0;
}


function fixDecimal(price)
{
	var x = parseFloat(price);
	var y = eval(x + .005);
	var t = new String(y);
	var r = t.indexOf('.');
	var fix = t.substring(0,r+3);
	if(fix.indexOf('.') == -1) fix += '.00';
	return fix;
}