function RegisterEvent(element, eventName, callback)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
    return;
  if(element.addEventListener)
    element.addEventListener(eventName, callback, false);
  else if(element.attachEvent)
    element.attachEvent("on" + eventName, callback);
}

function DropEvent(element, eventName, callback)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
    return;
  if(element.removeEventListener)
    element.removeEventListener(eventName, callback, false);
  else if(element.detachEvent)
    element.detachEvent("on" + eventName, callback);
}

var drag=0;
var dragx = 0;
var dragy = 0;
var destinationx = 0;
var destinationy = 0;
var animateobject = "";
var id;
var empty = 0;
var full = 1;
var anim = 0;
var moves=0;
var won = false;

//types 1=vertical double; 2=horiz triple; 3=vert triple; 4=horiz dble
var startpos = [10,0,1,90,0,2,410,0,3,170,80,3,250,80,1,10,160,4,250,240,1,330,240,4,90,320,4,330,320,1,90,400,2];
var piececoords = new Array(11);
for (i=0; i <11; i++)
{
	piececoords[i]=new Array(3);
}
var board = [1,1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,0,1,0,0,1,1,1,1,0,1,1,1,1,0,0,1,1,1,1,0];
var testfree = [];
var willvacate = [];
var xoffset = 10;
var yoffset = 100;

for (loop=0;loop<11;loop++)
{   //setup the playing pieces: pc [0] = x coord; [1] = y coord
	piececoords[loop][0]=startpos[loop*3]+xoffset;
	piececoords[loop][1]=startpos[(loop*3)+1]+yoffset;
	piececoords[loop][2]=startpos[(loop*3)+2];
	
}

function setupgame() {
	for (loop=0;loop<11;loop++) {
		RegisterEvent(document.getElementById("block"+loop), "click", dragstart);
	}
	RegisterEvent(document.getElementById("help"), "mouseover", setvisible);
	RegisterEvent(document.getElementById("help"), "mouseout", setinvisible);
	setTimeout(animatebg,200);
}

function setvisible() {
	document.getElementById("instructions").style.visibility = "visible";
}
function setinvisible() {
	document.getElementById("instructions").style.visibility = "hidden";
}


function animatebg() {
	anim++;
	if (anim == 9) {anim = 0;}
	document.getElementById("piece5").style.backgroundPosition = "0px "+(anim*-85)+"px";
	if (!won)	{	setTimeout(animatebg,200); }
}

function dragstop(e) {
	if (drag && !animationcount) { drag=false; }
}

