var categories = new Array();
var map = null;
var active = null;
var old = null;
var hash = null;
var lang = '';
var date = '';
var artist = '';
var loc = '';

$(document).ready(function(){
	if(!($.browser.safari && parseInt($.browser.version) < 500)){
		//$('div#map_projects').hide();
		getData();
		hash = location.hash;
		hash = hash.substring(1);
		//console.log('--'+hash)
	}
	
	lang = $('#canvas').attr('class');
	

	
	if(lang == 'english'){
		date = 'Date';
		artist = 'Artist';
		loc = 'Location';
	}else{
		date = 'Dyddiad';
		artist = 'Artist';
		loc = 'Lleoliad';
	}
	
	
	makeMap();
	manageProjects();

});

function manageProjects(){
	//$('ul#subnav').append('<li><a href="#100"><span>View All</span></a></li>');
	

	$('ul#subnav li a').each(function(){
		
		if($(this).attr('href') == '#100'){
			//console.log('yay');
			$(this).parent().css('display','block');
		}
		
		$(this).click(function(me){
			me.preventDefault();
			//close external window if open
			map.closeExtInfoWindow();
			//retrieve btn id
			var temp = $(this).attr('href');
			old = active;
			active =  temp.substring(temp.indexOf('#')+1);
			
			if(active != old){
				if(active == 100){
					showAll();
				}else{
					changeProject(old,active);
				}
			}
			$(this).addClass('active');
			$('ul#subnav li a').each(function(){
				
				if($(this).attr('href') == '#'+old){
					$(this).removeClass('active');
				}
			});
			showTitle();
			return false;
		});
	});
}

function getData(){
	$('div.category').each(function(){
		categories.push(new Category(this));
	});
}


function Category(container){
	this.me = $(container);
	this.title = null;
	this.desc = null;
	this.projects = new Array();
	this.markers = new Array();

	this.init();
	return this;
}

Category.prototype.init = function() {

	var pobj = this;
	this.title = this.me.find('h2').text();
	this.desc = this.me.find('h3').html();
	this.me.find('li.project').each(function(){	
		pobj.addProject($($(this)));
	});
}

Category.prototype.addProject = function(elm){
	var content = new Array();
	var coords = new Array();
	var url = elm.find('a').attr('href');
	var temp_coords = elm.find('a').attr('rel');
	var id = elm.find('a').attr('id');
	//bit of a hack. the coords[2] is the project id
	coords = temp_coords.split(',');
	var img = elm.find('img').attr('src');
	var title = elm.find('span.title2').text();
	elm.find('span.c2').each(function(){
		var c = $(this).text();
		content.push(c);
	});
	var proj = new Array(title,url,img,coords,content,id);
	this.projects.push(proj);
}

/*Category.prototype.setMarkers = function(marker){
	this.markers = marker;
	//console.log(this.markers);
}*/

function createMarker(point,html,myIcon) {
	var browser = $.browser.version
	browser = parseInt(browser.substring(0,browser.indexOf('.')));
	if ($.browser.msie && browser < 7) {
		var marker = new GMarker(point);
	} else {
		var marker = new GMarker(point,{icon: myIcon});
	}
	GEvent.addListener(marker, 'click', function(){ 
		marker.openExtInfoWindow(
			map,
			"simple_example_window",
			html,
			{beakOffset: 3}
		); 
	});
	
	return marker;
}
		

