/**
 * @author mathieuhamonic
 */

function $(id)
	{
		return document.getElementById(id);
	}
	
// info page

function flipToInfoPage()
	{
		$('body').className = 'flip-container';
		var button = $('infoButton');
		button.setAttribute("selected");
		var mainPage = $('mainPage');
		var infoPage = $('infoPage');
		mainPage.className = 'flip-left-old-view';
		infoPage.style.display = 'block';
		infoPage.className = 'flip-left-new-view';
		setTimeout(function()
					{
						mainPage.style.display = 'none';
					}, 300);
		setTimeout(function()
					{
						button.removeAttribute("selected");
					}, 600);
	}

function flipToMainPage()
	{
		var mainPage = $('mainPage');
		var infoPage = $('infoPage');
		infoPage.className = 'flip-right-old-view';
		mainPage.style.display = 'block';
		mainPage.className = 'flip-right-new-view';
		setTimeout(function()
					{
						infoPage.style.display = 'none';
					}, 800);
	}

// bandeau qui apparait

function show_bandeau()
	{
		var cat = $('bandeau_add');
		cat.id = 'bandeau_hidden';
		cat.style.display = 'inline';
		setTimeout(function ()
					{
						cat.id = 'bandeau_show';
					}, 900);
	}

function hide_bandeau()
	{
		var cat = $('bandeau_show');
		setTimeout(function ()
					{
						cat.id = 'bandeau_down';
					}, 300);
		setTimeout(function ()
					{
						cat.style.display = 'none';
						cat.id = 'bandeau_add';
					}, 2500);
	}

// change le contenu et la couleur du bandeau superieur

function find_which_link(id)
	{
		var c = $('contenu');
		if (id == "id5")
			{
				c.innerHTML = 'Aller sur YouVox Tech';
				c.style.background = 'url(./iui/images/listArrow.png) #4588B3 no-repeat right center';
			}
		else if (id == "id0")
			{
				c.innerHTML = 'Aller sur YouVox Voyage';
				c.style.background = 'url(./iui/images/listArrow.png) #D2BC06 no-repeat right center';
			}
		else if (id == "id1")
			{
				c.innerHTML = 'Aller sur YouVox Urban';
				c.style.background = 'url(./iui/images/listArrow.png) #E67D02 no-repeat right center';
			}
		else if (id == "id2")
			{
				c.innerHTML = 'Aller sur YouVox Cinema';
				c.style.background = 'url(./iui/images/listArrow.png) #B21A1A no-repeat right center';
			}
		else if (id == "id3")
			{
				c.innerHTML = 'Aller sur YouVox Avenir';
				c.style.background = 'url(./iui/images/listArrow.png) #46136A no-repeat right center';
			}
		else if (id == "id4")
			{
				c.innerHTML = 'Aller sur YouVox Game';
				c.style.background = 'url(./iui/images/listArrow.png) #267D3F no-repeat right center';
			}
	}

function go_to_link()
	{
		var link;
		var ok = 1;
		var c = $('contenu').innerHTML;
		if (c == "Aller sur YouVox Tech")
			link = 'tech';
		else if (c == "Aller sur YouVox Voyage")
			link = 'voyage';
		else if (c == "Aller sur YouVox Urban")
			link = 'urban';
		else if (c == "Aller sur YouVox Cinema")
			link = 'cinema';
		else if (c == "Aller sur YouVox Avenir")
			link = 'avenir';
		else if (c == "Aller sur YouVox Game")
			link = 'game';
		else
			{
				ok = 0;
				alert('Choisissez votre YouVox');
			}
		if (ok == 1)
			window.open('http://www.' + link + '.youvox.mobi');
	}

var zIndexCount = 1;
var moving = {};

