/*
       copyright 2008 Kraftmaid All Rights Reserved
       Client: Kraftmaid 
       Author: Brandon Bilfield - Brulant, Inc. 
       Date: 12/29/2008
	   Description: Produces image hotspot functionality
*/ 

var hotspotData = {hotspotImage:{id:1,img:"../../images/content/inspiration_img.jpg",copy:"This is my main image copy"},
				   hotspots:[
								{x:100,y:100,title:"This is my first title",img:"../../images/background/hot_spot.png",copy:"This is my first copy",detail:"This is my first detail"},
								{x:200,y:200,title:"This is my second title",img:"../../images/background/hot_spot.png",copy:"This is my second copy",detail:"This is my second detail"},
								{x:400,y:200,title:"This is my third title",img:"../../images/background/hot_spot.png",copy:"This is my third copy",detail:"This is my third detail"}
							]
	};
	
	
	$(document).ready(function() {
			
			if($(".detail_image").length > 0 && $(".ms-formfieldcontainer").length == 0)
			{
				$(".detail_image")
				//$(".detail_image").css({'background' : 'url('+hotspotData.hotspotImage.img+') left top no-repeat'});
				$(".detail_copy").html(hotspotData.hotspotImage.copy);
				
				if(hotspotData.hotspotImage.zoom != ""){
					$(".detail_image").append("<a href='"+hotspotData.hotspotImage.zoom+"' class='productZoom'><img src='"+ hotspotData.hotspotImage.img+"' width='503' height='354'/></a>");
					$("#roomWrapper").prepend("<p class='zoomNotice'>Rollover product image to zoom in</p>");

				} else {
					
					$(".detail_image").append("<img src='"+ hotspotData.hotspotImage.img+"' width='503' height='354'/>");
				}
					
				if(hotspotData.hotspots.length >= 1)	
				{
					for(var i = 0; i < hotspotData.hotspots.length; i++)
					{
						$(".detail_image").prepend("<div id='hotspotWrapper"+i+"' class='hotspotWrapper'>\n\t<a href='#' class='hotspot' id='hotspot"+i+"'>\n</a>\n</div>\n");
						$("#hotspotWrapper"+i).css({ "left":hotspotData.hotspots[i].x,"top":hotspotData.hotspots[i].y});
						$("#hotspot"+i).css({"background" : "url("+hotspotData.hotspots[i].img+") left top no-repeat"});
						
						
						$("#hotspotWrapper"+i).append("<div id='hotspotPWrap"+i+"' class='hotspotPWrap'></div>");
						$("#hotspotPWrap"+i).append("<div class='border_top'></div><div class='border_left'>&nbsp;</div>");
						$("#hotspotPWrap"+i).append("<div id='hotspotPopUp"+i+"' class='hotspotPopUp'></div>");
						$("#hotspotPopUp"+i).append("<h2 class='hotspotTitle'>"+hotspotData.hotspots[i].title+"</h2>");
						$("#hotspotPopUp"+i).append("<p class='hotspotBody'>"+hotspotData.hotspots[i].copy+"</p>");
						$("#hotspotPWrap"+i).append("<div class='border_right'></div><div class='border_bottom'>&nbsp;</div>");

						$("#hotspot"+i).bind("mouseover", function(e){ $(this).parent().children(".hotspotPWrap").css("display","block"); });
						$("#hotspot"+i).bind("mouseout", function(e){ $(this).parent().children(".hotspotPWrap").css("display","none"); });
					}
					$(document).pngFix();
				}
			}
			if($(".related").length > 0)
			{
				$(".related").children("a").bind("mouseover",function(e){
						
						if($(this).parent().children("img").length == 1)
						{
							var index = $(".related").index($(this).parent());
							
							$(this).parent().children("img").css("display","block");
							$(this).parent().css("z-index","4000");
						
							if(index == 2 || index == 5) 
								$(this).parent().children("img").css("left",-$(this).parent().children("img").width()+128+"px");
								
							else if(index == 1 || index == 4)
								$(this).parent().children("img").css("left","-170px");
							
							else if(index == 0 || index == 3)
								$(this).parent().children("img").css("left","37px");

								
							$(this).parent().children("img").css("top",(-$(this).parent().children("img").height()-10)+"px");
						}
				});
				$(".related").children("a").bind("mouseout",function(e){
						
						if($(this).parent().children("img").length == 1)
						{
							$(this).parent().children("img").css("display","none");
							$(this).parent().css("z-index","500");
						}
							
					
				});
			}
	});