/***********************************************************************
*
*  Author: joeri.van.hoof@pandora.be
*
***********************************************************************/

/*
 * Handles a submission of the search form
 */
function searchFormSubmitHandler() {

  var searchexp = $("searchbox").value;

  Catalog.findItems(searchexp, displayItems);
  return false;
}

/*
 * Handles a click on an Item's "Add to Cart" button where 1 color and many sizes
 */
function addToCartButtonHandler1CMS(form) {

	var itemid = form.itemId.value;
	var colorid = form.color.value;
	
	var sizeid = "";
	for (Count = 0; Count < form.size.length; Count++) {
        if (form.size[Count].checked)
        	sizeid = form.size[Count].value;
    }
	
	ShoppingCart.addItem(itemid, colorid, sizeid, displayCartSummary);

	// Clear existing content of Cart
	var hook = $("message");
	if(hook) {
		hook.innerHTML="Het product is toegevoegd aan je winkelwagentje.";
		setTimeout("hook.innerHTML=''", 2000);
	} else {
		  ShoppingCart.getCart(displayCartSummary);
	}
}

/*
 * Handles a click on an Item's "Add to Cart" button where 1 color and 1 size
 */
function addToCartButtonHandler(form) {
	
	var itemid = form.itemId.value;
	var colorid = form.color.value;
	var sizeid = form.size.value;

	ShoppingCart.addItem(itemid, colorid, sizeid, displayCartSummary);

	// Clear existing content of Cart
	var hook = $("message");
	if(hook) {
		hook.innerHTML="Het product is toegevoegd aan je winkelwagentje.";
		setTimeout("hook.innerHTML=''", 10000);
	} else {
		  ShoppingCart.getCart(displayCartSummary);
	}
}

/*
 * Array of functions to populate a row of the items table
 * using DWRUtil's addRows function
 */
var cellFunctions = [
  function(item) { return item.name; },
  function(item) { return item.description; },
  function(item) { return item.formattedEndUserPrice; },
  function(item) { 
    var btn = document.createElement("button");
    btn.innerHTML = "Add to cart";
    btn.itemId = item.id;
    btn.onclick = addToCartButtonHandler;
    return btn;
  }
];

/*
 * Display the items in the webshop return by the server.
 */
function displayItems(items) {
  if (items.length == 0) {
    alert("Spijtig we hebben geen producten gevonden. Probeer een andere omschrijving.");
    $("message").style.visibility = "hidden";
    $("prod-menu").style.visibility = "visible";
  } else {
    $("prod-menu").style.visibility = "hidden";
	var hook = $("message");
	hook.innerHTML = "";
	var i = 0;
	for (i=0; i<items.length; i++) {
		hook.innerHTML += renderItemList(items[i]);
	}
    $("message").style.visibility = "visible";
  }
}

/*
 * Render one item in the webshop.
 */
function renderItemListNavigation(items) {
		alert("--> " + qcount);
}


/*
 * Render one item in the webshop.
 */
function renderItemList(item) {
	var result = "\n\r<div class='item-list-container' style='float:left;'>\n\r";
	result += "\t<div class='item-list-image'>\n\r";
	result += "\t\t<a href='?item=" + item.id + "' onclick=\"Catalog.getItem('" + item.id + "', displayItem)\">\n\r";
	result += "\t\t\t<img width=150px src='" + item.photoLinks[0] + "'></img>\n\r";
	result += "\t\t</a>\n\r\t</div>\n\r";
	result += "\t<div class='item-list-name'>\n\r"; 
	result += "\t\t<a href='?item=" + item.id + "' onclick=\"Catalog.getItem('" + item.id + "', displayItem)\">\n\r";
	result += "\t\t\t" + item.name;
	result += "\n\r\t\t</a>\n\r\t</div>\n\r";
	result += "\t<div class='item-list-price'> vanaf " + item.formattedEndUserPrice + "</div>\n\r";
	result += "</div>\n\r";

	return result;
}

/*
 * Render a single item
 */
function displayItem(item) {
	var hook = $("message");
	hook.innerHTML = "";
	hook.innerHTML = renderItem(item);

	// change underline of category based on the value
	var hook = $("menu-"+item.category);
	if( hook != null )
		hook.style.textDecoration = 'underline';
}