function dragstart(e) {
	if(e.preventDefault)	{ e.preventDefault(); }
	if (drag) {return; } //already moving
	animateobject = this.id.substr(5)
	//animateobject = getEventTarget(e);
	//animateobject = animateobject.id.substr(5);
	id = document.getElementById("block"+animateobject);
	shapetype = startpos[(animateobject*3)+2];
	if (shapetype==1 || shapetype==3) 
	{ 	dimension = 120; }	else {dimension = 80;}
	
	dragx = mouseX(e)-(document.getElementById("Master").offsetLeft+id.offsetLeft);
	dragy = mouseY(e)-(210+id.offsetTop);
		
	//these hold the mouse position within the shape
	if (shapetype==1 || shapetype==3) 
	{ //vertical shape
		if (dragy < dimension) 
		{ direction = "north"; }
		else
		{ direction = "south"; }
	}
	else
	{
		if (dragx < dimension)
		{ direction = "west"; }
		else
		{ direction = "east"; }
	}
	blocked = false;
	
	willvacate = [];
	testfree= [];
	topsquare = Math.floor((id.offsetLeft-10)/80)+(Math.floor((id.offsetTop-100)/80)*6);
			
	if(direction == "east") { 
		switch (shapetype) {
			case 1: blocked=true;
					break;
			case 2: if (topsquare-(Math.floor(topsquare/6)*6)==3)
					{	blocked = true;	}	
					else
					{	willvacate.push(topsquare); 
						testfree.push(topsquare+3);
					}
					break;
			case 3: blocked=true;
					break;
			case 4: if (topsquare-(Math.floor(topsquare/6)*6)==4)
					{	blocked = true; }
					else
					{	willvacate.push(topsquare); 
						testfree.push(topsquare+2);
					}
					break;
		}
	} 
	 
	if(direction == "west") { 
		if (topsquare-(Math.floor(topsquare/6)*6)==0) 
		{	blocked = true;	}
		else
		{
			switch (shapetype) {
				case 1: 	blocked=true;
							break;
				case 2: 	willvacate.push(topsquare+2); 
							testfree.push(topsquare-1);
							break;
				case 3: 	blocked=true;
							break;
				case 4: 	willvacate.push(topsquare+1); 
							testfree.push(topsquare-1);
							break;
			}
		}
	}
	 
	if (direction == "north") {
		if (topsquare<6) 
		{	blocked=true; }
		else
		{
			switch (shapetype) {
				case 1: 	willvacate.push(topsquare+6);  
							testfree.push(topsquare-6);
							break;
				case 2: 	blocked=true;
							break;
				case 3: 	willvacate.push(topsquare+12); 
							testfree.push(topsquare-6); 
							break;
				case 4: 	blocked=true;
							break;
			}					
		}
	}
	
	if (direction == "south") {
		switch (shapetype) {
			case 1: if (topsquare>23) 
					{	blocked = true;	}
					else
					{	willvacate.push(topsquare); 
						testfree.push(topsquare+12); 
					}
					break;
			case 2: blocked=true;
					break;
			case 3: if (topsquare>17)
					{	blocked=true; }
					else
					{	willvacate.push(topsquare);  
						testfree.push(topsquare+18); 
					}
					break;
			case 4: blocked=true;
					break;
		}
	}
	
	if (!blocked) {
		//test the required squares are free
		for (loop=0;loop<testfree.length;loop++) {
			if (board[testfree[loop]]) { blocked = true; }
		}
		if (!blocked) {
			while (willvacate.length) {
				board[willvacate.pop()] = empty;
				board[testfree.pop()] = full;
			}
			moves++;
			if (moves==1) { document.getElementById("movescounter").style.visibility = "visible"; }
			document.getElementById("movescounter").innerHTML = moves;
			animate();
		}
	}
}

function animate() {
	drag=true;
	switch (direction) {
		case "east": 
			piececoords[animateobject][0]+=80;
			var xp = id.offsetLeft;
			ease("block"+animateobject, "ou2|xpos|"+xp+"|"+(xp+80), 10,0,animdone, null);
			//id.style.left=piececoords[animateobject][0]+"px";
			break;
		case "west":
			var xp = id.offsetLeft;
			piececoords[animateobject][0]-=80;
			ease("block"+animateobject, "ou2|xpos|"+xp+"|"+(xp-80), 10,0,animdone, null);
			break;
		case "north":
			piececoords[animateobject][1]-=80;
			var yp = id.offsetTop;
			ease("block"+animateobject, "ou2|ypos|"+yp+"|"+(yp-80), 10,0,animdone, null);
			break;
		case "south":
			piececoords[animateobject][1]+=80;
			var yp = id.offsetTop;
			ease("block"+animateobject, "ou2|ypos|"+yp+"|"+(yp+80), 10,0,animdone, null);
			break;
	}
}
	
function animdone() {
	drag=0;
	if (document.getElementById("block5").offsetLeft > 320)
	{ success(); }
}	

function success() {
	for (loop=0;loop<11;loop++) {
		DropEvent(document.getElementById("block"+loop), "click", dragstart);
	}
	var xp =document.getElementById("block5").offsetLeft;
	var xp2=document.getElementById("winningblock").offsetLeft;
	ease("block5", "io2|xpos|"+xp+"|"+(xp+180), 50,0,null, null);
	ease("winningblock", "io2|xpos|"+xp2+"|"+(xp2+180), 50,0,animatewinner, null);
}

function animatewinner() {
	won = true; 
	document.getElementById("winningtext").innerHTML = "Well done! You completed the game in "+moves+" moves.  <p>But you can release your website in just one!</p><p>See <a href='/services.php'>the range of services</a> we offer or <a href='/contactpage.php'>get in touch</a> and tell us how we can help you.</p>";
	document.getElementById("bottomnote").style.visibility='hidden';
	document.getElementById("winnote").style.visibility='visible';
}

