//
//author : Gugu Mabuza
// International Studies and Programs - Michigan


$(document).ready(function(){    
	var map = new GMap2(document.getElementById('map'));
	
	if(sistermap == "michigan")
	{
		var Lansing = new GLatLng(42.77,-84.60); 
		map.setCenter(Lansing, 7);
	}
	else
	{
		var Shiga = new GLatLng(35.159139,136.172791);
		map.setCenter(Shiga, 10);
	}	
	

	$(markers).each(function(i,marker){ 
		var point = new GMarker(new GLatLng(marker[0], marker[1]));
		map.addOverlay(point);
		
		$("<li />") 
		.addClass('ui-state-default ui-corner-all')
		.uiHover()	
		.html(marker[2])
		.click(function(){
			displayPoint(point,marker, i);
		})
		.appendTo("#list");
		
		GEvent.addListener(point, "click", function(){ 
			displayPoint(point,marker, i);
		});
	});
	
	$('<div id="message" />').appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
	
	function displayPoint(point,marker, index){
	
		$("#message").hide().empty();
		
		var closeButton = $(iconHTML("close"))
						.click(
							function(){ $("#message").fadeOut(); 
						})
						.css({ top:'5px', right:'5px' })
						.uiHover();
						
				
			$("#tabs-template").clone().show()
							.attr("id","").appendTo("#message")
							.find("#tab1").html(marker[2]).end()
							.find("#tab2").html(marker[3]).end()
							.find("#michigan_city").html(marker[4]).end()
							.find("#shiga_city").html(marker[6]).end()
							.find(".dialog").click(function(){ $("#dialog").dialog("open"); }).end()
							.tabs()
							.find(".ui-tabs-nav").append(closeButton);	
				
				
		var moveEnd = GEvent.addListener(map, "moveend", function(){
				var markerOffset = map.fromLatLngToDivPixel(point.getLatLng());
				$("#message")
						.fadeIn()
						.css({ top:markerOffset.y, left:markerOffset.x });
					
						GEvent.removeListener(moveEnd);
				});
				
		left = map.getBounds().getSouthWest().lat();
		right = map.getBounds().getNorthEast().lat();
		offset = (right - left) * .25;
		map.panTo(new GLatLng(point.getPoint().lat(), point.getPoint().lng()+offset));
					
	}
	
	GEvent.addListener(map, 'zoomend', function(){
					$("#message").hide();
				});
				
				$("#dialog").show().dialog({
					autoOpen:false,
					modal:true,
					overlay:{ background:"#000", opacity:0.7 },
					width:350, height:300
				});
				
				$("#list").appendTo("#map").css({ top:'10px', right:'10px' });
				
				/*Controls */
				$(iconHTML("up"))
					.css({ top:'10px', left:'32px' })
					.click(function(){
						map.panDirection(0, 1);
					})
					.appendTo("#map");
					
				$(iconHTML("left"))
					.css({ top:'32px', left:'10px' })
					.click(function(){
						map.panDirection(1, 0);
					})
					.appendTo("#map");
					
				$(iconHTML("right"))
					.css({ top:'32px', left:'54px' })
					.click(function(){
						map.panDirection(-1, 0);
					})
					.appendTo("#map");
					
				$(iconHTML("down"))
					.css({ top:'54px', left:'32px' })
					.click(function(){
						map.panDirection(0, -1);
					})
					.appendTo("#map");
					
				$(iconHTML("plus"))
					.css({ top:'84px', left:'32px' })
					.click(function(){
						map.zoomIn();
						$("#map-slider").slider("value", map.getZoom());
					})
					.appendTo("#map");
					
				$(iconHTML("minus"))
					.css({ top:'325px', left:'32px' })
					.click(function(){
						map.zoomOut();
						$("#map-slider").slider("value", map.getZoom());
					})
					.appendTo("#map");
				
				$("<div />").attr('id','map-slider').height(200)
					.slider({ 
						orientation: "vertical", 
						min:0, max:19, step:1, value:map.getZoom(),
						change:function(){
							map.setZoom( $(this).slider("value") );
						}
					})
					.css({ top:'115px', left:'38px', position:'absolute' })
					.appendTo("#map");	
	
	
});

$.fn.uiHover = function(){
				return this.each(function(){
					$(this).hover(
						function(){ $(this).addClass('ui-state-hover'); },
						function(){ $(this).removeClass('ui-state-hover'); }
					);
				});
		}
		
		function iconHTML(type) {
				switch (type) {
					case "up" 		: iconClass = 'ui-icon-circle-arrow-n'; break;
					case "down" 	: iconClass = 'ui-icon-circle-arrow-s'; break;
					case "left" 	: iconClass = 'ui-icon-circle-arrow-w'; break;
					case "right" 	: iconClass = 'ui-icon-circle-arrow-e'; break;
					case "plus" 	: iconClass = 'ui-icon-circle-plus'; break;
					case "minus" 	: iconClass = 'ui-icon-circle-minus'; break;
					case "close"	: iconClass = 'ui-icon-closethick'; break;
				}
				return '<div class="icon ui-state-default ui-corner-all"><span class="ui-icon '+iconClass+'" /></div>';
			}