function renderItem(item) {
	var result = "<form name='order' method='post'>\n\r";
	result += "<div class='item-container' style='float:left;'>\n\r";
	if( item.photoLinks.length > 1 ) {
		result += "<div class='item-thumbs' style='float: right;'>";
		for( x in item.photoLinks ) {
			result += "<div class='item-thumbs-div'>";
			result += "<img class='item-thumbs-image' onmouseover=\"getimage('item-image', '" + item.photoLinks[x];
			result += "','','')\" src='" + item.photoLinks[x] + "' ></a>\n\r";
			result += "</div>";
		}
		result += "</div>";
	}

	result += "<div id='item-image'>";
	result += "<img src=\"" + item.photoLinks[0] + "\" height=\"236\">";
	result += "</div>\n\r";
	result += "<div class='item-name'>" + item.name + "</div>\n\r";
	result += "<div class='item-description'>" + item.description + "</div>\n\r";

	var sizeresult = "<div class='item-size'>\n\rMaat: <select name=\"size\">\n\r";
	var sizedefault = false;
	for ( x in item.itemAttributes ) {
		if( 'size'==item.itemAttributes[x].attributeId ) { 
			if( 'default'==item.itemAttributes[x].id ) sizedefault = true;
			sizeresult += "<option value=\"" + item.itemAttributes[x].id + "\">"; 
			sizeresult += item.itemAttributes[x].name + " - " + item.itemAttributes[x].formattedPrice + "</option>\n\r";
		}
	}
	sizeresult += "</select>\n\r</div>\n\r";

	if( sizedefault ) {
		result += "<div class='item-price'>" + item.formattedEndUserPrice + "</div>\n\r";
		result += "\t<input type='hidden' name='size' value=\"default\"/>";
	} else
		result += sizeresult;

	var colorresult = "<div class='item-color'>\n\rKleur: <select name=\"color\">\n\r";
	var colordefault = false;
	for ( x in item.itemAttributes ) {
		if( 'color'==item.itemAttributes[x].attributeId ) { 
			if( 'default'==item.itemAttributes[x].id ) colordefault = true;
			colorresult += "<option value=\"" + item.itemAttributes[x].id + "\">"; 
			colorresult += item.itemAttributes[x].name + "</option>\n\r";
		}
	}
	colorresult += "</select>\n\r</div>\n\r";

	if( colordefault ) 
		result += "\t<input type='hidden' name='color' value=\"default\"/>";
	else
		result += colorresult;

	result += "<div class='item-cart'>";
	result += "\t<input type='hidden' name='itemId' value=\"" + item.id + "\"/>";
	result += "\t<input type='image' src='/style/cart.gif' onclick=\"addToCartButtonHandler()\"/>";
//	result += "<a href=\"javascript: addToCartButtonHandler()\">Voeg aan mijn winkelwagen toe</a>";
	result += "</div>\n\r";
	result += "</div>\n\r";
	result += "</form>\n\r";
	return result;
}

/*
 * Displays a summary of the user's shopping cart.
 */
function displayCartSummary(cart) {
  
  // Clear existing content of Cart
  var hook = $("cart-summary");
  if(hook != null)
	hook.innerHTML = cart.size;
}

/*
 * Displays a summary of the user's shopping cart.
 */
function displayLogin(account) {
  
  // Clear existing content of Cart
  var hook = $("cart-login");
	if( account != null ) {
		hook.innerHTML = account + " | <a href=\"/register/?Action=Logoff\">Afmelden</a>";
	} else {
		hook.innerHTML = "<a class=\"menu\" href=\"/register/\">Aanmelden</a>";
	}
}

/*
 * Displays the contents of the user's shopping cart
 */
