$(function() {

	window.workCb = function() {

		window.currentDisplay = -1;
		window.displays = [];

		var display = new Object();

//		display = new Object();
//		// Visere
//		display.bg = "#00aeef";
//		display.title = "visere";
//		display.objects = [ {
//			// Monitor
//			x : 0,
//			y : 0,
//			time : 0.9
//		}, {
//			// ipad
//			x : 288,
//			y : 115,
//			time : 1.1
//		}, {
//			// iphone
//			x : 220,
//			y : 250,
//			time : 1.0
//		}, {
//			// Text
//			x : 630,
//			y : 0,
//			time : 0.75
//		}, {
//			// button
//			x : 770,
//			y : 300,
//			time : 0.75
//
//		} ];
//		displays.push(display);
				
		// Unstuck
		display = new Object();
		display.bg = "#00aeef";
		display.invert = false;
		display.title = "unstuck";
		display.objects = [ {
			// ipad
			x : 0,
			y : 40,
			time : 1.0
		}, {
			// Text
			x : 550,
			y : 100,
			time : 0.75
		}, {
			// appstore
			x : 550,
			y : 315,
			time : 0.75

		} ];
		displays.push(display);
		
		// UP
		display = new Object();
		display.bg = "#00aeef";
		display.title = "up";
		display.objects = [ {
			// Hand
			x : 80,
			y : 0,
			time : 1.0
		}, {
			// Text
			x : 550,
			y : 185,
			time : 0.75
		}, {
			// appstore
			x : 550,
			y : 355,
			time : 0.75

		} ];
		displays.push(display);
		
		// Clibe
		display = new Object();
		display.bg = "#00aeef";
		display.invert = false;
		display.title = "clibe";
		display.objects = [ {
			// ipad1
			x : 340,
			y : 40,
			time : 0.9
		}, {
			// ipad 2
			x : 420,
			y : 0,
			time : 1.0
		}, {
			// Text
			x : 100,
			y : 150,
			time : 0.7
		}, {
			// Links
			x : 100,
			y : 340,
			time : 0.7

		} ];
		displays.push(display);
		
		// Lunatik
		display = new Object();
		display.bg = "#00aeef";
		display.title = "lunatik";
		display.objects = [ {
			// Monitor
			x : 0,
			y : 0,
			time : 1.0
		}, {
			// Text
			x : 650,
			y : 255,
			time : 0.75
		}, {
			// button
			x : 770,
			y : 300,
			time : 0.75

		} ];
		displays.push(display);



		// Courier
		display = new Object();
		display.bg = "#00aeef";
		display.invert = false;
		display.title = "courier";
		display.objects = [ {
			// Monitor
			x : 50,
			y : 0,
			time : 1.0
		}, {
			// Text
			x : 600,
			y : 225,
			time : 0.75
		}, {
			// button
			x : 770,
			y : 280,
			time : 0.75

		} ];
		displays.push(display);

		// Mindswarms
		display = new Object();
		display.bg = "#00aeef";
		display.title = "mindswarms";
		display.objects = [ {
			// Monitor
			x : 0,
			y : 0,
			time : 1.0
		}, {
			// Text
			x : 650,
			y : 255,
			time : 0.75
		}, {
			// button
			x : 770,
			y : 300,
			time : 0.75

		} ];
		displays.push(display);
		
		// Droid
		display = new Object();
		display.bg = "#00aeef";
		display.invert = false;
		display.title = "droid";
		display.objects = [ {
			// droid1
			x : 320,
			y : 0,
			time : 0.9
		}, {
			// droid2
			x : 450,
			y : 0,
			time : 1.0
		}, {
			// Text
			x : 100,
			y : 150,
			time : 0.7
		}, {
			// Links
			x : 150,
			y : 290,
			time : 0.7

		} ];
		displays.push(display);



		for (i = 0; i < displays.length; i++) {
//			$("#controls").append("<div data-displayid='" + i + "' class='button' style='left:" + (i + 1) * (940 / (displays.length + 1)) + "px;'></div>");
//			$("#controls").append("<div data-displayid='" + i + "' class='button' style='left:" + (i + 1) * (940 / (displays.length + 1)) + "px;'><div class='title'><span>" + displays[i].title + "</span></div></div>");
//			$title = $("#controls > div:last-child > .title"); 
//			$title.css({left: $title.width()/-2+3 + "px"});
		}

		for (di = 0; di < displays.length; di++) {
			for (oi = 0; oi < displays[di].objects.length; oi++) {
				$section = $("#display > section:nth-child(" + (di + 1) + ")");
				$obj = $section.find(">:nth-child(" + (oi + 1) + ")");
				$obj.css({
					"-webkit-transition" : "all " + displays[di].objects[oi].time + "s ease",
					"-moz-transition" : "all " + displays[di].objects[oi].time + "s ease",
					"transition" : "all " + displays[di].objects[oi].time + "s ease",
					"-ms-transition" : "all " + displays[di].objects[oi].time + "s ease"

				});
			}
		}

		$("#controls>.button").bind("click", function(e) {
			loadDisplay($(e.target).data("displayid"));
		});

		$("#leftArrow").bind("click", function() {
			loadDisplay(currentDisplay - 1);
		});

		$("#rightArrow").bind("click", function() {
			loadDisplay(currentDisplay + 1);
		});

		$("#display").swipe({
			swipe : function(event, direction) {
				if (direction == "left") {
					loadDisplay(currentDisplay + 1);
				} else if (direction == "right") {
					loadDisplay(currentDisplay - 1);
				}
			},
			allowPageScroll : "vertical"
		});

		setInterval(updateScreens, 3000);

		// loadDisplay(0);
	}

	
	//Prepare modal videos
	$(".modal").dialog({
		autoOpen: false,
		modal: true,
		resizable: false,
		width:890,
		position: ["center", 100]
	});
	$(".videoLink").bind("click", function(e){
		e.preventDefault();
		if($.browser.msie || navigator.userAgent.search("iPad") > -1){
			location.href = $("#videoModal_" + $(this).data("video")).find("iframe").attr("src");
		}else{
			$("#videoModal_" + $(this).data("video")).dialog("open");
		}
	});
	
	if(location.hash == "") location.hash = "#work0";
	workCb();
	var page = (location.hash).match(/\d+/)[0];
	loadDisplay(page);
});

