var PressCanvas;
var PressStage;
var PressScroll;
var KamofieLoader;
var LoadingCircle ;
var DIV;
var newCover;
var test = document.getElementById('test');
var last  =  new Array();
var pressArray = new Array();
var velocity = 0;
var moving = false;
var startX;
var loaderRotation = 0;
var rotateLoadingCircleINT;
var decelerateINT;
var fi = 0;
var loaded = 0;
var moving = false;
var displaying = false;

function webkitMobileObject(who){
	var agent=navigator.userAgent
	if(agent.search("iPad") != -1 || agent.search("iPhone") != -1){
		writePress(who);
	}
	return;
}

function writePress(who){
 	PressCanvas = document.createElement('canvas');
 	DIV = document.getElementById(who);
  	DIV.appendChild(PressCanvas);
  	PressCanvas.height = 600;
  	PressCanvas.width= 964;
  	var ctx = PressCanvas.getContext('2d');
	ctx.strokeWidth = 1;
	ctx.strokeStyle = '#c8d4db';
	ctx.moveTo(75,20);
	ctx.lineTo(944,20);
	ctx.lineTo(944,580);
	ctx.lineTo(20,580);
	ctx.lineTo(20,20);
	ctx.lineTo(25,20);
	ctx.stroke();

	var pressTitle = new Image();
	pressTitle.src = "http://www.kamofie.com/press/pressTitle.png";
	pressTitle.onload = function(){
		ctx.drawImage(pressTitle,30,8);
	}

	var cornerLeft = new Image();
	cornerLeft.src = "http://www.kamofie.com/press/cornerLeft.png";
	cornerLeft.onload = function(){
		ctx.drawImage(cornerLeft,0,391);
	}
	var cornerRight = new Image();
	cornerRight.src = "http://www.kamofie.com/press/cornerRight.png";
	cornerRight.onload = function(){
		ctx.drawImage(cornerRight,755,391);
	}
	PressStage = document.createElement('div');
	PressStage.className = "PressStage";	
	PressStage.id = "PressStage";
	Kamofie.appendChild(PressStage);
	PressStage.addEventListener("touchstart", disableDefault, false);
	PressScroll = document.createElement('div');
	PressScroll.className = "PressScroll";
	PressStage.appendChild(PressScroll);
	PressScroll.style.opacity = 0;
	PressScroll.addEventListener("touchstart", touchStart, false);
	PressScroll.addEventListener("touchmove", touchMove, false);
	PressScroll.addEventListener("touchend", touchEnd, false);
	displayLoader();
	loadXML();
}

function disableDefault(e){
	e.preventDefault();
}

function loadXML(){
	req = new XMLHttpRequest();
	var url="/press/xml.php";
	req.onreadystatechange=function () { 
		if (req.readyState==4 || req.readyState=="complete"){
			parseXML(req.responseXML);
		}
	}
	req.open("POST",url,true);
	req.send();
}

function parseXML(XMLString){
	var pressObj;
	var coverNode = XMLString.getElementsByTagName("cover");
	var tearSheetNode = XMLString.getElementsByTagName("tearSheet");
	var pressTitleNode = XMLString.getElementsByTagName("pressTitle");
	var itemTitleNode = XMLString.getElementsByTagName("itemTitle");
	var copyNode = XMLString.getElementsByTagName("copy");
	var itemLinkNode = XMLString.getElementsByTagName("itemLink");
	for(i=0;i<coverNode.length;i++){
		pressObj = new Object();
		pressObj.cover = coverNode[i].childNodes[0].nodeValue;
		pressObj.tearSheet = tearSheetNode[i].childNodes[0].nodeValue;
		pressObj.pressTitle = pressTitleNode[i].childNodes[0].nodeValue;
		pressObj.itemTitle = itemTitleNode[i].childNodes[0].nodeValue;
		pressObj.copy = copyNode[i].childNodes[0].nodeValue;
		pressObj.itemLink = itemLinkNode[i].childNodes[0].nodeValue;
		pressArray.push(pressObj);
	}
	PressScroll.style.width = pressArray.length * 240 + "px";
	for(i=0;i<pressArray.length;i++){
		myImage = new Image();
		myImage.src = "/press/images/" + pressArray[i].cover;
		pressArray[i].coverImage = myImage;
		myImage.onload = function(){
			loaded++;
			if(loaded == pressArray.length){
				fadeMe(KamofieLoader);
				displayMe(PressScroll);
			}
		}
		myCover = new Image();
		myCover.src = '/press/images/' + pressArray[i].cover;
		myCover.id = 'press_' + i;
		myCover.className = 'cover';
		myCover.addEventListener("touchend", selectMe, i);
		PressScroll.appendChild(myCover);
	
	}
}