function displayCart(cart) {

  displayCartSummary(cart);

  // Clear existing content of Cart
  var hook = $("cart");

	if( cart != null ) {
		var result = "<form name='order' method='post'>\n\r";
		result += "\n\r<table id='table-ww'>\n\r<thead>\n\r";
		result += "<tr><th colspan='5' class='table-img'><img src='/style/checkout/winkelwagen.png'></img>\n\r</th></tr>\n\r";
		result += "<tr><th>Foto</th><th>Artikelcode</th><th>Artikelnaam</th><th>Aantal</th><th>Prijs</th><th style='border: none;'> </th><tr>\n\r";
		result += "</thead>\n\r<tbody>\n\r";

		var count = 0;

		// Loop over cart items
		for (var I in cart.simplerContents) {

			var item = cart.simplerContents[I].item;
			if(!(typeof(item)=="undefined")){ 
				var item = cart.simplerContents[I].item;
				var idsize = null;
				var namesize = null;
				var idcolor = null;
				var namecolor = null;
				for(var J in cart.simplerContents[I].itemAttributes) {
					if( cart.simplerContents[I].itemAttributes[J].attributeId == "size" ) {
						idsize = cart.simplerContents[I].itemAttributes[J].id;
						namesize = cart.simplerContents[I].itemAttributes[J].name;
					}
					if( cart.simplerContents[I].itemAttributes[J].attributeId == "color" ) {
						idcolor = cart.simplerContents[I].itemAttributes[J].id;
						namecolor = cart.simplerContents[I].itemAttributes[J].name;
					}
				}
				var id = cart.simplerContents[I].item.id;
	
				// Add a list element with the name and quantity of each
				result += "<tr>\n\r";
				result += "<td class='table-txt'><img width=40px src='" + item.photoLinks[0]+ "'/></td>\n\r";
				result += "<td class='table-txt'>" + id + "</td>\n\r";
				result += "<td class='table-txt'>" + item.name;
				if( "default" != idsize || "default" != idcolor ) {
					result += "<br/>(";
					if( idsize != "default" ) 
						result += namesize;
					if( idsize != "default" && idcolor != "default" )
						result += ","
					if( idcolor != "default" ) 
						result += namecolor;
					result += ")";
				}
				result += "</td>\n\r";
				result += "<td class='table-nr'>" + cart.simplerContents[I].quantity + "</td>\n\r";
				result += "<td class='table-nr'>" + cart.simplerContents[I].formattedTotalPrice + "</td>";
				result += "<td><img src=\"/style/checkout/add.gif\" onclick=\"ShoppingCart.addItem('" + id + "','" + idcolor + "','" + idsize + "',displayCart)\"/>";
				result += "<img src=\"/style/checkout/remove.gif\" onclick=\"ShoppingCart.removeItem('" + id + "','" + idcolor + "','" + idsize + "',displayCart)\"/></td>\n\r</tr>\n\r";
			}
		}
		result += "<tr><td colspan=\"4\" class=\"table-total-border\"> Subtotaal: </td><td class=\"table-total-border\">" + cart.formattedSubTotalPrice; + "</td></tr>\n\r";
		result += "<tr><td colspan=\"4\" class=\"table-total\"> Verzendkosten: </td><td class=\"table-total-border\">" + cart.formattedShippingCost; + "</td></tr>\n\r";
		result += "<tr><td colspan=\"4\" class=\"table-total\"> Totale prijs: </td><td class=\"table-total-border\">" + cart.formattedTotalPrice; + "</td></tr>\n\r";
		result += "</tbody>\n\r</table>\n\r";
		result += "</form>\n\r";

		hook.innerHTML = result;
	}
}

function getimgcode(img, imglink, subject){
	var result ="";

	if (imglink!="")
		result ='<a href="'+imglink+'">';

	if (subject!="")
		result +='<div id="description">' + subject + '</div>';

	result +='<img width="315" src="'+img+'" />';

	if (imglink!="")
		result +='</a>';

	return result;
}

function getimage(loadarea, img, imglnk, subject){

	if (document.getElementById){
		var imgobj=document.getElementById(loadarea);

		imgobj.innerHTML=getimgcode(img, imglnk, subject);

		return false;
	}
}



window.onload = function() {
	var category=new Array('products', 'buitenspelenbinnenpret', 'njammie', 'softsoap', 'raraavis');
	for( i=0; i<category.length; i++ ) {
		var hook = document.getElementById("menu-"+category[i]);
		if( hook != null )
			hook.style.textDecoration = 'none';
	}
	
	var menu = $("prod-menu");
	if( menu != null )
		menu.style.visibility = "hidden";

	// Verify the query string and look for a category search...
	var url = document.URL;
	var qobject = new Querystring( url.substring(url.indexOf('?')+1, url.length) );

	var qcatf = qobject.get("category");
	var qitem = qobject.get("item");
	var qcount = qobject.get("count");
		
	if( qcatf != null ) {
		var qcatindex = qcatf.toLocaleString().indexOf("?");
		var qcat = qcatf;
		if(qcatindex > 0)
			qcat = qcat.toLocaleString().substring(0, qcatindex);
		Catalog.findItemsByCategory(qcat,displayItems);

		// change underline based on the value
		var hook = $("menu-"+qcat);
		if( hook != null )
			hook.style.textDecoration = 'underline';

	} else {
		if( qitem != null ) {
			Catalog.getItem(qitem,displayItem);
		} else {
			if( menu != null )
				menu.style.visibility = "visible";
			var hook = $("menu-products");
			if( hook != null )
				hook.style.textDecoration = 'underline';
		}
	}

		
  // Update Cart state from session
  ShoppingCart.getCart(displayCartSummary);

  // $("searchform").onsubmit = searchFormSubmitHandler;
}