var uiControl = new Object();
uiControl =
	{
	mouseXpos	: 0,
	mouseYpos	: 0,
	mouseDown	: 0,
	mouseOver	: false,
	dragXdiffer	: false
	};

var scrollerWidth = 0;
var blockSize = 0;
var order = 0;
var scrollBarMoveSpace = 0;
var d = document;
var identify = false;

var itemsInCart = new Array();

d.onmousemove = function(e)
	{
	if (d.all)
		{
		uiControl.mouseXpos = window.event.clientX;
		uiControl.mouseYpos = window.event.clientY;
		}
	else	{
		uiControl.mouseXpos = e.pageX;
		uiControl.mouseYpos = e.pageY;
		}


	if(uiControl.mouseOver && uiControl.mouseDown)
		{
		if(scrollerWidth == 0) return false;
		var scrollBar = d.getElementById(uiControl.mouseOver);
		if(uiControl.mouseXpos - uiControl.dragXdiffer < 0) d.getElementById(uiControl.mouseOver).style.left = 0+"px";
		if(uiControl.mouseXpos - uiControl.dragXdiffer > scrollBarMoveSpace) d.getElementById(uiControl.mouseOver).style.left = scrollBarMoveSpace+"px";
		if(uiControl.mouseXpos - uiControl.dragXdiffer > 0 && uiControl.mouseXpos - uiControl.dragXdiffer < scrollBarMoveSpace)
			{
			d.getElementById(uiControl.mouseOver).style.left = uiControl.mouseXpos - uiControl.dragXdiffer+"px";
			var moveTo = parseInt(d.getElementById("scrollbar").style.left);
			moveTo = -1*(scrollerWidth/scrollBarMoveSpace) * moveTo;
			scrollThis("phoneScroller", moveTo, 30);
			}
		}
	}

function updateXdiffer(elem)
	{
	uiControl.dragXdiffer = uiControl.mouseXpos - parseInt(elem.offsetLeft);
	}

d.onmousedown = function()
	{
	uiControl.mouseDown = true;

	}
d.onmouseup = function()
	{
	uiControl.mouseDown = false;
	uiControl.mouseOver = false;
	}

d.onselectstart = function() { return false; }



/** Draw Phone container **/
function showItems(container, items, itemType)
	{
	var itemPrefix = "phones";
	itemWidth = 178;
	scrollerWidth = 0;
	blockSize = 0;
	var containerDiv = d.getElementById("phoneScroller");

	var i = 0;
	for (id in items)
		{
		i++;
		var newItem = d.createElement("div");
		newItem.className = itemPrefix;
		var itemLink = d.createElement("a");
		itemLink.setAttribute("href","javascript:;");
		itemLink.setAttribute("onclick","return false;");
		itemLink.setAttribute("id", items[id].id);

		itemLink.onmouseover = function()
			{
			if(this.className != itemPrefix+"_selected")
				{
				this.oldClassName = this.className;
				this.className = itemPrefix+"_over";
				}
			}
		itemLink.onmouseout = function()
			{
			if(this.className != itemPrefix+"_selected")
				{
				this.className = this.oldClassName;
				}
			}
		itemLink.onclick = function()
			{
			for (var y=0; y<containerDiv.childNodes.length; y++)
				{
				if(containerDiv.childNodes[y].className.indexOf(itemPrefix) != -1)
					{
					containerDiv.childNodes[y].firstChild.className = itemPrefix;
					}
				}
//			this.oldClassName = itemPrefix+"_selected";
//			this.className = itemPrefix+"_selected";
			addToCart(items[this.getAttribute("ID")].id, itemType);
			}
			
		if(!items[id].thumb)	{return false;}
		var itemImage = d.createElement("img");
		itemImage.setAttribute("src", items[id].thumb);
		itemImage.setAttribute("width", itemWidth);
		itemImage.setAttribute("height", "120");

		itemLink.appendChild(itemImage);
		var itemNameText = d.createElement("div");
		itemNameText.className = "name";
		itemNameText.appendChild(d.createTextNode(items[id].title));

		itemLink.appendChild(itemNameText);
			
		newItem.appendChild(itemLink);
		if(items[id].discount)
			{
			var itemDiscount = d.createElement("div");
			itemDiscount.className = "discount";
			itemLink.appendChild(itemDiscount);
			}

		containerDiv.appendChild(newItem);

		if(i==1) scrollerWidth+= parseInt(newItem.scrollWidth);
		if(i==2) scrollerWidth+= parseInt(newItem.scrollWidth);
		}
	containerDiv.style.width = scrollerWidth/2 * i + 40 + "px";
	blockSize = scrollerWidth/2 + (40/i);
	scrollerWidth = (blockSize * i) - parseInt(d.getElementById("phonesClip").scrollWidth);
	if(scrollerWidth < 0) scrollerWidth = 0;
	}




