var currentScreen = "1";
var nextScreen = "2";
var timer;

var screenArray = new Array();
screenArray[1] = "40";
screenArray[2] = "167";
screenArray[3] = "294";

$(document).ready(function() {

	var badBrowser = (/MSIE ((5\.5)|6)/.test(navigator.userAgent) && navigator.platform == "Win32");
   	if (badBrowser) {
    	// update all pngs on page to show transparent background in ie6 and below.
    	$('#feedbackButton, #tsandcsButton, #privacyButton, #copyright, #logoIndex, #indexBadge, #topLeft, #bottomLeft, #bottomRight, #pointer').ifixpng();
   }

	// timer = setTimeout("transition(" + currentScreen + ", " + nextScreen +" , " + screenArray[nextScreen] + ")", 20000);

   	$('#createInput').alphanumeric({allow: " "});

	$("#createInput").click(function(){
		
		$("#errorPop").animate({ "opacity": "0" }, 300);		
		if($(this).val() == "Your Room Name")
		{
			$(this).val("");
		}
	});
	
	$("#thumb4").mouseover(function(){

		$("#thumb5").animate({ "opacity": "show" }, 300);
	
	});

	$("#thumb5").mouseout(function(){

		$("#thumb5").animate({ "opacity": "hide" }, 300);
	
	});
	
	$("#thumb5").click(function(){
		createClick("SAME");
	});
	
	$(".screenshot").click(function(){
		createClick("SAME");
	});

	$("#createInput").blur(function(){
		if($(this).val() == "")
		{
			$(this).val("Your Room Name");
		}	
	});
	
	$("#createGo").click(function(){
		newguid = jsguid();
		var roomname = $("#createInput").val();
		if ((roomname.length == 0) || (roomname == "Your Room Name"))
		{
			$("#errorPop").animate({ "opacity": "0.8" }, 300);
		}
		else
		{
			$.post('create.php', {roomName: roomname, joinGUID: newguid}, function(){
				window.location="chatroom.php?GUID=" + newguid;
			});
		}	
	});
	
	$(".thumbButton").click(function(){
		var clickName = $(this).attr("id").substr(5, 1);
		var pointerLocation = screenArray[clickName];
		transition(currentScreen, clickName, pointerLocation);
	});
});

	function transition(from, to, pointer)
	{
		clearTimeout(timer);
		$("#screen" + from).animate({ "opacity": "hide" }, 300, function(){
			$("#screen" + to).animate({ "opacity": "show" }, 300);		
		});
		$("#pointer").animate({ "left": pointer}, 300);
		currentScreen = to;
		if (to == "3")
		{
			nextScreen = 1;	
		} else {
			nextScreen = parseFloat(to) + 1;		
		}
		
		timer = setTimeout("transition(" + currentScreen + ", " + nextScreen +" , " + screenArray[nextScreen] + ")", 20000);
	}