google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1");

function OnLoad(){
	initMapUI();
	initOpenLayers();
	
	initUI();
	initUIElements();
	setInterval ( tick, 5000 );
	showVideo();
	
}
var showingMessage = false;
var chatOpen = false;
var missionOpen = false;
var challengesOpen = false;
var gawkOpen = false;
var playerScore = 0;
function tick() {
	playerScore += Math.floor(Math.random()*21)
	setScore(playerScore);
	//console.log("tick");
	if(!(showingMessage)) {
		//showMessage("Complete the Jamaica Pond Mission!");
		//showingMessage = true;
	}
}

function setScore(score) {
	score = score.toString();
	if(score.length < 4) {
		difference = 4 - score.length;
		for (i=0; i < difference; i++)
		{
		    score = "0"+score;
		}
	}
	scoreset = score.split("");
	for ( var i in scoreset )
	{
		count = Number(i) + 1;
		select = "#score"+count;
		$(select).attr("class", "s"+scoreset[i]);
	}
}
function showMessage(str) {
	var contentstring = str;
	$("#messagescreen").css("display", "block");
	  $("#messagescreen").animate({ 
        opacity: "0.8",
      }, 1500, "linear", function callback() { $("#message-object").css("display", "block"); $("#message-object p").html(contentstring);} );
}
function showVideo() {
		  $("#messagescreen").css("display", "block");
		  $("#messagescreen").animate({ 
	        opacity: "0.8",
	      }, 1500, "linear", function callback() { $("#video-object").css("display", "block"); } );
}

function showMissionScreen(bool) {
	if(bool) {
		$("#missionscreen").css("display", "block");
		$("#close-screen-button").css("display", "block");
		
	}
	else {
		$("#missionscreen").css("display", "none");
		$("#close-screen-button").css("display", "none");
		
	}
		
}

function showChallengeScreen() {
	
}
function initMapUI() {
	$("#wrapper").css("height", $(window).height());
	var half = $(window).width();
	half = half / 2;
	var negativehalf = half * (-1);
	$(".playground div").css("height", $(window).width());
	$(".playground div").css("width", $(window).width());
	$(".playground").css("top", -1*$(window).width()/4);
	
	$("#grid").css("height", $(window).width() + 20);
	$("#grid").css("width", $(window).width() + 20);
	
	$(".playground div").css("width", $(window).width());
	
	$("#missionscreen").css("height", $(window).height());
	$("#missionscreen").css("width", $(window).width());
	
    
}


function sizeWindow() {
	$("#wrapper").css("height", $(window).height());
	var half = $(window).width();
	half = half / 2;
	var negativehalf = half * (-1);
	$(".playground div").css("height", $(window).width());
	$(".playground div").css("width", $(window).width());
	$(".playground").css("top", -1*$(window).width()/4);
	
	$("#grid").css("height", $(window).width() + 20);
	$("#grid").css("width", $(window).width() + 20);
	
	$(".playground div").css("width", $(window).width());
	
	$("#missionscreen").css("height", $(window).height());
	$("#missionscreen").css("width", $(window).width());
}
function initUI() {
	$(window).resize(function () { 
		sizeWindow();
	});
	$("#close-video-button").click(function() { 
		$("#messagescreen").css("display", "none");
		$("#messagescreen").css("opacity", "0.0");
		$("#video-object").css("display", "none"); });
		
	$("#close-screen-button").click(function() { 
			$("#missionscreen").css("display", "none");
			$("#challengescreen").css("display", "none");
			$("#gawkscreen").css("display", "none"); 
			$("#close-screen-button").css("display", "none"); 
			
			});
	$("#show-mission-link").click(function() {
		showMissionScreen(true);
		event.stopPropagation()
		
	});
	$("#challengesbox li").click(function() {
		showMissionScreen(true);
		event.stopPropagation()
		
	});
	$("#missionbox").click(function() {
	      if(!(missionOpen)) {		
			  $("#missionbox").animate({ 
		        height: "530px",
		      }, 500 );
			missionOpen = true;
			}  
	      else {		
			  $("#missionbox").animate({ 
		        height: "100px",
		      }, 100 );
			missionOpen = false;
	      }
	});
		$("#challengesbox").click(function() {
		      if(!(challengesOpen)) {
				  $("#challengesbox").animate({ 
			        height: "530px",
			      }, 500 );
				challengesOpen = true;
				}  
		      else {
				  $("#challengesbox").animate({ 
			        height: "100px",
			      }, 100 );
				challengesOpen = false;
		      }
		});
		$("#gawkbox, #topnavleft").click(function() {
		      if(!(gawkOpen)) {
				  $("#gawkbox").animate({ 
			        height: "450px",
			      }, 500 );
				  $("#gawkcontent").animate({ 
			        height: "400px",
			      }, 500 );
				gawkOpen = true;
				}  
		      else {
				  $("#gawkbox").animate({ 
			        height: "100px",
			      }, 100 );
				  $("#gawkcontent").animate({ 
			        height: "10px",
			      }, 500 );
				gawkOpen = false;
		      }
		});
		$("#chatbox, #topnavright").click(function() {
		      if(!(chatOpen)) {
				  $("#chatbox").animate({ 
			        height: "450px",
			      }, 500 );
				  $("#chatcontent").animate({ 
			        height: "400px",
			      }, 500 );
				chatOpen = true;
				}  
		      else {
				  $("#chatbox").animate({ 
			        height: "100px",
			      }, 100 );
				  $("#chatcontent").animate({ 
			        height: "10px",
			      }, 100 );
				chatOpen = false;
			
		      }
		});
	    
	
		$("#closeMessage").click(function(event) {
			showingMessage = false;
			$("#messagescreen").css("display", "none");
			$("#messagescreen").css("opacity", "0.0");
			$("#message-object").css("display", "none");			
			
		});
		$("#chatcontent").click(function(event) {
			event.stopPropagation()
		});
		$("#chatsubmit").click(function(event) {
			$("#chatoutput ul").append("<li>"+$("#chatarea").val()+"</li>");
			$("#chatarea").val("");
			event.stopPropagation()
		});
}

