function id(id_str){ //use id() instead of document.getElementById() to simpilify the typing
	return document.getElementById(id_str);
}
var items="";
items+='<div class="trolleyTitle"><div class="right"><a href="javascript:;" onclick="hide_trolley()">close x</a></div>Trolley</div>';
items+='<div class="trolleyContent">';
items+='<table class="trolleyHeader"><tr>';
items+='<td width="56%">Description</td><td width="20%">Unit price</td><td width="12%" align="center">Quantity</td><td width="12%" align="right">Delete</td></tr></table>';
items+='<div id="trolleyContent">Loading...</div>';
items+='<span id="none" style="display:none;">There are no items in trolley. Please browse the catalogue, you will find something you need.</span>';
items+='<br /><div align="right"><strong>Sub total:</strong> <span id="total2">Loading...</span><br /><br />';
items+='<input type="submit" onclick="hide_trolley()" value="Continue Shopping" /> &nbsp;&nbsp;';
items+='<input type="submit" onclick="location.href=\'checkout.php\';" value="Checkout" /></div></div>';
id("trolley").innerHTML=items; //create trolley area

function req(url,data){ //perform XMLHttpRequest
	var xhr; //declare variable
	try { xhr = new XMLHttpRequest(); } //Opera, Firefox, etc.
    catch (e){
		try{ xhr = new ActiveXObject('Msxml2.XMLHTTP'); } //MSIE
        catch (e2){
          try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //MSIE
          catch (e3){  xhr = false;  alert("Your browser does not suppport XMLHttpRequest."); }
        }
    }
	xhr.onreadystatechange = function(){ 
    	if(xhr.readyState  == 4) //when data is loaded
        	eval(xhr.responseText);  //execute the responsed content in javascript
	}
	xhr.open("POST",url, true); 
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                  
	xhr.send(data);
}
req("trolley.php","mode=view"); //request of total amount of trolley
function show_total(txt){ 
//display the total amount of trolley in elements of webPages.
	id("total").innerHTML=txt; 
	id("total2").innerHTML=txt; 
}
//{generating HTML content of an item in trolley,
//used with the combination: reset_trolley();[add_item(sth...);add_item(sth...)...]add_finish();
function reset_trolley(){
  id("trolleyContent").innerHTML="";
  id("trolleyContent").style.display="none";
  id("none").style.display="block";
}
function add_item(sid,no,price,name,size,url){ 
	id("none").style.display="none";
	id("trolleyContent").style.display="block";
	var items='';
	items+='<table class="trolleyItems" id="item_'+sid+'"><tr>';
	items+='<td width="56%" height="28"><a href="'+url+'"><strong>'+name+'</strong><br />'+size+'</a></td>';
	items+='<td width="20%">&pound;'+price+'</td>';
	items+='<td width="12%" align="center">';
	items+='<form method="post" action="javascript:change_trolley(\''+sid+'\',id(\'no_'+sid+'\').value)">';
	items+='<input id="no_'+sid+'" onchange="this.parentNode.submit()" value="'+no+'" size="2" maxlength="2" />';
	items+='</form></td>';
	items+='<td width="12%" align="right"><img src="img/bin.gif" onclick="delete_trolley(\''+sid+'\')" alt="delete" /></td>'
	items+='</tr></table>';
	id("trolleyContent").innerHTML+=items;
}
function add_finish(){
  if(id("add")){
		id("add").value="Add to trolley";
  	id("add").disabled="";
  }
	id("trolley").style.display="block";
}
//}
function add_trolley (sid){ //Add item to trolley
	id("add").disabled="disabled"; 
	id("add").value='Adding...';
	req("trolley.php","mode=add&sid="+sid+"&no="+id("no").value);
}
function show_trolley(){ //Display trolley
	id("trolley").style.display="block";
	id("trolleyContent").innerHTML='Loading...';
	req("trolley.php",null);
}
function hide_trolley(){ //Hide trolley
	id("trolley").style.display="none";
}
function change_trolley(sid,no){ //Modify quantity of an trolley item
	id("total2").innerHTML="Updating...";
	req("trolley.php","mode=change&sid="+sid+"&no="+no);
}
function delete_trolley(sid){ //Delete trolley item
	id("total2").innerHTML="Deleting...";
	req("trolley.php","mode=delete&sid="+sid);
}