var $jq = ( $jq ? $jq : jQuery.noConflict());

var InfoDialog = InfoDialog || {};

InfoDialog.instance = null;
InfoDialog.width = 400;
InfoDialog.height = 250;
InfoDialog.MAP_DELAY = 1000;

InfoDialog.Show = function(settings, invoker)
{
	if (InfoDialog.instance == null)
	{
		var $jqwrapper = $jq("<div id=\"dlg_wrapper\"></div>");
		$jqwrapper.css("position","fixed");		
		$jqwrapper.css("width",0);
		$jqwrapper.css("height",0);		
		$jqwrapper.css("left", invoker.offset().left - $jqwrapper.width()/2);
		$jqwrapper.css("top", invoker.offset().top  - $jqwrapper.height()/2);
		$jqwrapper.css("z-index",2000);
		$jqwrapper.css("opacity",0);
		$jq('body').append($jqwrapper);

		//so designers are happy
		$jqwrapper.addClass('dialog_wrapper');
			
		
		var $jqdlg_body = $jq("<div id=\"dlg_body\"> </div>");
		$jqwrapper.append($jqdlg_body);		
		$jqdlg_body.css("position","absolute");
		$jqdlg_body.css("background","white");
		$jqdlg_body.css("width",InfoDialog.width);		
		$jqdlg_body.css("top", 20);
		$jqdlg_body.css("z-index",3);
		//so designers are happy
		$jqdlg_body.addClass('dialog_body_bg');
		
		var e_item = settings.multiple[settings.show_id];
		
		var $jqcloseBtn = $jq("<a class=\"dialog_close_btn\"> Close </a> "); 
		$jqcloseBtn.css("cursor","pointer");
		$jqcloseBtn.css("position","absolute");
		$jqcloseBtn.css("left",InfoDialog.width - 26);
		$jqcloseBtn.css("top",0);
		$jqcloseBtn.css("z-index",10);
		$jqcloseBtn.click(InfoDialog.Close);
		$jqdlg_body.append($jqcloseBtn);

		var $jqimage = $jq('<a href="' + e_item.more_link + '"> <img id="dialog_avatar" src="'+ e_item.image + '" /></a> ');
		$jqimage.css("position","relative");
		$jqimage.css("left",0);
		$jqimage.css("top",0);		
		$jqimage.css("z-index",4);
		$jqwrapper.append($jqimage);
		//so designers are happy
		$jqimage.addClass('dialog_image');
	
		
		if (e_item.type != Marker_CONST.BAR)
		{
			var $jqdate = $jq('<div class="dialog_date">' + e_item.date + '</div>');
			$jqdate.css("position","absolute");
			$jqdate.css("left",0);			
			$jqdlg_body.append($jqdate);
			
			var $jqmore = $jq('<div class="dialog_more"><a href="' + e_item.more_link + '">'+e_item.more_caption+'</a></div>');
			$jqmore.css("position","absolute");
			$jqmore.css("left",0);				
			$jqdlg_body.append($jqmore);
		}
		
		var $jqbody_msg = $jq('<div class="dialog_body_container"><a href="' + e_item.more_link + '" class="dialog_title">' + e_item.title + '</a> <span class="dialog_sub_title">'+ e_item.sub_title +'</span><p class="dialog_text">'+e_item.text+'</p>  </div>');			
		$jqbody_msg.css("position","absolute");	
		$jqbody_msg.css("left",160);	
		$jqbody_msg.css("top",0);	
		$jqbody_msg.css("width",230);	
		
		
		$jqdlg_body.append($jqbody_msg);
		
		$jqdlg_body.css("height",Math.max(InfoDialog.height,$jqbody_msg.height()));	
		
		setTimeout(function(){
			//Google maps			
			var latlng = new google.maps.LatLng(settings.lat,settings.lng);
		  
			var myOptions = {
		      zoom: 15,
		      center: latlng,
		      mapTypeId: google.maps.MapTypeId.ROADMAP
		    };
		  
			var $jqmap_canvas = $jq('<div id="map_canvas"></div>');
			$jqmap_canvas.css("position","absolute");
			$jqmap_canvas.css("width",InfoDialog.width);
			$jqmap_canvas.css("height",200);
			$jqmap_canvas.css("z-index","1");
			$jqmap_canvas.css("opacity","0");
			$jqmap_canvas.css("top",$jqdlg_body.height() - 150);
			$jqwrapper.append($jqmap_canvas);
			
			$jqmap_canvas.mouseover(function(){
				$jqmap_canvas.animate({top:$jqdlg_body.height()+20},{ queue:false, duration:500, easing:"backEaseOut"});
			});
			
			var map = new google.maps.Map( document.getElementById('map_canvas'),myOptions);
			
			var marker1 = new google.maps.Marker({
		        position: latlng, 
		        map: map,		        		        
		        animation: google.maps.Animation.DROP,	        
		        title:e_item.title		        
		    }); 
			
			$jqmap_canvas.stop();
			$jqmap_canvas.animate(
			{
				opacity:1			
			},{ queue:false, duration:1000, easing:"expoEaseOut"});
			
			
		},InfoDialog.MAP_DELAY);
		
	 	//animate wrapper as final step
		$jqwrapper.stop();
		$jqwrapper.animate({
			opacity:1,
			left : ($jq(window).width() - InfoDialog.width) / 2,
			top  : ( $jq(window).height()/4 - $jqdlg_body.height() /2 ) + 100,
			width : 400,
			height : $jqdlg_body.height() + 200
			
		},{ queue:false, duration:1000, easing:"expoEaseOut"});
		
		var map_height = Math.max(MarkerManager.MarkerMaxHeight,$jq(document).height());
		var offset_width = MarkerManager.MarkerMaxHeight < $jq(window).height()-145 ? 20 : 0;
		
		var $jqbackground = $jq('<div id="dlg_bg"></div>');	
		$jqbackground.css("position","absolute");	
		$jqbackground.css("left",0);		
		$jqbackground.css("top",0);		
		$jqbackground.css("width",$jq(window).width() + offset_width);		
		$jqbackground.css("height",map_height);
		$jqbackground.css("background","black");
		$jqbackground.css("opacity","0");
		$jqbackground.css("z-index",1000);		
		$jq('body').append($jqbackground);
		//so designers are happy
		$jqbackground.addClass('dialog_background');
		$jqbackground.animate({opacity:0.5},{ queue:false, duration:500, easing:"backEaseOut"});
		
		$jqbackground.click(InfoDialog.Close);
		
		//Register UIs
		InfoDialog.instance = [$jqbackground, $jqwrapper];
		
		
		
	}
};


InfoDialog.Close = function()
{
	for (var item in InfoDialog.instance)
	{		
		InfoDialog.instance[item].remove();	
	}	
	
	InfoDialog.instance = null;
};