var numpics = 5;
var blockwidth = 300;
var unscaledleft =0;
var unscaledright = unscaledleft + (numpics * blockwidth);
var picsTop = 525;
var mousex = 0;
var mousey = 0;
var svgNS = "http://www.w3.org/2000/svg";
var xlinkNS = "http://www.w3.org/1999/xlink";
var index = -1;
var bigPicVisible = false;
var scalingDockDisplayed = false;
var bigMenu = false;
var timer;
var strings = ['>> TV', '>> Search', '>> My Movies', '>> My Music', '>> Internet'];

var pics = [];

function initApp(evt) {
	document.documentElement.setFocus(document.documentElement);
	initpoints();
	document.documentElement.addEventListener("keydown", keydown, false);
	timer = createTimer(50, 50);
	document.documentElement.addEventListener("SVGTimer", setpoints, false);
	document.documentElement.addEventListener("mousemove", mousemove, false);
	document.documentElement.addEventListener("click", mouseclick, false);
	
	//TEMPORARY BUG FIX
	try{
		getSVGViewerVersion;
		document.documentElement.addEventListener("SVGTimer", setpoints, false);
	}
	catch (ex){
		timer.addEventListener("SVGTimer", setpoints, false);
	}	
	timer.start();
}

function Pic(i) {
	this.initial = i * blockwidth + unscaledleft;
	this.position = i * blockwidth + unscaledleft;
	this.real = this.position;
	this.advance = blockwidth;

	var b = document.createElementNS(svgNS,"use");
	b.setAttributeNS(xlinkNS,"href","#u"+(i+1));
	b.setAttributeNS(null,"id","p"+(i+1));
	b.setAttributeNS(xlinkNS,"transform","matrix(" + 1 + "," + 0 + "," + i*blockwidth+unscaledleft + "," + 0 + "," + 1 + "," + picsTop + ")");
	
	this.pic = b;
	return this;
}

function mouseclick(evt)
{
	//trace('click '+focusedItem);
	if (focusedItem == 0) { //EPG
		window.location.assign('epgdemoactX.svg');
	}
	else if (focusedItem == 2) { //VOD
		window.location.assign('vodview.svg');
	}
	
}	

function initpoints() {
	for (i = 0; i <= numpics; i++) {
		var p = new Pic(i);
		pics.push(p);
		if (i != numpics) {
			/*var a = document.createElementNS(svgNS,"a");
			a.setAttributeNS(xlinkNS,"href","scriptmain.svg");
			a.appendChild(p.pic);
			document.getElementById("pics").appendChild(a);*/
			document.getElementById("pics").appendChild(p.pic);
		}
	}
}

	function calculatepositions() {
		var xTransform = 450;

		//very hardcoded ugly hack to set the active area :-(
		var x = (unscaledleft+xTransform) - 200;
		var y = (picsTop - blockwidth-blockwidth/4);

		if (mousex > x && mousex < (200+(unscaledleft+xTransform)+(unscaledright-unscaledleft)/2) && mousey > y && mousey < (y+ (blockwidth / 2))) 
		{
			offset = mousex - unscaledleft;
			totalwidth = 0;
			for (i=0; i < numpics; i++) {
				centreblock = pics[i].initial + blockwidth/2 - unscaledleft;
				distance = Math.abs(offset - centreblock);
				scale = 1;  
				if (distance < (blockwidth * 2)) {
					scale = 3 - (distance / blockwidth);
				}
				pics[i].advance = blockwidth * scale;
				totalwidth += blockwidth * scale;
			}

			offsetleftratio = offset / (unscaledright - unscaledleft);
			leftofmouse = totalwidth * offsetleftratio;
			currentpoint = mousex - leftofmouse;

			for (i=0; i < numpics; i++) {
				pics[i].position = currentpoint;
				currentpoint += pics[i].advance;
			}
			pics[numpics].position = currentpoint;
		
			if (mousey>150 && mousey < 300)
			{
				var prevItem = focusedItem;
				if (mousex>251 && mousex < 485) focusedItem = 0;
				else if (mousex >= 485 && mousex < 655) focusedItem = 1;
				else if (mousex >= 655 && mousex < 850) focusedItem = 2;
				else if (mousex >= 850 && mousex < 1069) focusedItem = 3;
				else if (mousex >= 1069 && mousex < 1390) focusedItem = 4;
				if (focusedItem >= 0 && prevItem != focusedItem) {
					document.getElementById("thetext").textContent = strings[focusedItem];
				}	
			}
		}	
		else 
		{
			for (i=0; i <= numpics; i++) {
				pics[i].position = pics[i].initial;
			}
			if (focusedItem != -1) {
				document.getElementById("thetext").textContent = '';
				focusedItem = -1;
			}	
		}
	}