function mouseX(evt) {
	if (evt.pageX) return evt.pageX;
	else if (evt.clientX)
	   return evt.clientX + (document.documentElement.scrollLeft ?
	   document.documentElement.scrollLeft :
	   document.body.scrollLeft);
	else return null;
}
function mouseY(evt) {
	if (evt.pageY) return evt.pageY;
	else if (evt.clientY)
	   return evt.clientY + (document.documentElement.scrollTop ?
	   document.documentElement.scrollTop :
	   document.body.scrollTop);
	else return null;
}


function cancelevent(e)
{
  if(!e)
    e = window.event;
  if(e.stopPropagation)
    e.stopPropagation();
  if(e.preventDefault)
    e.preventDefault();
  e.cancelBubble = true;
  e.cancel = true;
  e.returnValue = false;
  return false;
}

function WhatEvent(evt)
{
  if(!evt)
    return window.event
  return evt;
}

function getXMLHTTPRequest() {
	var req=false;
	try {
		req = new XMLHttpRequest();
	} 	catch(err1) {
	  	try {
			req = new ActiveXObject("Msxml2.XMLHTTP");
			}	catch(err2) {
				try {
				req = new ActiveXObject("Microsoft.XMLHTTP");
				}	catch(err3) {
					req = false;
					alert("failed");
				}
			}
	}
	return req;
}
var http = getXMLHTTPRequest();

function ValidateFields() 
{
	errorvalue=0;
	if (document.getElementById("contact1").value == "" || document.getElementById("contact3").value == "" || document.getElementById("contact4").value == "" || document.getElementById("contact5").value == "" || document.getElementById("contact7").value == "") 
	{
		document.getElementById("validationresult").style.backgroundImage = "url(/SiteImages/validationresult.png)";
		document.getElementById("validationresult").style.backgroundPosition = "0 0";
		return;
	}
	if (!document.getElementById("contact1").value.match("^[A-Za-z-. ]*$")) { errorvalue = 2; }
	if (!document.getElementById("contact3").value.match("^[A-Za-z0-9-._@ ]*$")) { errorvalue = 2; }
	if (!document.getElementById("contact4").value.match("^[0-9-() ]*$")) { errorvalue = 2; }
	
	if (errorvalue == 2) {
		document.getElementById("validationresult").style.backgroundImage = "url(/SiteImages/validationresult.png)";
		document.getElementById("validationresult").style.backgroundPosition = "0 -68px"; //invalid data
		return;
	}

	var poststr = 	"ContactName=" + encodeURIComponent( document.getElementById("contact1").value) +
					"&ContactOrganisation=" + encodeURIComponent( document.getElementById("contact2").value) +
                  	"&ContactEmail=" + encodeURIComponent( document.getElementById("contact3").value) +
                  	"&ContactPhone=" + encodeURIComponent( document.getElementById("contact4").value) +
                  	"&ContactService=" + encodeURIComponent( document.getElementById("contact5").value) +
                  	"&ContactBudget=" + encodeURIComponent( document.getElementById("contact6").value) +
                  	"&ContactInfo=" + encodeURIComponent( document.getElementById("contact7").value);
    
	document.getElementById("validationresult").style.backgroundImage = "url(/SiteImages/validationresult.png)";
	document.getElementById("validationresult").style.backgroundPosition = "0 -102px";  //show 'transmitting'
	
	http.open('POST', 'postenquiry.php', true);
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", poststr.length);
    http.setRequestHeader("Connection", "close");
   	document.getElementById("leftdataentry").disabled = true;

	http.onreadystatechange = function() {
	     if (http.readyState == 4) {
    	    if (http.status == 200) {
				if (http.responseText == "success") 
				{
					document.getElementById("validationresult").style.backgroundImage = "url(/SiteImages/validationresult.png)";
					document.getElementById("validationresult").style.backgroundPosition = "0 -34px";  //show 'success'
					document.getElementById("leftdataentry").disabled = false;
					document.getElementById("contact1").value = "";
					document.getElementById("contact2").value = "";
					document.getElementById("contact3").value = "";
					document.getElementById("contact4").value = "";
					document.getElementById("contact5").value = "";
					document.getElementById("contact6").value = "";
					document.getElementById("contact7").value = "";
					
				} 	
				else
				{
					document.getElementById("validationresult").style.backgroundImage = "url(/SiteImages/validationresult.png)";
					document.getElementById("validationresult").style.backgroundPosition = "0 -136px";  //show 'failed'
					document.getElementById("leftdataentry").disabled = false;
				}
			} 
			else 
			{
            	document.getElementById("validationresult").style.backgroundImage = "url(/SiteImages/validationresult.png)";
				document.getElementById("validationresult").style.backgroundPosition = "0 -136px";  //show 'failed'
				document.getElementById("leftdataentry").disabled = false;
			}
      	}
	}	
	
	http.send(poststr);
}