function selectMe(who){
	if(moving == false && displaying == false){
		var scrollCover = document.getElementById(who.target.id);
		scrollCover.style.visibility = "hidden";
		var x = scrollCover.offsetLeft + PressScroll.offsetLeft;
		var y = scrollCover.offsetTop;
		i = who.target.id.replace("press_", "");
		displaying = true;
		newCover = pressArray[i].coverImage;
		newCover.className = "cover";
		fadeMe(PressScroll);
		PressStage.appendChild(newCover);
		newCover.style.position = "absolute";
		newCover.style.left = x + "px";
		newCover.style.top = y + 85 + "px";
		var destination = -newCover.offsetLeft + 60;
		displayMe(KamofieLoader);
		newCover.style["-webkit-transition"] = "left .5s ease-out";
		newCover.style.left = "60px";
		myTearSheet = new Image();
		myTearSheet.src = "/press/images/" + pressArray[i].tearSheet;
		myTearSheet.className = "tearSheet";
		myTearSheet.onload = function(){
			PressStage.appendChild(myTearSheet)
			myTearSheet.style.top = ((460 - myTearSheet.height)/2) + "px";
			myTearSheet.style.left = 460  - (myTearSheet.width/2) + "px";
			fadeMe(KamofieLoader);
		}
		pressTitle = document.createElement('div');
		pressTitle.className = "pressTitle";
		PressStage.appendChild(pressTitle);
		pressTitle.innerHTML = pressArray[i].pressTitle;
		
		
		
		pressCopyDiv = document.createElement('div');
		pressCopyDiv.className = "pressCopyDiv";
		pressCopyDiv.style.top = y + 85 + "px";
		pressCopyDiv.innerHTML = "<div class='itemTitle'>" + pressArray[i].itemTitle + "<div><div class='itemCopy'>" + pressArray[i].copy + "</div>";
		PressStage.appendChild(pressCopyDiv);
		if(pressArray[i].itemLink != '0'){
			shopItem = document.createElement('div');
			shopItem.className = "shopItem";
			shopItem.id = pressArray[i].itemLink;
			pressCopyDiv.appendChild(shopItem);
			shopItem.addEventListener("touchend",function(e){
				link = "http://www.kamofie.com/index.php?main_page=product_info&products_id=" + e.target.id + "&returnTo=press";
				window.location.href=link;
			});
		}
		returnToPress = document.createElement('div');
		returnToPress.className = "returnToPress";
		pressCopyDiv.appendChild(returnToPress);
		returnToPress.addEventListener("touchend",function(){
			PressStage.removeChild(pressCopyDiv);
			PressStage.removeChild(myTearSheet);
			PressStage.removeChild(pressTitle);
			PressScroll.style.visibility = "visible";
			PressScroll.style.opacity = 1;
			PressScroll.style.left = PressScroll.offsetLeft - x + 60 + "px";
			who.target.style.visibility = "visible";
			setTimeout(enableScroll,500);
		})
	}
}

function enableScroll(){
	PressStage.removeChild(newCover);
	displaying = false;
}

function displayLoader(){
	if(!KamofieLoader){
		KamofieLoader = document.createElement('div');
		PressStage.appendChild(KamofieLoader);
		KamofieLoader.className = "KamofieLoader";
		KamofieLoaderPNG = new Image();
		KamofieLoaderPNG.src = "/press/kamofieLoading.png";
		KamofieLoaderPNG.className = "LoadingCircle";
		KamofieLoaderPNG.id = "LoadingCircle";
		KamofieLoader.appendChild(KamofieLoaderPNG);
		LoadingCircle = document.getElementById("LoadingCircle");
	}
	rotateLoadingCircleINT = setInterval(rotateLoadingCircle,50);
}

function rotateLoadingCircle(){
	LoadingCircle.style["-webkit-transform"] = "rotate(" + loaderRotation + "deg)";
	loaderRotation += 11.25; 
	if(loaderRotation == 360){
		loaderRotation = 0;
	}
}

function fadeMe(who){
	who.style.opacity = 1;
	who.style["-webkit-transition"] = "opacity .2s ease-out";
	who.style.opacity = 0;
	if(who = KamofieLoader){
		//clearInterval(rotateLoadingCircleINT);
	}
}



function displayMe(who){
	who.style.opacity = 0;
	who.style["-webkit-transition"] = "opacity .5s ease-out";
	who.style.opacity = 1;
}


function touchStart(e) {
	clearInterval(decelerateINT);
	moving = false;
	startX = e.targetTouches[0].pageX;
	scX = PressScroll.offsetLeft;
}

function touchMove(e) {
	if(displaying == false){
		moving = true;
		curX = e.targetTouches[0].pageX - startX;
		PressScroll.style.left = scX + curX + "px";
		last.push(e.targetTouches[0].pageX);
	}
}

function touchEnd(e){
	velocity = last[last.length -1] - last[last.length -2];
	last = new Array();
	clearInterval(decelerateINT);
	decelerateINT = setInterval(decelerate,20);
}

function decelerate(){
	velocity = velocity * .7;
	if(Math.abs(velocity) > 1){
		if((velocity > 0)  && (PressScroll.offsetLeft >=921/2)){
			velocity = velocity * -1;
		}else if((velocity < 0)  && (PressScroll.offsetLeft <= -(PressScroll.offsetWidth - (921/2)))){
			velocity = velocity * -1;
		}
		PressScroll.style.left = PressScroll.offsetLeft + velocity + "px";
	}else{
		clearInterval(decelerateINT);
		moving = false;
	}
}

function trace(message){
	test.innerHTML = message;
}