var focusedItem = -1;
function mousemove(evt) {
	var cm = document.getElementById("bg").getScreenCTM();
	var scaleX = cm.getComponent(0);
	var scaleY = cm.getComponent(3);
	
	var tX = cm.getComponent(4);
	var tY = cm.getComponent(5);
	
		
	mousex = (evt.clientX)/scaleX -tX*(1/scaleX); 
	mousey = (evt.clientY)/scaleY -tY*(1/scaleY);

	 
	calculatepositions();
	if (!scalingDockDisplayed)
	{
		document.getElementById("subpics").setAttributeNS(null,"visibility","hidden");
		scalingDockDisplayed = true;
	}
}


function setpoints() {
	for (i=0; i <= numpics; i++) {
		var p = pics[i];
		if (Math.abs(p.real - p.position) > 1) {
			p.real = p.real + (p.position - p.real) / 3;
		}
		else {
			p.real = p.position;
		}
	}

	for (i=0; i <= numpics; i++) {
		if (i != numpics) {
			size = pics[i+1].real - pics[i].real;
			var x = pics[i].real;
			var y = picsTop - size/2;
			var scale = size/blockwidth;	
			pics[i].pic.setAttributeNS(null,"transform", "translate("+x+","+y+") scale("+scale+","+scale+")");
		}
	}
	if (document.getElementById("mainMenu").getAttributeNS(null, 'display') == 'none' ) {
		document.getElementById("mainMenu").setAttributeNS(null, 'display', 'inline');
	}	
}


function trace(text)
{
	document.getElementById("debug2").textContent = text;
}

function keydown(evt)
{
	var code;
	//TEMPORARY BUG FIX
	try{
		getSVGViewerVersion;
		code = evt.keyCode;
	}
	catch (ex){
		code = evt.keyIdentifier;
	}

	switch(code) {
		case 32:
		case "0":

		
		case 37:
		case "LEFT":
			//left:
			if (index < 0) index=numpics;
			index--;
			if (index < 0) index = -1;
			break;

		case 39:
		case "RIGHT":
			//right:
			index++;
			if (index >= numpics) index = -1;
			break;

		case 13:
		case 40:
		case "END":
			//key Enter or OK on remote:
			//trace('enter '+focusedItem);
			if (focusedItem == 0) { //EPG
				window.location.assign('epgdemoactX.svg');
			}
			break;

		case 70:
			//fullscreen
			toggle_fullscreen(evt);
			break;
		
		case 97:
		case "1":
		default:
			break;
	}
	mousex = 140+ index*blockwidth*0.8 + unscaledleft +blockwidth/2.7;
	mousey = (picsTop + blockwidth/4)/3;
	calculatepositions();

	if (!scalingDockDisplayed)
	{
		document.getElementById("subpics").setAttributeNS(null,"visibility","hidden");
		scalingDockDisplayed = true;
	}
}



function toggle_fullscreen(evt) {
	var svgroot = evt.target.ownerDocument.getElementById('root');
	var fullstate = svgroot.getAttribute('fullscreen');
	if (fullstate == null || fullstate == 'disable')
	{
		svgroot.setAttribute('fullscreen', 'fullscreen');
		set_pinned('fame_big');
		document.getElementById("maximize").setAttributeNS(null,"visibility","hidden");
		document.getElementById("minimize").setAttributeNS(null,"visibility","visible");			
	}
	else
	{
		svgroot.setAttribute('fullscreen', 'disable');
		unpin('fame_big');
		document.getElementById("maximize").setAttributeNS(null,"visibility","visible");
		document.getElementById("minimize").setAttributeNS(null,"visibility","hidden");
	}
}

function set_pinned(clip) {
	var video = document.getElementById(clip);
	video.setAttribute('transformBehavior', 'pinned');
	video.setFloatTrait('x', 800);
	video.setFloatTrait('y', 450);
}

function unpin(clip) {
	var video = document.getElementById(clip);
	video.setAttribute('transformBehavior', 'geometric');
	video.setFloatTrait('x', 0);
	video.setFloatTrait('y', 0);
}