function makeMap(){
	if (GBrowserIsCompatible()) {
		
		var myIcon = new GIcon();
		myIcon.image = "http://www.safle.com/layout/img/marker.gif";
		myIcon.shadow = "http://www.safle.com/layout/img/shadow.png";
		myIcon.iconSize = new GSize(31, 28);
		myIcon.shadowSize = new GSize(38, 36);
		myIcon.iconAnchor = new GPoint(5, 34);
		myIcon.infoWindowAnchor = new GPoint(5, 2);
		myIcon.infoShadowAnchor = new GPoint(14, 25);
		myIcon.transparent = "http://www.safle.com/layout/img/transparent.png";
		
		map = new GMap2(document.getElementById("map"));
		map.addMapType(G_PHYSICAL_MAP); 
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(0,0),0,G_PHYSICAL_MAP);
		var bounds = new GLatLngBounds();
		
	

		for(var j=0;j<categories.length;j++){
			for(var z=0;z<categories[j].projects.length;z++){
				var markers = new Array();
				var lat = parseFloat(categories[j].projects[z][3][0]);
				var lng = parseFloat(categories[j].projects[z][3][1]);
				var point = new GLatLng(lat,lng);
				var html = '<div><img src="'+categories[j].projects[z][2]+'" /><br /><a href="'+categories[j].projects[z][1]+'">'+categories[j].projects[z][0]+'</a><br /><table cellspacing="0" cellpadding="0"><tr><td>'+date+':</td><td>'+categories[j].projects[z][4][0]+'</td></tr><tr><td>'+artist+':</td><td>'+categories[j].projects[z][4][1]+'</td></tr><tr><td>'+loc+':</td><td>'+categories[j].projects[z][4][2]+'</td></tr></table><br /></div>';
				var marker = createMarker(point,html,myIcon);
				markers[z] = marker;
				categories[j].markers[z] = marker;
				bounds.extend(point);
				map.addOverlay(markers[z]);
			}
			//categories[j].setMarkers(markers);  //why this one doesn't work??
		}
		
		map.setZoom(map.getBoundsZoomLevel(bounds));
		map.setCenter(bounds.getCenter());
		
		//remove all markers except the one from first project
		initProjects();
		showTitle();	
	}
}

function initProjects(){
	if(!hash){
		for(var i=1;i<categories.length;i++){
			for(var j=0;j<categories[i].markers.length;j++){
				map.removeOverlay(categories[i].markers[j]);
			}
		}
		active = 0;
		$('ul#subnav li a').each(function(){
			if($(this).attr('href') == '#'+active){
				$(this).addClass('active');
			}
		});
	}else{
		for(var i=0;i<categories.length;i++){
			for(var j=0;j<categories[i].markers.length;j++){
				map.removeOverlay(categories[i].markers[j]);
			}
		}
		
		for(var j=0;j<categories.length;j++){
			for(var z=0;z<categories[j].projects.length;z++){
				//console.log(categories[j].projects[z][5]);
				if(categories[j].projects[z][5] == hash){
					map.addOverlay(categories[j].markers[z]);
				}
			}
		}
		
		active = 100;
		
		$('ul#subnav li a').each(function(){
			if($(this).attr('href') == '#'+active){
				$(this).addClass('active');
			}
		});
	}
}

function showAll(){
	for(var i=0;i<categories.length;i++){
		for(var j=0;j<categories[i].markers.length;j++){
			map.removeOverlay(categories[i].markers[j]);
		}
	}
	for(var j=0;j<categories.length;j++){
		for(var z=0;z<categories[j].projects.length;z++){
			map.addOverlay(categories[j].markers[z]);
		}
	}
}

function changeProject(o,n){
	if(o != 100){
		for(var i=0;i<categories[o].markers.length;i++){
			map.removeOverlay(categories[o].markers[i]);
		}
		for(var i=0;i<categories[n].markers.length;i++){
			map.addOverlay(categories[n].markers[i]);
		}
		
	}else{
		//hide them all and then show the active section
		for(var i=0;i<categories.length;i++){
			for(var j=0;j<categories[i].markers.length;j++){
				map.removeOverlay(categories[i].markers[j]);
			}
		}
		for(var i=0;i<categories[n].markers.length;i++){
			map.addOverlay(categories[n].markers[i]);
		}
		
	}
}

function showTitle(){
	if(parseInt(active) != 100){
		$('h3.nm').show();
		$('h2.headline').html('<span>'+categories[active].title+'</span>');
		$('h3.nm').html(categories[active].desc);
	}else{
		$('h2.headline').html('<span>All Projects</span>');
		$('h3.nm').hide();
	}
}