// Global constants
var initialPatternX = 0; // Set in initialize()
var initialPatternY = 550;
var initialCardX = 0; // Set in initialize()
var initialCardY = 484;
var patternVirtualImageWidth = 113;
var patternVirtualImageHeight = 25;
var patternRealImageWidth = 0;
var patternRealImageHeight = 0; 

// Global position and width variables
var patternImageX = 0;
var patternImageY = 0;
var cardImageX = 0;
var cardImageY = 0;
var patternImageWidth = 0;
var patternImageHeight = 0;
var demoType = "real"; //default demotype

// Global document elements
var PATTERN;
var CARD;
var RESIZER;
var demoInstructions;
var authResult;
var virtualRadio;
var realRadio;

// Global movement variables
var n = 500;
var draggingCard = false;
var draggingPattern = false;
var resizing = false;
var y,x,dy,dx = 0;
var prevX, prevY = 0;

// Global HTML 
var virtualInstructions = "<p>Use the mouse to move the virtual PassWindow demo card over the challenge pattern on the screen so that the two patterns are aligned. You will see a different single digit appear each time the pattern changes.<\/p><p>Enter any four digits that appear consecutively into the submission box on the right, then click 'Submit code'<\/p><p>If you want a real, physical demo card, you can <a href=\"http://passwindow.com/contact_passwindow.html\">request one for free<\/a>.<\/p>";
var realInstructions = "<p>Hold your PassWindow demo card over the pattern on the screen. You will see a different single digit appear each time the pattern changes.<\/p><p>Enter any four digits that appear consecutively into the submission box on the right, then click 'Submit code'<\/p><p>If you don't have a real, physical demo card, you can <a href=\"http://passwindow.com/contact_passwindow.html\">request one for free<\/a>.<\/p><ul><li>Use the mouse to drag the pattern behind your card<\/li><li>You can resize the image by dragging on the blue arrows on the bottom right corner of the pattern.<\/li><\/ul>";

// The cookie variables
var cookieSet = false;
var cookiePatternX = 0;
var cookiePatternY = 0;
var cookiePatternWidth = 0;
var cookiePatternHeight = 0;

function initialize() { 

	if (window.opera){
		document.write("<input type='hidden' id='Q' value=' '>");
	}
	
	// Initialize variables
	initialPatternX = ((document.body.clientWidth-890) / 2) + 499;
	initialCardX = ((document.body.clientWidth-890) / 2) + 43;
	PATTERN = document.getElementById("pattern");
	CARD = document.getElementById("card");
	RESIZER = document.getElementById("resizer");
	demoInstructions = document.getElementById("demoInstructions");
	authResult = document.getElementById("authResult");
	virtualRadio = document.getElementById("setVirtual");
	realRadio = document.getElementById("setReal");

	cardImageX = initialCardX;
	cardImageY = initialCardY;
	
	//start with all images hidden
	PATTERN.style.visibility="hidden";
	CARD.style.visibility="hidden";
	RESIZER.style.visibility="hidden";
	
	if (cookieSet == true) {
		patternRealImageWidth = cookiePatternWidth;
		patternRealImageHeight = cookiePatternHeight; 
	} else {
		PATTERN.style.width="32mm";
		PATTERN.style.height="6mm";
		if (screen.width==1024) {
			PATTERN.style.width="34.5mm";
			PATTERN.style.height="6.25mm";
		}
		if (screen.width==1280) {
			PATTERN.style.width="32mm";
			PATTERN.style.height="6mm";	
		}
		if (PATTERN.style.pixelWidth) { // as it would be in firefox...
			patternRealImageWidth = PATTERN.style.pixelWidth; 	// Set pattern pixel width/height based on browser-assigned size
			patternRealImageHeight = PATTERN.style.pixelHeight;
		} else {
			patternRealImageWidth = PATTERN.clientWidth; 
			patternRealImageHeight = PATTERN.clientHeight; 
		}
	} 
	
	// Initialize behaviour
	document.onmousedown = down;
	document.onmouseup = up;
	
	// Start on the correct demo type according to the cookie
	if (demoType == "virtual") { 
		setDemoTypeToVirtual(); // Start with the virtual card demo
	} else {
		setDemoTypeToReal();
	}
}

function updatePositionAndSizes() {
	// Restrict the bounds and size of the pattern image
	if (patternImageX < 0) patternImageX = 0;
	if (patternImageY < 0) patternImageY = 0;
	if (patternImageWidth  <= 100) patternImageWidth = 100;
	if (patternImageHeight <= 10)  patternImageHeight = 10;
	
	// Restrict the bounds the card image
	if (cardImageX < 0) cardImageX = 0;
	if (cardImageY < 0) cardImageY = 0;

	// update size and position of pattern image
	PATTERN.style.left = patternImageX + "px";
	PATTERN.style.top = patternImageY + "px";
	PATTERN.style.width  = patternImageWidth + "px";
	PATTERN.style.height = patternImageHeight + "px";
		
	// update position of card image
	CARD.style.left = cardImageX + "px";
	CARD.style.top = cardImageY + "px";
	
	// update position of resizer
	RESIZER.style.left = patternImageX + patternImageWidth + "px";
	RESIZER.style.top  = patternImageY + patternImageHeight + "px";
}

