var global_variable="global";

/**
 * AMEffects class
 */
AMEffects=function()
{

	// closure PRIVATE variables
	
	// THUMBNAIL STUFF
	var thumb_details=null;
	var project_wrap_offset=null;
	var thumb_detail_showed=false;
	var thumb_detail_to_show=null;
	
	// DETIAL STUFF
	var detail_pics=null;
	var act_detail_id=null;
	var detail_pics_load_state=null;
	
	
	// MAP STUFF
	var showcase_url="";
		
	
	var privatemethod = function()
	{
		
	}
	
	
	
	// public interface
	return {
		
		
		// ********************************************** //
		//   PROJECTS THUMBD
		// ********************************************** //
		
		/**
		 * 
		 * @param s {Object} settings (object hash map of thumb details urls and positions)
		 */
		initProjectsThumbs : function(s)
		{
			// no this, it is closure private variable !!! no this, no var
			thumb_details=s;
			
			
			// generate effects clips
			// $(".p_thumb").append('<div class="p_thumb_over"><img src="./img/web/design/scheme1/projects_thumb_over_e.gif" /></div>');
			
			$(".p_thumb").each(
				function()
				{
					var id=$("a img", this).attr("id")
					var loc=thumb_details[id]["position"];
					
					var imgsrc="";
					
					switch(loc)
					{
						case "e":
							imgsrc="projects_thumb_over_e.gif";
						break;
						case "w":
							imgsrc="projects_thumb_over_w.gif";
						break;
						case "n":
							imgsrc="projects_thumb_over_n.gif";
						break;
						case "s":
							imgsrc="projects_thumb_over_s.gif";
						break;
						case "nw":
							imgsrc="projects_thumb_over_nw.gif";
						break;
						case "ne":
							imgsrc="projects_thumb_over_ne.gif";
						break;
						case "sw":
							imgsrc="projects_thumb_over_sw.gif";
						break;
						case "se":
						default:
							imgsrc="projects_thumb_over_se.gif";
						break;						
					}
					
					
					$(this).append('<div class="p_thumb_over"><img src="./img/web/design/scheme1/'+imgsrc+'" /></div>');			
				}				
				
			)
			
			$(".p_thumb_over img").css({opacity:0.01});
			
			var ths=$(".p_thumb img"); // tento select trva 0-15 ms
				
			
			var is_cookie=fetch_cookie("milieuprojectsinit");
			
			$.log("is_cookie "+is_cookie);
			
			// first appearance = effect show
			// another is just setUp
			if(is_cookie===null)
			{
				// cookie stuff
				var expires = new Date();
				var timeStamp=expires.valueOf();
				// var validTill=timeStamp+3600000; // 1 hour
				//var validTill=timeStamp+60000; // 1 minute
				var validTill=timeStamp+900000; // 15 minutes
				expires.setTime(validTill);
				
				set_cookie("milieuprojectsinit","yes", expires);
				// cookie stuff
				
							
				var obj=this;
				
				// var fn=
				var t=0;
				var ef_time=500;
				
				
				// fade in all with delay
				ths.each(
					function()
					{
						var el=$(this);
						
						// $.log(el+" "+t);
											
						window.setTimeout(function()
						{
							el.fadeIn(ef_time);
							// el.fadeOut("slow");
							// el.animate({opacity:1.0},1500);
						}
						,t);
					
						t+=50;
					}
			
					  
				);				
			
				// set up behaviour after fadein finish
				window.setTimeout(function()
				{
					obj.setUpProjects.call(obj);
				}
				,t+ef_time);
			
			}
			else
			{
				ths.css("display","inline");
				this.setUpProjects();				
			}
			
		},
		
		
		
		
		/**
		 * set projects thumbnail behaviour
		 */
		setUpProjects : function()
		{
			$.log("set up project thumbnails");
			
						
			// $.log($(".p_thumb_over img").size());
			
			
			//$(".p_thumb_over").fadeOut();
			
			
			var obj=this;
			
			
			$(".p_thumb_over img").mouseover(function(e){			
				
				//if(e.originalTarget!==this)
				//	return;
					
				// $.log("mouseover "+e.originalTarget);
				
				e.stopPropagation();			
				
				
				var img_id=$("img[id]", this.parentNode.parentNode).attr("id");
				
				// set heading and location
				$("#projects_title").text(thumb_details[img_id]["title"]);
				$("#projects_location").text(thumb_details[img_id]["location"]);
				
				var el=$(this);
				
				el.fadeTo(400,0.6);				
				
				// get picture of parent with ID				
			
				
				// set last turned on obj
				thumb_detail_to_show=img_id;
				
				// show after a second
				window.setTimeout(
						function()
						{
							obj.showThumbDetail.call(obj,img_id);
						},800
					);
				
			});
			
			
			// $(".p_thumb").mouseover(function(e){$.log("mouseover TH "+e.originalTarget); e.stopPropagation();});
			// $(".p_thumb_over").mouseover(function(e){$.log("mouseover OVER "+e.originalTarget); e.stopPropagation();});			
			
			$(".p_thumb_over img").mouseout(function(e){			
				
				//if(e.originalTarget!==this)
				//	return;
				
				// $.log("mouseout "+e.originalTarget);
				
				e.stopPropagation();
				
				$(this).fadeTo(200,0.01);
				
				obj.hideThumbDetail.call();
				  
			});
			
			
			
			$(".p_thumb_over img").click(function(e){			
				
				// $("a",this.parentNode.parentNode).debug();
				var href=$("a",this.parentNode.parentNode).attr("href");
				
				window.location.href=href;
				
			});	
				
			
			/*
			// generated DOM is over our A so we need to run this handler dynamicaly to make default A action
			$(".p_thumb a").click(function(e){			
				
				// $(this).debug();
				
				// $.log("a click "+this+" "+typeof(this)+" "+$(this));
				
				$.log("a click "+);
				
				// e.preventDefault();
												
			});	
			*/
			
			
			
			// $(".p_thumb_over img").mouseover(function(e){$.log("mouseover OVER "+e.originalTarget); e.stopPropagation();});
			// $(".p_thumb_over img").mouseout(function(e){$.log("mouseover OVER "+e.originalTarget); e.stopPropagation();});
			
			
			/*
			$(".p_thumb_image").mouseover(function(e){			
				
				$.log("mouseover "+e.originalTarget);
				
				e.stopPropagation();
				
				// $.log("mouseover  "+$(this).attr("id"));
				
				// $(".p_thumb_over img",this).animate({opacity:0.5},500);
				// $(".p_thumb_over",this).fadeIn(500);
				$(".p_thumb_over",this.parentNode).fadeIn(500);
				
				// $(".p_thumb_over img",this).debug();
			});
			
			
			// $(".p_thumb").mouseover(function(e){$.log("mouseover TH "+e.originalTarget); e.stopPropagation();});
			// $(".p_thumb_over").mouseover(function(e){$.log("mouseover OVER "+e.originalTarget); e.stopPropagation();});			
			
			$(".p_thumb_image").mouseout(function(e){			
				
				$.log("mouseout "+e.originalTarget);
				
				e.stopPropagation();
				
				// $.log("mouseout  "+$(this).attr("id"));
								
				// $(this.firstChild).animate({
				$(".p_thumb_over", this.parentNode).fadeOut(500);
				  
			});
			*/
		},
		
		
		/**
		 * This method shows projects thumbs context detail on time interval. It stats proccessing only last called settimeout. It place detail as setted in config variable in temlate, it supports (N NE NW S E W SE SW) placement.
		 * @param thumb_id {Object} id of thumb
		 */
		showThumbDetail : function (thumb_id)
		{
			// $.log("showThumbDetail: "+thumb_id+" thumb to show: "+thumb_detail_to_show);
			
			
			// this functions runs on timeout so we check if last call is actual call
			if(thumb_detail_to_show!==thumb_id)
				return;
			
			// if no such ID go away
			if(!thumb_details[thumb_id])
				return;
						
			// $.log("showThumbDetail processing: "+thumb_id+" ("+thumb_detail_to_show+")");
			
			// set heading and location
			// $("#projects_title").text(thumb_details[thumb_id]["title"]);
			// $("#projects_location").text(thumb_details[thumb_id]["location"]);
			
			
				
			var src=thumb_details[thumb_id]["url"];
			var pos=thumb_details[thumb_id]["position"];
			
			var thumb_clip=$("#"+thumb_id);
			var detail_clip=$("#p_thumb_detail");
			
			var wrap_offset=this.getProjectWrapOffset();
			var offset=thumb_clip.offset();
			
			var t=offset.top-1-wrap_offset.top; // lebo je to na 1 1
			var l=offset.left-1-wrap_offset.left;
			
			var tw=132; // 132 74 with shadow
			var th=74;
			var space=11;
			
			
			$.log("showThumbDetail : "+thumb_id+" pos: "+pos+" ");
			
			
			switch(pos)
			{
				case "n":
					t=t-(2*(space+th));
				break;
				
				case "ne":
					t=t-2*(space+th);
					l=l+space+tw;
				break;
				
				case "nw":
					t=t-2*(space+th);
					l=l-2*(space+tw);
				break;
				
				case "w":
					l=l-2*(space+tw);
				break;
				
				case "e":
					l=l+space+tw;
				break;
				
				case "s":
					t=t+space+th;
				break;
				
				case "sw":
					t=t+space+th;
					l=l-2*(space+tw);
				break;
				
				case "se":
				default :
					t=t+space+th;
					l=l+space+tw;
				break;
				
			}			
			
			// $.log("top: "+t+" left: "+l);			
			
			detail_clip.css({top:t,left:l});
			
			var dimg=$("img",detail_clip);
						
			dimg.attr("src",src);
			
			
			// $.log("src "+src+" img "+dimg);
			
			detail_clip.css("display","block");
			
			thumb_detail_showed=true;
			
			// dimg.stop();
			dimg.fadeIn(500);
			
		},
		
		
		
		hideThumbDetail : function()
		{
			if(thumb_detail_showed)
			{
				$.log("hideThumbDetail proccessing");
				
				thumb_detail_showed=false;
				
				var detail_clip=$("#p_thumb_detail");
				var dimg=$("img",detail_clip);
				
				detail_clip.css("display","none");
				
				dimg.attr("src","./img/web/design/scheme1/nic.gif"); // because of old src blink
				
				// dimg.stop();
				// dimg.fadeOut(50);
				dimg.hide();				
			}
		},
		
		
		
		
		getProjectWrapOffset : function()
		{
			/*	
			// closure private variable
			if(project_wrap_offset===null)
			{
				project_wrap_offset=$("#project").offset();
			}
		
			return project_wrap_offset;			
			*/
			
			// musel som to menit lebo po resize okna to ostalo zle
			return $("#project").offset();
		},
		
		
		
		// ********************************************** //
		//   PROJECT DETAIL
		// ********************************************** //
		
		/**
		 * initialized project detail
		 * 
		 * TODO
		 * preload other pics
		 * behaviour queue
		 * clicker interface
		 * loading of others
		 * 
		 * @param {Array} pics
		 * @param {Number} optional initial index 
		 */
		initProjectDetail : function(pics,init_ind)
		{
			// closure private variable, not accesible by this !!!
			detail_pics=pics;
			
			act_detail_id=init_ind || detail_pics[0]["id"]; // defined or first
			
			// preload images and set info about state
			detail_pics_load_state={};
			
			
			var d_obj;			
			
			
			for(var i=0;i<detail_pics.length;i++)
			{
				d_obj=detail_pics[i];
				var pid=d_obj["id"];
				
				// detail_pics_load_state[pid]={normal:false,blur:false,normal_image:new Image(),blur_image:new Image()};
				detail_pics_load_state[pid]={normal:false,blur:false,normal_image:document.createElement('img'),blur_image:document.createElement('img')};
				
				// closure sees last modified ID variable so I add it dynamicaly into Image Object
				detail_pics_load_state[pid]["normal_image"].pid=pid;
				detail_pics_load_state[pid]["blur_image"].pid=pid;
								
				detail_pics_load_state[pid].blur_image.onload=function()
				{
					$.log("loaded handler: "+this.pid);
					detail_pics_load_state[this.pid].blur=true;
				}
				
								
				detail_pics_load_state[pid].normal_image.onload=function()
				{
					$.log("loaded handler: "+this.pid);
					detail_pics_load_state[this.pid].normal=true;
				}
								
				
				detail_pics_load_state[pid].blur_image.src=d_obj["blur"];
				detail_pics_load_state[pid].normal_image.src=d_obj["normal"];
			}
			
			
			
			
			var obj=this; // reference to the singleton instance for closure (handlers)
			
			var width=this.getDetailKeyValueById(act_detail_id,"offset");
			
			
			this.generateDetailPicsMenu(act_detail_id);
			
			
			// easeOutCubic easeOutQuart
			$("#p_detail_blur").animate({width : width},1800,"easeOutQuart",function()
						{
							obj.positionDetailNavi.call(obj,width);
							$("#p_detail_navi").show({queue: false, duration: 500 });							
						}
			);
			
			
			// show text
			/*
			window.setTimeout(function()
			{
				//$("#project_html").animate({opacity:"show",width:"show"},1800,"easeOutCubic"); // easeOutSine easeOutCubic easeOutQuart easeOutCirc
				// $("#project_html").slideDown(1000);
				// $("#project_html").show(1000);
			},250);
			*/
		},
		
		/**
		 * generate LIs for detail pictures
		 */
		generateDetailPicsMenu : function(active_id)
		{
			$.log("generateDetailPicsMenu "+active_id);
			
			var l=detail_pics.length;
			
			var ul_el=$("#p_detail_navi ul");
			
			var obj=this; // for closure, acces to this singleton instance
			
			var cls="";
			
			for(var i=0;i<l;i++)
			{
				if(detail_pics[i]["id"]===active_id)
				{
					cls="active";
					act_detail_id=active_id;
				}
				else
					cls="";
					
				ul_el.append('<li><a href="#" id="'+detail_pics[i]["id"]+'" class="'+cls+'">'+(i+1)+'</a></li>');
				
			}
			
			// get A elements
			$("#p_detail_navi ul li a").not(".p_detail_close")
			.click(
					function(e)
					{
						e.stopPropagation();
						
						var id=$(this).attr("id");
						$.log(id);
						obj.changeDetail.call(obj,id); // variable in closure, acces to singleton
						
						return false; // prevent default
					}
			)
			.mouseover(
				
					function(e)
					{
						e.stopPropagation();
						var el=$(this);
						var id=el.attr("id");
						obj.showDetailMini.call(obj,id,el); // variable in closure, acces to singleton
					}
			
			)
			.mouseout(
				
					function(e)
					{
						e.stopPropagation();
						var el=$(this);
						var id=el.attr("id");
						obj.hideDetailMini.call(obj,id,el); // variable in closure, acces to singleton
					}			
			);
			
			
			$("#p_detail_navi ul li").css({opacity: 0.6});
		},
		
		/**
		 * change detail
		 * @param id (String) id of A tag, is from settings
		 */
		changeDetail : function(id)
		{
			// $.log("changeDetail called "+id);
			
			if(act_detail_id===id)
				return false;
				
			
			
			// manage class of A element
			$("#"+act_detail_id).removeClass("active");
			$("#"+id).addClass("active");
			
		
			// set new ID
			act_detail_id=id;
			
			var obj=this;
			
			$("#p_detail_navi").hide();
			
			this.hideDetailMini();
			
			this.hideNormal();
			
			/*
			// animation easeOutCubic easeOutQuad
			$("#p_detail_blur").animate({width : 700},2000,"easeOutCubic")
			// wait 100 change and continue
			.animate({opacity: 1.0}, 100,null, function() 
					{
						$.log("blur_loaded: "+blur_loaded+" normal_loaded: "+normal_loaded);
						
						$(this).css("background-image","url("+blur_src+")");
						
						$("#p_detail_normal img").attr("src",normal_src);
						
						
						if(lightness=="light")
							$("#p_detail_navi ul").addClass("blur_dark");
						else
							$("#p_detail_navi ul").removeClass("blur_dark");
						
					})
			.animate({width:width},1500,"easeOutCubic", function(){							
							
							obj.positionDetailNavi.call(obj,width);
							$("#p_detail_navi").show({queue: false, duration: 500 });
							
						}			
			); 
			*/
						
			
			return false; // prevent default behaviour
		},
		
		
		/**
		 * hide normal with blur pic
		 *
		 */
		hideNormal : function()
		{
			var obj=this;
			$("#p_detail_blur").animate({width : 700},1800,"easeOutQuart",function(){obj.checkNewBNLoaded.call(obj)}); // easeOutQuad  easeOutCubic easeOutQuart
		},
		
		/**
		 * check if new blur and normal is loaded and wait if not
		 *
		 */
		checkNewBNLoaded : function()
		{
			// check if loaded
			var blur_loaded=detail_pics_load_state[act_detail_id]["blur"];
			var normal_loaded=detail_pics_load_state[act_detail_id]["normal"];
			
			$.log("blur_loaded: "+blur_loaded+" normal_loaded: "+normal_loaded);
			
			var obj=this;
			
			if(blur_loaded && normal_loaded)
			{
				// run back animation
				window.setTimeout(
					  function()
					  {
						 obj.swapNormalBlur.call(obj);
					  },100);
			}else
			{
				// or repeat check after timeout
				window.setTimeout(
					  function()
					  {
						 obj.checkNewBNLoaded.call(obj);
					  },200);	
			}
		},
		
		
		swapNormalBlur : function()
		{			
			var id=act_detail_id;
			
			var blur_src=this.getDetailKeyValueById(id,"blur");
			var normal_src=this.getDetailKeyValueById(id,"normal");
			var lightness=this.getDetailKeyValueById(id,"lightness");
			
					
					
			$("#p_detail_normal img").attr("src",normal_src);
			$("#p_detail_blur").css("background-image","url("+blur_src+")");
						
			
			
			if(lightness=="light")
				$("#p_detail_navi ul").addClass("blur_dark");
			else
				$("#p_detail_navi ul").removeClass("blur_dark");
				
			// move back
			// give browser little time for change
			var obj=this;
			window.setTimeout(
					  function()
					  {
						 obj.showNormal.call(obj);
					  },50);
			// this.showNormal();
		},
		
		
		/**
		 * show normal with blur pic
		 *
		 */
		showNormal : function()
		{
			var obj=this;
			
			var width=this.getDetailKeyValueById(act_detail_id,"offset");
			
			$("#p_detail_blur").animate({width:width},1400,"easeOutQuart", function(){	// easeOutQuad easeOutCubic	 easeOutQuart					
							
					obj.positionDetailNavi.call(obj,width);
					$("#p_detail_navi").show({queue: false, duration: 500 });
					
				}
				);
			
		},
		
		
		
		showDetailMini : function(id,el)
		{
			$.log("showDetailMini");
			
			var mini_src=this.getDetailKeyValueById(id,"mini");
			// var alt=this.getDetailKeyValueById(id,"name");
			
			$("#p_detail_mini img").attr("src",mini_src);
			
			var wrap_offset=this.getProjectWrapOffset();
			var offset=el.offset();
			
			var mini=$("#p_detail_mini");
			
			mini.css({top:offset.top-1-wrap_offset.top,left:offset.left-80-wrap_offset.left}); //70+15+10
			
			// mini.stop();
			
			mini.fadeIn(500);
		},
		
		
		
		hideDetailMini : function()
		{
			$.log("hideDetailMini");
			var dm=$("#p_detail_mini");
			dm.hide();
			// dm.dequeue();
			
			// $("#p_detail_mini").fadeTo(100,0.01);
		},
		
		
		positionDetailNavi : function(width)
		{
			
			$("#p_detail_navi").css({"left":width-96-10});
		},
		
		
		
		getDetailKeyValueById : function(id,key)
		{
			var d=detail_pics;
			
			for(var i=0, l=d.length;i<l;i++)
			{
				if(d[i]["id"]===id)
					return d[i][key];				
			}
			
			return false;
		},
		
		
		
		
		// ********************************************** //
		//   PROJECT MAP
		// ********************************************** //
		
		
		initProjectMap : function(dots,redir_url)
		{
			showcase_url=redir_url; // private
			
			var obj=this;
			
			var fn=function()
			{
				obj.generateProjectMap.call(obj,dots);
			}
			
			window.setTimeout(fn,600);
				
		},
		
		
		generateProjectMap : function(dots)
		{
			var map=$("#project_map");
			
			var positions={}
			
			var ind;
			
			for(var i=0;i<dots.length;i++)
			{
				ind=dots[i]["id"];
				
				// map.append('<div id="'+ind+'" class="project_map_dot" style="top:'+Math.floor(Math.random()*372)+'px; left:'+Math.floor(Math.random()*692)+'px"></div>');
				
				map.append('<div id="'+ind+'" class="project_map_dot" style="top:'+(100+Math.floor(Math.random()*100))+'px; left:'+(250+Math.floor(Math.random()*300))+'px"></div>');
				
				// $.log(ind);
				
				positions[ind]={};
				positions[ind]["x"]=dots[i]["x"];
				positions[ind]["y"]=dots[i]["y"];
				
			}
			
			// $(".project_map_dot").animate({opacity:1},500,"easeOutCubic");
			// $(".project_map_dot").fadeIn(1000).queue();
			
			// $(".project_map_dot").animate({opacity: 1.0},{queue: false, duration: 500},"easeOutCubic");
			// $(".project_map_dot").fadeIn({queue: false, duration: 500});
			
			
			
			// $(".project_map_dot").debug();
			
			/*
			 
			var delay=600;
			
			var id;
			
			$(".project_map_dot").each(
				function()
				{		
				
					id=$(this).attr("id");
					
					// $.log("- "+id+" "+$(this)+" | "+this);
					// $.log($(this));	
						
					// $(this).animate({width:80},{queue:false,duration:delay},"easeOutCubic").fadeIn(1000);

					
					//$(this).animate({opacity:0},{queue:false,duration:delay},"easeOutCubic")
					//.fadeIn(1000)
					//.animate({top:positions[id]["y"],left:positions[id]["x"]},1000,"easeOutCubic");
					
					//$(this).fadeOut({queue:true,duration:delay})
					//.fadeIn(2000);
					
					
					
					$(this).animate({top:positions[id]["y"],left:positions[id]["x"]},{queue:false,duration:delay},"easeOutCubic").fadeIn(delay);
					
					// .animate({opacity:1.0},1000,"easeOutCubic");
					
					delay=delay+250;
				}
			);
			*/
			
			
			
			// var fn=
			var t=400;
			

			
			// fade in all with delay
			$(".project_map_dot").each(
				function()
				{
					
					var el=$(this);
					
					var id=el.attr("id");
					
					var ef_time=1000;
					
					$.log(el+" "+t+" "+id);
										
					window.setTimeout(function()
					{
						
						el.animate({top:positions[id]["y"],left:positions[id]["x"]},{queue: false, duration: ef_time},"easeOutCubic").fadeIn(ef_time); // easeOutCubic  easeOutQuart
					}
					,t);
				
					t+=100;
				}					  
			);
			
			
			/*
			var redir_url=showcase_url;
			
			// redirection						
			window.setTimeout(function()
			{				
				window.location.href=redir_url;
			}
			,15000);
			*/
		},
		
		
		
		// ********************************************** //
		//   STATIC
		// ********************************************** //
		
		
		initStatic : function()
		{
			
			$("#static_image").fadeIn(1500);
			
			
			window.setTimeout(function()
			{
				$("#static_html").animate({opacity:"show",height:"show"},1800,"easeOutCubic"); // easeOutSine easeOutCubic easeOutQuart easeOutCirc
				//$("#static_html").slideDown(1000);
				// $("#static_html").show(1000);
			},250);
				
		},
		
		
		
		
		
		publicMethod : function()
		{
       		// removeAll();
		}
		
	};
	
}();