function loadDisplay(i) {
	if (i == currentDisplay)
		return false;
	console.log("Loading work display " + i);
	$("body").css("background-color", displays[i].bg);
	if (displays[i].invert) {
		$("body,#controls,header > nav").addClass("invert");
	} else {
		$("body,#controls,header > nav").removeClass("invert");
	}
	$("#display > section.active").removeClass("active");
	$($("#display > section")[i]).addClass("active");

	for (di = 0; di < displays.length; di++) {
		$section = $("#display > section:nth-child(" + (di + 1) + ")");
		for (oi = 0; oi < displays[di].objects.length; oi++) {
			$obj = $section.find(">:nth-child(" + (oi + 1) + ")");

			if (di == i) {
				$obj.css({
					"-webkit-transition" : "all " + displays[di].objects[oi].time + "s 0.25s ease",
					"-moz-transition" : "all " + displays[di].objects[oi].time + "s 0.25s ease",
					"transition" : "all " + displays[di].objects[oi].time + "s 0.25s ease",
					"-ms-transition" : "all " + displays[di].objects[oi].time + "s 0.25s ease"

				});
			} else {
				$obj.css({
					"-webkit-transition" : "all 1.0s ease",
					"-moz-transition" : "all 1.0s ease",
					"transition" : "all 1.0s ease",
					"-ms-transition" : "all 1.0s ease"

				});
			}

			$obj.css({
				"-webkit-transform" : "translate3d(" + ((di - i) * 1000 + displays[di].objects[oi].x) + "px, " + displays[di].objects[oi].y + "px, 0)",
				"-moz-transform" : "translate(" + ((di - i) * 1000 + displays[di].objects[oi].x) + "px, " + displays[di].objects[oi].y + "px)",
				"transform" : "translate3d(" + ((di - i) * 1000 + displays[di].objects[oi].x) + "px, " + displays[di].objects[oi].y + "px, 0)",
				msTransform : "translate(" + ((di - i) * 1000 + displays[di].objects[oi].x) + "px, " + displays[di].objects[oi].y + "px)",

			});
		}
	}

	// var current = $("#display > section.active");
	// current.removeClass("active");
	// if (i < currentDisplay) {
	// for (j = currentDisplay; j > i; j--) {
	// $("#display" + j).removeClass("left");
	// $("#display" + j).addClass("right");
	// }
	// } else if (i > currentDisplay) {
	// for (j = currentDisplay; j < i; j++) {
	// $("#display" + j).removeClass("right");
	// $("#display" + j).addClass("left");
	// }
	// }
	// $("#display" + i + "").removeClass("left");
	// $("#display" + i + "").removeClass("right");
	// $("#display" + i + "").addClass("active");

	currentDisplay = parseInt(i);

	$("#controls>.button.selected").removeClass("selected");
	$($("#controls>.button")[i]).addClass("selected");

	$("#leftArrow").css({
		opacity : .75,
		"pointer-events" : "all"
	});
	$("#rightArrow").css({
		opacity : .75,
		"pointer-events" : "all"
	});
	if (i == 0) {
		$("#leftArrow").css({
			opacity : 0.25,
			"pointer-events" : "none"
		});
	}
	if (i == displays.length - 1) {
		$("#rightArrow").css({
			opacity : 0.25,
			"pointer-events" : "none"
		});
	}

	if ("#work" + currentDisplay != location.hash)
		location.hash = "work" + currentDisplay;
	
}

function updateScreens() {
	var $scrollers = $("#display section.active .scroller");
	$scrollers.each(function(index, scroller) {
		var $imgs = $(scroller).find(">img");
		for ( var i = 0; i < $imgs.length; i++) {
			$img = $($imgs[i]);
			if ($img.hasClass("visible")) {
				if (i < $imgs.length - 1) {
					$img.next().addClass("visible");
				} else {
					$($imgs[0]).addClass("visible");
				}
				$img.removeClass("visible");
				break;
			}
		}
	});
}