function move(e) {
	if (!e) e = window.event;
	if (draggingPattern) {
		patternImageX = dx + (e.clientX - x);
		patternImageY = dy + (e.clientY - y);
		updatePositionAndSizes();
	}
	if (draggingCard) {
		cardImageX = dx + (e.clientX - x);
		cardImageY = dy + (e.clientY - y);
		updatePositionAndSizes();
	}
	if (resizing) {
		patternImageWidth  += ((e.clientX - x)/4.0);
		patternImageHeight += ((e.clientY - y)/4.0);
		x = e.clientX;
		y = e.clientY;
		updatePositionAndSizes();
	}
	return false;
}

function down(e) {
	if (!e) e = window.event;
	var temp = (typeof e.target != "undefined") ? e.target : e.srcElement;
	if (temp.tagName != "HTML"|"BODY" && temp.id != "card" && temp.id != "resizer" && temp.id != "pattern"){
		temp = (typeof temp.parentNode != "undefined") ? temp.parentNode : temp.parentElement;
	}
	// Only allow the pattern to be dragged in 'real' demo
	if (temp.id == "pattern" && demoType == "real"){
		if (window.opera){
			document.getElementById("Q").focus();
		}
		draggingPattern = true;
		temp.style.zIndex = n++;
		dx = parseInt(temp.style.left+0);
		dy = parseInt(temp.style.top+0);
		x = e.clientX;
		y = e.clientY;
		document.onmousemove = move;
		return false;
	}
	if (temp.id == "card"){
		if (window.opera){
			document.getElementById("Q").focus();
		}
		draggingCard = true;
		temp.style.zIndex = n++;
		dx = parseInt(temp.style.left+0);
		dy = parseInt(temp.style.top+0);
		x = e.clientX;
		y = e.clientY;
		document.onmousemove = move;
		return false;
	}
	if (temp.id == "resizer"){
		if (window.opera){
			document.getElementById("Q").focus();
		}
		resizing = true;
		temp.style.zIndex = n++;
		x = e.clientX;
		y = e.clientY;
		document.onmousemove = move;
		return false;
	}
}

function up() {
	draggingPattern = false;
	draggingCard = false;
	resizing = false;
	document.onmousemove = null;
}

function save(){

	if(demoType=="real") {
		document.set.picxpos.value=patternImageX;
		document.set.picypos.value=patternImageY;
		document.set.picwidth.value=patternImageWidth;
		document.set.picheight.value=patternImageHeight;
	}
	document.set.demotype.value=demoType;
}

function setDemoTypeToVirtual() {
	demoType="virtual";
	
	//set checkbox to virtual
	virtualRadio.checked=true;
	
	patternImageX = initialPatternX;
	patternImageY = initialPatternY;
	cardImageX = initialCardX;
	cardImageY = initialCardY;
	patternImageWidth = patternVirtualImageWidth;
	patternImageHeight = patternVirtualImageHeight;

	// Make the image of the card invisible and resizer invisible
	PATTERN.style.visibility="visible";
	PATTERN.style.cursor="pointer";
	CARD.style.visibility="visible"; 
	RESIZER.style.visibility="hidden";
	
	// swap the card instructions
	demoInstructions.innerHTML=virtualInstructions;
	
	// Update new positions
	updatePositionAndSizes();
}

function setDemoTypeToReal() {
	demoType="real";
	
	//set checkbox to real
	realRadio.checked=true;
	
	// Every time this mode is set, it should set the position and dimensions to those of the cookie if it exists
	if (cookieSet == true) {
		patternImageX=cookiePatternX;
		patternImageY=cookiePatternY;
		patternImageWidth=cookiePatternWidth;
		patternImageHeight=cookiePatternHeight;
	} else {
		patternImageX = initialPatternX;
		patternImageY = initialPatternY;
		patternImageWidth = patternRealImageWidth;
		patternImageHeight = patternRealImageHeight;
	}

	// Make the image of the card invisible
	PATTERN.style.visibility="visible";
	PATTERN.style.cursor="move";
	CARD.style.visibility="hidden";
	RESIZER.style.visibility="visible";

	// swap the card instructions
	demoInstructions.innerHTML=realInstructions;
	
	// Update new positions
	updatePositionAndSizes();
}