function touchHandler(e) {
	if (e.type == "touchstart") {
		if(e.touches.length == 1) // si un seul doigt
			{
				var pagey = e.touches[0].pageY;
				var pagex = e.touches[0].pageX;
				if (pagey > 0 && pagey < 50) // si bandeau superieur
					go_to_link();
				if ((pagex >= 270 && pagex <= 310) && (pagey >= 370 && pagey <= 410) && ($('infoPage').style.display == 'none')) // infobutton
					setTimeout((flipToInfoPage()), 500);
				else if ((pagex >= 270 && pagex <= 310) && (pagey >= 370 && pagey <= 410) && ($('infoPage').style.display == 'block')) // backbutton
					setTimeout((flipToMainPage()), 500);
			}
		for (var i = 0; i < e.touches.length; i++) {
		    // for each "movable" touch event:
			if (e.touches[i].target.className == "movable") {
				var id = e.touches[i].identifier;
				// record initial data in the "moving" hash
				moving[id] = {
							identifier: id,
							target:   	e.touches[i].target,
							mouse:		{ x: e.touches[i].clientX, y: e.touches[i].clientY },
							position:	{ x: e.touches[i].target.xfmTX, y: e.touches[i].target.xfmTY },
							rotation: 	e.touches[i].target.xfmR,
							scale: 		e.touches[i].target.xfmS
						};
				// move to the front
				moving[id].target.style.zIndex = zIndexCount++;
				if(e.touches.length == 1) // change la couleur et le contenu du bandeau superieur
					{
						if (pagey > 50)
							find_which_link(moving[id].target.id);
					}
				// reset rotate/scale mode to off
				moving[id].rotateScaleMode = false;
				}
			}
		}
	else if (e.type == "touchmove") {
	    // if there are two touchs and both are on the *same* element, we're in rotate/scale mode
		if (e.touches.length == 2 && e.touches[0].target == e.touches[1].target) {
			var idA = e.touches[0].identifier,
				idB = e.touches[1].identifier;
			// if we've previously recorded initial rotate/scale mode data:
			if (moving[idA].rotateScaleMode && moving[idB].rotateScaleMode) {
			    // calculate translation, rotation, and scale
				moving[idA].target.xfmTX = ((moving[idA].positionCenter.x - moving[idA].mouseCenter.x) + ((e.touches[0].clientX + e.touches[1].clientX) / 2));
				moving[idA].target.xfmTY = ((moving[idA].positionCenter.y - moving[idA].mouseCenter.y) + ((e.touches[0].clientY + e.touches[1].clientY) / 2));
				moving[idA].target.xfmR = moving[idA].rotation + e.rotation;
				moving[idA].target.xfmS = moving[idA].scale * e.scale;
				updateTransform(moving[idA].target);
				}
			else {
				// set rotate/scale mode to on
				moving[idA].rotateScaleMode	= moving[idB].rotateScaleMode	= true;
				// record initial rotate/scale mode data
				moving[idA].mouseCenter		= moving[idB].mouseCenter		= {
					x: (e.touches[0].clientX + e.touches[1].clientX) / 2,
					y: (e.touches[0].clientY + e.touches[1].clientY) / 2,
					}
				moving[idA].positionCenter	= moving[idB].positionCenter	= {
					x: moving[idA].target.xfmTX,
					y: moving[idA].target.xfmTY
					}
				}
			}
		else {
			for (var i = 0; i < e.touches.length; i++) {
				var id = e.touches[i].identifier;
				// for each touch event:
				if (moving[id]) {
					// reset rotate/scale mode to off
					moving[id].rotateScaleMode = false;
					// calculate translation, leave rotation and scale alone
					moving[id].target.xfmTX = ((moving[id].position.x - moving[id].mouse.x) + e.touches[i].clientX);
					moving[id].target.xfmTY = ((moving[id].position.y - moving[id].mouse.y) + e.touches[i].clientY);
					updateTransform(moving[id].target);
					}
				}
			}
		}
	else if (e.type == "touchend" || e.type == "touchcancel") {
		// clear each from the "moving" hash
		for (var i = 0; i < e.touches.length; i++)
			delete moving[e.touches[i].identifier];
			}
		e.preventDefault();
}

// set the transform style property based on xfm element properties
function updateTransform(element) {
	element.style['-webkit-transform'] =
		'translate('+element.xfmTX+'px,'+element.xfmTY+'px) '+
		'scale('+element.xfmS+') '+
		'rotate('+element.xfmR+'deg)';
}

function init() {
	// touch event listeners
	document.addEventListener("touchstart", touchHandler, false);
	document.addEventListener("touchmove", touchHandler, false);
	document.addEventListener("touchend", touchHandler, false);
	document.addEventListener("touchcancel", touchHandler, false);
	// place les image sur l'ecran
	var x = -70;
	var y = 30;
	for (var i = 0; i < 6; i++)
		{
			if (x > 190)
				{
					x = 10;
					y += 80;
				}
			var img = $('id' + i);
			img.xfmTX = x;
			img.xfmTY = y;
			img.xfmR = Math.random()*180-90;
			img.xfmS = Math.random()/4+0.5;
			updateTransform(img);
			x += 120;
		}
}

function updateOrientation()
	{
		switch(window.orientation)
			{
				case 0:
					$('landscape_mode').style.display = "none";
					$('body').style.display = "block";
				break;
				case -90:
				case 90:
					$('img_landscape').style.height = '215px';
					$('landscape_mode').style.width = '480px';
					$('landscape_mode').style.height = '268px';
					$('body').style.display = "none";
					$('landscape_mode').style.display = "block";
				break;
			}
		scrollTo(0, -9000);
		setTimeout(scrollTo, 100, 0, 1);
	}