function initUIElements() {

	$(".griditembase").draggable({
		drag: function(event, ui) { 
				
			 },
		cursorAt: { cursor: 'hand', top: 40, left: 20 },
	   
		});
	$(".griditembase").hover(
			      function () {
					$(this).css("border", "4px solid #666")
					$(this).css("background-color", "#333")
				
					  $(".gridreview").slideToggle("slow");
					}, 
			      function () {
					$(this).css("border", "4px solid transparent")
					$(this).css("background-color", "transparent")
				
					  $(".gridreview").slideToggle(0);
					  
			      }
			    );

}
function initOpenLayers() {
	
	 var lat=42.3097;
     var lon=-71.1151;
     var zoom=17;
     var map; //complex object of type OpenLayers.Map

       map = new OpenLayers.Map ("map", {
           controls:[new OpenLayers.Control.Navigation()],
           maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
           maxResolution: 156543.0399,
           numZoomLevels: 19,
           units: 'm',
           projection: new OpenLayers.Projection("EPSG:900913"),
           displayProjection: new OpenLayers.Projection("EPSG:4326")
       } );


       // Define the map layer
       // Note that we use a predefined layer that will be
       // kept up to date with URL changes
       // Here we define just one layer, but providing a choice
       // of several layers is also quite simple
       // Other defined layers are OpenLayers.Layer.OSM.Mapnik, OpenLayers.Layer.OSM.Maplint and OpenLayers.Layer.OSM.CycleMap
       layerTilesAtHome = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
       map.addLayer(layerTilesAtHome);
	
      
       if( ! map.getCenter() ){
           var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
           map.setCenter (lonLat, zoom);
       }

	layerMarkers = new OpenLayers.Layer.Markers("Markers");
	map.addLayer(layerMarkers);

	var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());

	var size = new OpenLayers.Size(265,239);
	var offset = new OpenLayers.Pixel(-160,-220);
	var icon = new OpenLayers.Icon('images/bldlayer.png',size,offset);
	marker = new OpenLayers.Marker(lonLat,icon);
	marker.events.register('mousedown', marker, function(evt) { $("#gawkbox").click(); OpenLayers.Event.stop(evt); });
	layerMarkers.addMarker(marker);
	
	var size = new OpenLayers.Size(50,50);
	var offset = new OpenLayers.Pixel(-160,-220);
	var icon = new OpenLayers.Icon('images/Challenges_Icon_50.png',size,offset);
	marker = new OpenLayers.Marker(lonLat,icon);
	marker.events.register('mousedown', marker, function(evt) { $("#challengesbox").click(); OpenLayers.Event.stop(evt); });
	layerMarkers.addMarker(marker);
	var size = new OpenLayers.Size(50,50);
	var offset = new OpenLayers.Pixel(160,100);
	var icon = new OpenLayers.Icon('images/Challenges_Icon_50.png',size,offset);
	marker = new OpenLayers.Marker(lonLat,icon);
	marker.events.register('mousedown', marker, function(evt) { $("#challengesbox").click(); OpenLayers.Event.stop(evt); });
	layerMarkers.addMarker(marker);
	var size = new OpenLayers.Size(50,50);
	var offset = new OpenLayers.Pixel(260,140);
	var icon = new OpenLayers.Icon('images/Mission_Icon_50.png',size,offset);
	marker = new OpenLayers.Marker(lonLat,icon);
	marker.events.register('mousedown', marker, function(evt) { $("#missionbox").click(); OpenLayers.Event.stop(evt); });
	layerMarkers.addMarker(marker);
	var size = new OpenLayers.Size(50,50);
	var offset = new OpenLayers.Pixel(-260,-180);
	var icon = new OpenLayers.Icon('images/Challenges_Icon_50.png',size,offset);
	marker = new OpenLayers.Marker(lonLat,icon);
	marker.events.register('mousedown', marker, function(evt) { $("#challengesbox").click(); OpenLayers.Event.stop(evt); });
	layerMarkers.addMarker(marker);
	var size = new OpenLayers.Size(50,50);
	var offset = new OpenLayers.Pixel(360,-120);
	var icon = new OpenLayers.Icon('images/Challenges_Icon_50.png',size,offset);
	marker = new OpenLayers.Marker(lonLat,icon);
	marker.events.register('mousedown', marker, function(evt) { $("#challengesbox").click(); OpenLayers.Event.stop(evt); });
	layerMarkers.addMarker(marker);
	var size = new OpenLayers.Size(50,50);
	var offset = new OpenLayers.Pixel(-60,-20);
	var icon = new OpenLayers.Icon('images/Challenges_Icon_50.png',size,offset);
	marker = new OpenLayers.Marker(lonLat,icon);
	marker.events.register('mousedown', marker, function(evt) { $("#gawkbox").click(); OpenLayers.Event.stop(evt); });
	layerMarkers.addMarker(marker);
		
}


// Main calls
google.setOnLoadCallback(OnLoad);