function setup()
{
	img1 = new Image();
	img1.src = "/SiteImages/textareaboxsolid.png";
	img2 = new Image();
	img2.src = "/SiteImages/textentryboxsolid.png";
	
	for (loop=1; loop<8;loop++) {
		el = document.getElementById("text"+loop);
		tb = document.getElementById("contact"+loop);
		RegisterEvent(el, "mouseover", highlight);
		RegisterEvent(el, "mouseout", dim);
		RegisterEvent(el, "click", highlight);
		RegisterEvent(tb, "focus", highlight);
		RegisterEvent(tb, "blur", dim);
	}
}

function getEventTarget(e)
{
  if(!e)
    e = window.event;
  if(e.target)
    return e.target;
  return e.srcElement;
}

function highlight(e) 
{
	target = getEventTarget(e);
	
	if (target.id.substr(0,4)=='cont') {
		//must reference the outer box not the text box
		target.focus();
		target = document.getElementById(target.id.replace("contact", "text"));
	}
	else {
		document.getElementById(target.id.replace("text", "contact")).focus();
	}
	
	if (target.className != "textentrylit" && target.className != "textareaboxlit") {
		if (target.className == "textentry")	{
			target.className = "textentrylit";
		}
		else {
			target.className = "textareaboxlit" ;
		}
	}
	if (document.getElementById("validationresult").style.backgroundImage != "none") 
	{
		document.getElementById("validationresult").style.backgroundImage = "none";
	}
	cancelevent(e);
	return false;
}

function dim(e) 
{
	target = getEventTarget(e);
	if (target.id.substr(0,4)=='cont') {
		//must reference the outer box not the text box
		target = document.getElementById(target.id.replace("contact", "text"));
	}
	if (target.className != "textentry" && target.className != "textareabox") {
		if (target.className == "textentrylit")	{
			target.className = "textentry";
		}
		else {
			target.className = "textareabox" ;
		}
	}
	cancelevent(e);
	return false;
}

function SetOpacity(elem, opacityAsInt) {
	var opacityAsDecimal = opacityAsInt;
    
    if (opacityAsInt > 100) { 
		opacityAsInt = opacityAsDecimal = 100;  }
    else {
		if (opacityAsInt < 0) {
        	opacityAsInt = opacityAsDecimal = 0; 
		}
	}		
    opacityAsDecimal /= 100;
    if (opacityAsInt < 1) {opacityAsInt = 1; }// IE7 bug, text smoothing cuts out if 0
    
    elem.style.opacity = (opacityAsDecimal);
    elem.style.filter  = "alpha(opacity=" + opacityAsInt + ")";
}

function FadeOpacity(elemId, fromOpacity, toOpacity, fps) {
     var steps = Math.ceil(fps);
     var delta = (toOpacity - fromOpacity) / steps;
     FadeOpacityStep(elemId, 0, steps, fromOpacity, delta, (1000 / steps));
}

function FadeOpacityStep(elemId, stepNum, steps, fromOpacity, delta, timePerStep) {

	SetOpacity(document.getElementById(elemId), Math.round(parseInt(fromOpacity) + (delta * stepNum)));

    if (stepNum < steps) {
        setTimeout("FadeOpacityStep('" + elemId + "', " + (stepNum+1) + ", " + steps + ", " + fromOpacity + ", " + delta + ", " + timePerStep + ");", timePerStep);}
	else //finished animating
		{ 
		//alert("fadedout");
		getthenextaction();
	}
}

