/**
 * Namespaced, object methods
 *
 * @author 		Zone
 * @copyright 	Copyright (c) 2009, zonecontent.com. All rights reserved.
 */
Array.min = function( array ){
    return Math.min.apply( Math, array );
};
Array.max = function( array ){
    return Math.max.apply( Math, array );
};

var kidsco = window.kidsco = function ( $ ) {
	
	var bubble, rollover;
	
	function run( blockRollover ) {
		addBubble()
		convertListToAreaMap("#map-grid");
		mergeLinkAndAreaEvents();
	}
	
	function concealAsianCountries () {
		$(".countries-list a:contains(Gaza Strip), .countries-list a:contains(West Bank), .countries-list a:contains(Palestine)").parent().hide();
	}
	
	function addBubble() {
		bubble = $(".countries-list:first").before(
			'<div id="bubble">'
			+	'<div class="header">'
			+		'<span class="right-corner"></span>'
			+	'</div>'

			+ 	'<div class="content">'
			+ 		'<p>Hello fdnjhjk dh hjddf hjkd df hjdf df hdjf hjkdf dhufdshfuidsfh udsif hdisufh uidsf</p>'
			+ 	'</div>'

			+	'<div class="footer">'
			+		'<span class="right-corner"></span>'
			+		'<span class="arrow"></span>'
			+	'</div>'
			+'</div>'
		).prev().hide();
	}

	function linkTitles() {
		$(".text-links a").each(function() {
			var el = $( this );
			el.attr("title", el.text());
		});
	}
	
	function mergeLinkAndAreaEvents ( listListClass, mapsAreaId ) {
		
		var links = $(".countries-list");
		var map = $("map");
		links.find("a").each(function ( i ) {
			var link = $( this );
			var key = link.attr("title").toLowerCase().replace(/[^a-zA-Z 0-9]+/g,'').replace(/ /ig,"-");
						
			var area = map.find("area[@name=" + key + "]");
			area.attr("rel", i)
			
			if(area.hasClass("coming-soon")) {
				link.addClass("coming-soon");
			}
			
			link.hover(function () {
				area.mouseover();
			}, function () {
				area.mouseout();
			}).click(function () {
				area.trigger("click");
				return(false);
			});
		});
		
	}
	
	function convertListToAreaMap( mapAreaId ) {
		var list = $( mapAreaId );
		if(list) {
			
			// Iterate through each list element link, and extract relevant data
			var areas = new Array();
			list.find("li a").each(function () {
				
				var el = $( this ),
					cls = '',
					txt = '';
					
				if(el.attr("class")) {
					cls = ' class="' + el.attr("class") + '"';
					txt = ' title="' + el.text() + '"';
				}
				
				var rev = el.attr("rev") ? ' rev="' + el.attr("rev") + '"' : '';
				areas.push( '<area name="' + el.attr("id") + '"' + cls + txt + ' shape="poly" coords="' + String(el.attr("rel")).replace(/-/ig,",") + '" href="' + el.attr("href") + '"' + rev + ' />' );
				
			});
			
			// Insert map and area nodes at once as can't commit individually
			var poly = list.after(
				'<map id="' + list.attr("id") + '-areas" name="' + list.attr("id") + '-areas">'
				+ areas.join("")
				+'</map>'
			).next();
			
			// Add rollover node. Ensure the sprite div sits below the image map DOM element. Otherwise
			// issues with event capturing occur. I.e. the mouseout event is called on the area node immediately,
			// via bubbling up from the rollover node.
			rollover = list.before('<div class="rollover-sprite"></div>').prev().hide();
			
			// Add background rollover
			poly.children("area").each(function () {
					
				var el = $(this);
				var name = el.attr("name");
				var key = String(el.attr("name")).toLowerCase().replace(/[^a-zA-Z0-9\-]+/ig,'').replace(/ /ig,"-");
				var links = $(".countries-list a");
				
				el.mouseover(function () {
					poly.parent().addClass( name );
					rollover.attr( "id", name );
					$.browser.msie ? rollover.show() : rollover.fadeIn("fast");
					
					var link = $(links[ el.attr("rel") ]);
					link.addClass("hover");
					setBubblePosition( el, link );
								
				}).mouseout(function ( e ) {
					poly.parent().removeClass( name );
					rollover.removeAttr("id").hide();
					$(links[ el.attr("rel") ]).removeClass("hover");
					bubble.hide();
					
				}).click(function () {
					if(el.hasClass("coming-soon") && !el.hasClass("allow")) {
						return(false);
					}
					window.location.href = this.href;
				})
			});
			
			
			// Add image (transparent) and remove links
			list.before('<img id="image-map" src="images/common/transparent.png" width="' + list.parent().width() + '" height="692" usemap="#' + poly.attr("id") + '"/>');
			list.remove();
			
		}		
	}
	
	function setBubblePosition ( area, link ) {
		
		var coords = area.attr("coords").split(",");
		var coords_x = $.grep(coords, function(n, i){
		   return (i % 2 == 0);
    	});
		var coords_y = $.grep(coords, function(n, i){
		   return (i % 2 == 1);
    	})
		var area_x = Array.min( coords_x ) + Math.round((Array.max( coords_x ) - Array.min( coords_x )) / 2 ) - 7;
		var area_y = Array.min( coords_y ) - 10;

		// rev="" allows for manual manipulation
		var rev = area.attr("rev");
		if(rev) {
			var coords_rev = rev.split(",");
			area_x += Number(coords_rev[0]);
			area_y += Number(coords_rev[1]);
		}
		
		if(area.hasClass("coming-soon")) {
			bubble.find(".content p").html( link.text() + "<br />" + area.attr("title") );
			area_y -= 23;
		} else {
			
			bubble.find(".content p").text( link.text() );
		}
		
		bubble.css({
			"left" : area_x - 17 + "px",
			"top" : area_y - 30 + "px"
		});
		
		$.browser.msie ? bubble.show() : bubble.fadeIn("fast");
	}

	return {
		"init" : run,
		"concealAsianCountries" : concealAsianCountries
	};

}( jQuery );