/** Scroller **/
function scrollPhones(targetID, direction, reset)
	{
	if(!reset)
		{
		var moveTo = parseInt(d.getElementById(targetID).style.left)+direction;

		var startX = parseInt(d.getElementById(targetID).style.left);
		if(moveTo >= 0) moveTo = 0;
		if((moveTo*-1) >= scrollerWidth) moveTo = scrollerWidth*-1;
	
		var scrollbarPos =  scrollBarMoveSpace * moveTo;
		scrollbarPos = scrollbarPos / scrollerWidth;
		d.getElementById("scrollbar").style.left = Math.round(scrollbarPos * -1) + "px";
		scrollThis(targetID,moveTo,30)
		}
	else	{
		scrollThis(targetID,0,30)
		d.getElementById("scrollbar").style.left = 0+ "px";
		}
//	d.getElementById("debug").innerHTML = moveTo;
	}

function scrollThis(objID,final_x,interval)
	{
	if (!d.getElementById) return false;
	if (!d.getElementById(objID)) return false;
	if (!d.getElementById(objID).style.left){d.getElementById(objID).style.left= 0+"px";}

	var elem = d.getElementById(objID);

	if (elem.movement)
		{
		clearTimeout(elem.movement);
		}
	var objLeft = parseInt(elem.style.left);
	if (objLeft < final_x)
		{
		var dist = Math.ceil((final_x - objLeft)/8);
		objLeft = objLeft + dist;
		}
	if (objLeft > final_x)
		{
		var dist = Math.ceil((objLeft - final_x)/8);
		objLeft = objLeft - dist;
		}
	elem.style.left= objLeft + "px";
	var repeat = "scrollThis('"+objID+"',"+final_x+","+interval+")";
	elem.movement = setTimeout(repeat,interval);
	}

function scrollBarClick()
	{
	if(scrollerWidth == 0) return false;
	var scrollBarBackground = d.getElementById("scrollbaronclickContainer");
	var scrollBar = d.getElementById("scrollbar");
	var scrollBarWidth = parseInt(scrollBar.scrollWidth);

	var scrollBarBackgroundLeft = getPageCoords(scrollBarBackground);
	scrollBarBackgroundContainerLeft = getPageCoords(scrollBarBackground.parentNode);
	var dragXdiffer = uiControl.mouseXpos - parseInt(scrollBarBackgroundLeft.x);

	var moveThis = parseInt(scrollBarBackground.offsetLeft)+dragXdiffer-(scrollBarWidth/2);
	if(moveThis<0) moveThis = 0;
	if(moveThis>scrollBarMoveSpace) moveThis = scrollBarMoveSpace;
	scrollBar.style.left = moveThis+"px";
	var moveTo = parseInt(d.getElementById("scrollbar").style.left);
	moveTo = -1*(scrollerWidth/scrollBarMoveSpace) * moveTo;
	scrollThis("phoneScroller", moveTo, 30);
	}

if (window.addEventListener)
	{
	window.addEventListener('DOMMouseScroll', wheel, false);
	}
d.onmousewheel = d.onmousewheel = wheel;