var animstage =1;
var fadeoutpage;
var fadeinpage;
var selectedexample = 'SiteEg1';
var currentpage=1;
var manleftpos =1100;
//setTimeout("moveman();", 100);

//function moveman() {
//	document.getElementById("Walker").style.left = manleftpos + "px";
//	manleftpos --;
//	setTimeout("moveman();", 100);
//}

function switchpage(page) {
	if (page==currentpage) { return; }
	
	if (page==1) {
		document.getElementById("p1").className = "plit";
		document.getElementById("p2").className = "pdim";
		currentpage = 1;
		document.getElementById("selectset1").style.display='block';
		document.getElementById("selectset2").style.display='none';
		switchexample("SiteEg1");
	}
	else {
		document.getElementById("p2").className = "plit";
		document.getElementById("p1").className = "pdim";
		currentpage = 2;
		document.getElementById("selectset2").style.display='block';
		document.getElementById("selectset1").style.display='none';
		switchexample("SiteEg4");
	}
}
		


function switchexample(switchto) {
	if (switchto == selectedexample) {return;}
	
	if (selectedexample != 'none') {
		document.getElementById(selectedexample + 'top').className = "siteinstancetopdim";
		document.getElementById(selectedexample + 'mid').className = "siteinstancemiddim";
		document.getElementById(selectedexample + 'bottom').className = "siteinstancebottomdim";
		document.getElementById(selectedexample + 'image').className = "siteselectordim";
	}
	selectedexample = switchto;
	document.getElementById(selectedexample + 'top').className = "siteinstancetoplit";
	document.getElementById(selectedexample + 'mid').className = "siteinstancemidlit";
	document.getElementById(selectedexample + 'bottom').className = "siteinstancebottomlit";
	document.getElementById(selectedexample + 'image').className = "siteselectorlit";
	
	for (loop=1;loop<7;loop++)
	{
		if (switchto == 'SiteEg'+loop) {
			document.getElementById("page"+loop).style.display = 'block';
		}
		else
		{
			document.getElementById("page"+loop).style.display = 'none';
		}
	}
}

function getthenextaction() {
	if (animstage ==1) {
		//finished fading out the first screen
		animstage =2;
		document.getElementById(fadeoutpage).style.visibility = 'hidden';
		//alert(document.getElementById(fadeoutpage).style.visibility);
		document.getElementById(fadeoutpage).style.top = '2000px';
		SetOpacity(document.getElementById(fadeinpage),0);
		document.getElementById(fadeinpage).style.top = '20px';
		document.getElementById(fadeinpage).style.visibility = 'visible';
		FadeOpacity(fadeinpage, 0,100,40);
	}
	else {
		animstage = 1;
	}
}

function switchscreen(frompage, topage) {
	//set the visibility property to invisible after fadeout; set the new opacity to 0 and visibility to visible
	fadeoutpage = frompage;
	fadeinpage= topage;
	FadeOpacity(fadeoutpage, 100,0,40);
}