function wheel(event)
	{
	if(!identify) return false;
	
	var delta = 0;
	if (!event) event = window.event;
	if (event.wheelDelta)
		{
		delta = event.wheelDelta/120; 
		if (window.opera) delta = -delta;
		}
	else if (event.detail)
		{
		delta = -event.detail/3;
		}
	var moveTo = delta*blockSize;
	scrollPhones('phoneScroller', moveTo);
	}

function getPageCoords (element)
	{
	var coords = { x: 0, y: 0 };
	while (element)
		{
		coords.x += element.offsetLeft;
		element = element.offsetParent;
		}
	return coords;
	}

function initShop()
	{
	scrollBarMoveSpace = parseInt(d.getElementById("scrollbarcontainer").scrollWidth) - parseInt(d.getElementById("scrollbar").scrollWidth);
	showItems('phoneScroller', shopItems.Phones, shopItems.Phones);
	scrollPhones('phoneScroller', 0,true);
	}




/* Shopping cart functions */

function addToCart(key, items)
	{
	var testItem = 0;
	for(var i=0; i<itemsInCart.length;i++)
		{
		if(itemsInCart[i] == key)
			{
			testItem = 1;
			}

		}
	if (testItem != 0) return false;
	itemsInCart.push(key)

	var shoppingCartItemContainer = document.createElement("DIV");
	shoppingCartItemContainer.className = "container clearfix";

	var shoppingCartItemName = document.createElement("DIV");
	var shoppingCartItemCount = document.createElement("DIV");
	var shoppingCartItemPrice = document.createElement("DIV");
	var shoppingCartItemRemove = document.createElement("DIV");
	
	shoppingCartItemName.className = "column1";
	shoppingCartItemCount.className = "column2";
	shoppingCartItemPrice.className = "column3";
	shoppingCartItemRemove.className = "column4";
	
	shoppingCartItemName.innerHTML = '<input type="hidden" value="'+items[key].id+'"/>'+items[key].title;
	shoppingCartItemRemove.innerHTML = '<a href="" onclick="removeFromCart('+items[key].id+',this.parentNode.parentNode); return false;">Poista</a>';

	var itemPrice = items[key].price;
	shoppingCartItemPrice.innerHTML = itemPrice.toFixed(2)+"&euro;";

	shoppingCartItemCount.innerHTML = '<select onclick="updateThisTotal(this.parentNode.parentNode, this.value, this.parentNode.lastChild);" onchange="updateThisTotal(this.parentNode.parentNode, this.value, this.parentNode.lastChild);"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select><input type="hidden" value="'+itemPrice+'" />';


	shoppingCartItemContainer.appendChild(shoppingCartItemName);
	shoppingCartItemContainer.appendChild(shoppingCartItemCount);
	shoppingCartItemContainer.appendChild(shoppingCartItemPrice);
	shoppingCartItemContainer.appendChild(shoppingCartItemRemove);

	document.getElementById("shoppingCart").appendChild(shoppingCartItemContainer);
	updateTotal();
	}

function updateThisTotal(elem, amount, factor)
	{
	thisTotal = amount*factor.value;
	elem.childNodes[2].innerHTML = thisTotal.toFixed(2);;
	elem.childNodes[2].innerHTML += "&euro;";
	updateTotal();
	}


function updateTotal()
	{
	var totalCounter = document.getElementById("shoppingCart").getElementsByTagName("DIV")
	var total = 0;	
	for(var i=0; i<totalCounter.length; i++)
		{
		if(totalCounter[i].className == "column3")
			{
			total+=parseFloat(totalCounter[i].innerHTML);
			}
		}
	total = total.toFixed(2);
	document.getElementById("shoppingCartTotal").innerHTML = total + "&euro;";
	document.getElementById("maincontent").style.height = parseInt(document.getElementById("maincontent").scrollHeight)+"px";

	}


function removeFromCart(key, elem)
	{
	itemsInCart.remove(key);
	elem.parentNode.removeChild(elem);
	updateTotal();
	}

Array.prototype.remove=function(s)
	{
	for(i=0;i<this .length;i++)
		{
		if(s==this[i]) this.splice(i, 1);
		}
	}