function ease(object, parameterset, frames, frameno, oncomplete, framearray) {
	//document.getElementById("gohome").innerHTML = firstvis;
	var multiplier;
	var obj=document.getElementById(object).style;
	
	var pset = parameterset.split("|");
	var type, style, p1, p2, pi1, pi2;
	while (pset.length) {
		type = pset.shift();
		style = pset.shift();
		p1 = pset.shift();
		p2 = pset.shift();
		pi1 = parseInt(p1);
		pi2 = parseInt(p2);
		
		var power = parseInt(type.substr(2,1));
		switch (type.substr(0,2)) {
			case "in"  :	multiplier = Math.pow(frameno/frames,power); break;
			case "li"  :  	multiplier = frameno/frames; break;
			case "ou"  :	multiplier = 1-(Math.pow((frames-frameno)/frames,power)); break;
			case "io"  :	if (frameno < (frames/2)) {
								multiplier = Math.pow((frameno*2)/frames,power)/2;
							}
							else {
								multiplier = 1-(Math.pow((frames-frameno)*2/frames,power)/2);
							}
							break;
			case "ib"  :	if (power==1) {
								if (frameno < (frames*0.75)) {
									multiplier = 1-(Math.abs(Math.cos(Math.PI*2*frameno*(1/(4*frames*0.75)))));
								}
								else {
									multiplier = 1-(0.1*Math.abs(Math.sin(Math.PI*2*(1/(4*frames*0.75))*(frameno-(frames*0.75))*6)));
								}
							}
							else {
								if (frameno < (frames*0.625)) {
									multiplier = 1-(Math.abs(Math.cos(Math.PI*2*frameno*(1/(4*frames*0.625)))));
								}
								else {
									if (frameno < (frames*0.875)) {
										multiplier = 1-(0.3*Math.abs(Math.sin(Math.PI*2*(1/(4*frames*0.625))*(frameno-(frames*0.625))*5)));
									}
									else {
										multiplier = 1-(0.1*Math.abs(Math.sin(Math.PI*2*(1/(4*frames*0.625))*(frameno-(frames*0.875))*10)));
									}
								}
							}
							break;
		}

		switch (style) {	
			case "opacity": SetOpacity(obj, pi1+((pi2-pi1)*multiplier)); break;
			case "height" :	obj.height = Math.ceil(pi1+((pi2-pi1)*multiplier))+"px"; break;
			case "width"  :	obj.width = Math.ceil(pi1+((pi2-pi1)*multiplier))+"px"; break;
			case "xpos"   :	obj.left = Math.ceil(pi1+((pi2-pi1)*multiplier))+"px"; break;
			case "ypos"   :	obj.top = Math.ceil(pi1+((pi2-pi1)*multiplier))+"px"; break;
			case "carousel":angle = Math.ceil(pi1+((pi2-pi1)*multiplier));
							moveimg();
							break;
			case "bgcol"  : 
			case "border" : //colour numbers supplied are original and target rather than delta
							//pbits[2] = original colour; pbits[3] = target colour
							var c1= parseInt(p1.substr(0,2),16);
							var c2= parseInt(p1.substr(2,2),16);
							var c3= parseInt(p1.substr(4,2),16);
							var t1= parseInt(p2.substr(0,2),16);
							var t2= parseInt(p2.substr(2,2),16);
							var t3= parseInt(p2.substr(4,2),16);
							var o1= Math.ceil(c1+((t1-c1)*multiplier));
							var o2= Math.ceil(c2+((t2-c2)*multiplier));
							var o3= Math.ceil(c3+((t3-c3)*multiplier));
							o1 = o1.toString(16);
							if (o1.length==1) { o1="0"+o1; }
							o2 = o2.toString(16);
							if (o2.length==1) { o2="0"+o2; }
							o3 = o3.toString(16);
							if (o3.length==1) { o3="0"+o3; }
							var res = o1+o2+o3;
							if (style=='border') {
								obj.border = "3px solid #"+res;
							}
							else {
								obj.backgroundColor = "#"+res;
							}
							break;
			case "bgpos"  :	var opos = p1.split("%");
							var npos = p2.split("%");
							var xdelta = Math.ceil(parseInt(opos[0])+((parseInt(npos[0])-parseInt(opos[0]))/frames)*frameno*multiplier);
							var ydelta = Math.ceil(parseInt(opos[1])+((parseInt(npos[1])-parseInt(opos[1]))/frames)*frameno*multiplier);
							obj.backgroundPosition = xdelta+"px "+ydelta+"px";
							break;
		}
	}
	
	if (framearray) {	//framearray = string of %framenumber% 
		if (framearray.match("%"+frameno+"%")) {
			oncomplete(object, frameno);
		}
	}
	
	if (frames>frameno) {
		frameno++;
		window["tmr"+object]=setTimeout("ease('"+object+"','"+parameterset+"',"+frames+","+frameno+","+oncomplete+","+framearray+");", 40);
	}
	else {
		if (oncomplete) {
			oncomplete(object, "completed");
		}
	}
}

function SetOpacity(elem, oI) {
	var oD = oI/100;
    if (oI < 1) {oI = 1; }
    elem.opacity = (oD);
    elem.filter  = "alpha(opacity=" + oI + ")";
}