var playMovieNow;
var playVideo;
var targetPoint = 0;
var movePixelsPerSec = 50;
var isFullScreen=true;
var currentlyShiftingToItem=false;
var curMovie;

function stretchSwiff(){
	var tempThing = $$("[id^=Swiff]")[0].parentNode;
	var tempThing_x = tempThing.offsetLeft;
	var tempThing_y = tempThing.offsetTop;
	
	$$(".pointInfo_link").setStyle("display","none");
	$$(".pointInfo_expand").setStyle("display","none");

	var isIE = Browser.Engine.trident;

	if (isIE) {
		var targetObj = $$("[id^=Swiff]")[0];
		targetObj.style.width = 800;
		targetObj.style.height = 455;
		targetObj.style.position = "absolute";
		targetObj.style.top = "2px";
		targetObj.style.left = "5px";
		targetObj.style.zIndex = "11";

		tempThing.setStyles({
			left:0,
			top:0
		});
	} else {
		tempThing.morph({
			left:0,
			top:0
		});
		$$("[id^=Swiff]")[0].morph({
			width:800,
			height:450,
			position:"absolute",
			top:"5px",
			left:"5px",
			zIndex:"11"
		});

	}
	tempThing.store("pos",{x:tempThing_x,y:tempThing_y});
}

function openBoxWithImage(imageName,originalMapWidth,originalMapHeight,mapWidth,mapHeight,targetPoints){
	var widthRatio =  mapWidth/originalMapWidth;
	var heightRatio = mapHeight/originalMapHeight;
	var newMovingImage_holder,newMovingImage_main;

	if (isFullScreen) {
		newMovingImage_main = new Element("DIV",{
			styles:{
				position:"relative"
			},
			id:"mb_newMovingImage_main"
		});

		newMovingImage_holder = new Element("DIV",{
			styles:{
				position:"relative",
				width:mapWidth+"px",
				height:mapHeight+"px"
			},
			id:"moving_image"
		});
	} else {
		newMovingImage_main = new Element("DIV",{
			styles:{
				position:"relative",
				overflow:"hidden",
				width:"750px",
				height:"220px"
			}
		});


		newMovingImage_holder = new Element("DIV",{
			styles:{
				position:"absolute",
				top:"0px",
				left:"0px",
				width:mapWidth+"px",
				height:mapHeight+"px"
			},
			id:"moving_image"
		});
	}

	var newMovingImage = new Element("IMG",{
		src:"/images/"+imageName,
		styles:{
			width:mapWidth+"px",
			height:mapHeight+"px",
			margin:"5px"
		}
	});

	newMovingImage.addEvent("click",function(e) {
		hideAllPointInfos();
		e.stop();
	});
	
	newMovingImage_holder.appendChild(newMovingImage);
	newMovingImage_main.appendChild(newMovingImage_holder);

	if (!isFullScreen) {
		var calculatedPos = calculateFocus_set(-targetPoints[0].x,-targetPoints[0].y);
		newMovingImage_holder.setStyles({
			left:calculatedPos.x+"px",
			top:calculatedPos.y+"px"
		});
	}

	var pointNum=0;
	$each(targetPoints,function(point) {
		var targetPointX = point.x*widthRatio;
		var targetPointY = point.y*heightRatio;

		if (point.direction=="down"){
			newMovingImage_holder.appendChild(drawLine(targetPointX-1,targetPointY,50,point.title,point.leftAdd,point.rightAdd));
		} else {
			newMovingImage_holder.appendChild(drawLine(targetPointX-1,targetPointY,-50,point.title,point.leftAdd,point.rightAdd));
		}
		var newPointImg = new Element("IMG",{
			src:"/images/dot.gif",
			styles:{
				position:"absolute",
				left:targetPointX-8+"px",
				top:targetPointY-8+"px",
				zIndex:10
			},
			id:"point_"+pointNum
		});

		newPointImg.addEvent("mouseover",function(){
			if (!currentlyShiftingToItem) {
				//var testVideoObject = this.retrieve("flashPlayer");

				currentlyShiftingToItem=true;
				var targetPointId = this.id.split("_")[1];
				var targetXPos = this.getStyle("left").toInt()+8;
				var targetYPos = this.getStyle("top").toInt()+8;

				var targetVideo = this.retrieve("flashVideo");
				var targetImage = this.retrieve("image");
				hideAllPointInfos();

				/*var overlayImage = new Element("IMG",{
					src:"/flash/initial.jpg",
					styles:{
						position:"absolute",
						top:"35px",
						left:"6px",
						zIndex:"12",
						cursor:"pointer"
					},
					id:"flashPlayButton"
				});

				overlayImage.inject($("point_info_"+targetPointId));*/
				
				if (targetVideo != "") {
					var targetVideoElement =  new Swiff("/flash/phantom23.swf",{
						width:192,
						height:146,
						vars:{
							videos:"/flash/videos/"+targetVideo,
							pauseImage:"/flash/initial.jpg"
						},
						params:{
							wmode:"opaque",
							allowfullscreen:"true",
							pauseImage:"/flash/initial.jpg"
						},
						callBacks:{
							onLoad:function(){


								/*$("flashPlayButton").addEvent("click",function(evt){
									curMovie.remote("playVideo");
	//								$("flashPlayButton").destroy();

								});*/
							}
						}
					});
					curMovie = targetVideoElement;
					targetVideoElement.inject($("point_info_"+targetPointId),"before");
				} else {
					var targetImageElement = new Element("IMG",{
						src:"/images/mapImages/"+targetImage,
						width:192,
						height:147,
						id:"targetMapImage"
					});
$("point_info_"+targetPointId).appendChild(targetImageElement);
//					targetImageElement.inject($("point_info_"+targetPointId),"before");
				}
				//curMovie.remote("playVideo");
				//testVideoObject.object.clone().set("id","SwiffClone").inject($("point_info_"+targetPointId).childNodes[4],"before");
				//$("point_info_"+targetPointId).appendChild(tempVideo);
				$("point_info_"+targetPointId).setStyle("opacity",1);
//				$("point_info_"+targetPointId).morph({opacity:1});
				if (!isFullScreen) {
					$("moving_image").set("morph",{
						onComplete:function(){
							currentlyShiftingToItem=false;
							if (targetPointId>0) {
								targetPoint = targetPointId-1;
							} else {
								targetPoint = targetPoints.length-1;
							}
						}
					});
					if (!isFullScreen) {
						moveFocus(targetXPos,targetYPos,true);
					}
				} else {
					currentlyShiftingToItem=false;
				}
			}
		});
		
		var infoCalcEndWidth = 192+(targetPointX-101);
		var shiftBy = 0;
		if (infoCalcEndWidth>mapWidth) {
			var shiftBy = infoCalcEndWidth-mapWidth;
		} else {
			//alert(targetPointX-101 + " " + point.title);
			if ((targetPointX-101) <= 5) {
				shiftBy = (targetPointX-101)-10;
			}
		}
		var newPointInfo = new Element("DIV",{
			styles:{
				position:"absolute",
				left:((targetPointX-101)-shiftBy)+"px",
				top:targetPointY-144+"px",
				zIndex:12,
				background:"#ffffff",
				width:"192px",
				height:"205px",
				opacity:0,
				paddingLeft:"5px",
				paddingRight:"5px"
			},
			id:"point_info_"+pointNum,
			"class":"point_info"
		});

		var newPointArrow = new Element("DIV",{
			styles:{
				position:"absolute",
				left:(86+shiftBy)+"px",
				top:"203px",
				zIndex:13,
				background:"url(/images/mapPointer.png) no-repeat",
				width:"28px",
				height:"15px"
			},
			id:"point_arrow_"+pointNum
		});
		//newPointInfo.appendChild(newPointArrow);

		var newPointInfo_title_l = new Element("DIV",{
			styles:{
				marginLeft:"0px",
				marginTop:"5px",
				width:"5px",
				height:"25px",
				background:"url(/images/top_bar_left.png) no-repeat",
				float:"left",
				zIndex:"12",
				position:"relative"
			}
		});
		var newPointInfo_title_c = new Element("DIV",{
			styles:{
				marginTop:"5px",
				height:"25px",
				lineHeight:"25px",
				background:"url(/images/top_bar_bg.png) repeat-x",
				float:"left",
				color:"#ffffff",
				fontFamily:"tahoma,verdana,arial",
				width:"182px",
				zIndex:"12",
				position:"relative"
			},
			html:point.title+"<div style=\"float:right; font-weight:bold; cursor:pointer;\" onclick=\"hideAllPointInfos();\">X</div>"
		});
		var newPointInfo_title_r = new Element("DIV",{
			styles:{
				marginRight:"0px",
				marginTop:"5px",
				width:"5px",
				height:"25px",
				background:"url(/images/top_bar_right.png) no-repeat",
				float:"left",
				zIndex:"12",
				position:"relative"
			}
		});
		var newPointInfo_title_clear = new Element("DIV",{
			styles:{
				clear:"both",
				height:"5px",
				fontSize:"1px"
			}
		});
		/*newPointImg.store("flashPlayer",new Swiff("/flash/phantom3.swf",{
			width:202,
			height:112,
			vars:{
				videos:"/flash/videos/"+point.video
			},
			params:{
				wmode:"opaque"
			}
		}));*/
		newPointImg.store("flashVideo",point.video);
		newPointImg.store("image",point.image);
		var newPointInfo_image = new Element("IMG",{
			src:"images/mapImages/"+point.image,
			styles:{
				marginLeft:"5px"
			}
		});

		var newPointInfo_link = new Element("DIV",{
			styles:{
				color:"#338062",
				fontWeight:"bold",
				fontFamily:"tahoma,verdana,arial",
				fontSize:"10pt",
				marginLeft:"7px",
				position:"absolute",
				bottom:"5px",
				left:"0px"
			},
			html:"<a href=\""+point.link+"\" style=\"color:#338062; text-decoration:none;\">Find Out More</a>",
			"class":"pointInfo_link"
		});

		var newPointInfo_expandcon = new Element("DIV",{
			styles:{
				position:"absolute",
				bottom:"1px",
				right:"4px"
			},
			"class":"pointInfo_expand"
		});


		newPointInfo.appendChild(newPointInfo_title_l);
		newPointInfo.appendChild(newPointInfo_title_c);
		newPointInfo.appendChild(newPointInfo_title_r);
		newPointInfo.appendChild(newPointInfo_title_clear);

		//newPointInfo.appendChild(newPointInfo_image);
		//newPointInfo.appendChild(newPointInfo_video);

		newPointInfo.appendChild(newPointInfo_link);

		newMovingImage_holder.appendChild(newPointImg);
		newMovingImage_holder.appendChild(newPointInfo);
		pointNum++;
	});
	
	if (imageName == "map.jpg"){
		eventDesc = "Senior Interactive Map";
	}else if (imageName == "map2.jpg"){
		eventDesc = "Nursery Interactive Map";
	}
	//document.body.appendChild(newMovingImage_main);
	Mediabox.open(newMovingImage_main,"test",(mapWidth+10) + " " + (mapHeight+10));
	//Mediabox.open("#mb_newMovingImage_main","test",(mapWidth+10) + " " + (mapHeight+10));

/*	SqueezeBox.open(newMovingImage_main,{
		handler:"adopt",
		size:{x:mapWidth+10,y:mapHeight+10},
		gwo:{c:'Interactive Map',e:'Open',o:eventDesc},
		onOpen:function(){
			$("sbox-content").setStyle("overflow","visible");
		}
	});*/
}

function hideAllPointInfos() {
	//$$(".point_info").morph({opacity:0});
	//$$("[id^=Swiff]").destroy();
	$$("[id^=Swiff]").each(function(tempEle){
		tempEle.parentNode.removeChild(tempEle);
	});
	$$("[id^=targetMapImage]").destroy();
	$$(".point_info").each(function(pointEle){
		var pointEle_oldpos = pointEle.retrieve("pos");
		if (pointEle_oldpos) {
			var tempThing_x = pointEle.offsetLeft;
			var tempThing_y = pointEle.offsetTop;

			if (tempThing_x != pointEle_oldpos.x || tempThing_y != pointEle_oldpos.y) {
				pointEle.morph({
					left:pointEle_oldpos.x,
					top:pointEle_oldpos.y
				});
			}
		}
	});
	$$(".point_info").setStyle("opacity",0);


	$$(".pointInfo_link").setStyle("display","block");
	$$(".pointInfo_expand").setStyle("display","block");
}

function calculateFocus_get() {
	var imageLeft = $("moving_image").getStyle("left").toInt();
	var imageTop = $("moving_image").getStyle("top").toInt();

	var imageFocusLeft = (-imageLeft)+($("moving_image").parentNode.getWidth().toInt()/2);
	var imageFocusTop = (-imageTop)+($("moving_image").parentNode.getHeight().toInt()/2);

	document.title = imageFocusLeft + " " + imageFocusTop;
}

function calculateFocus_set(x,y) {
	var imageFocusLeft = x+($("moving_image").parentNode.getWidth().toInt()/2);
	var imageFocusTop = y+($("moving_image").parentNode.getHeight().toInt()/2);

	if (imageFocusLeft > 0) {
		imageFocusLeft = 0;
	} else if (imageFocusLeft < ((-$("moving_image").getWidth().toInt())+$("moving_image").parentNode.getWidth().toInt())) {
		imageFocusLeft = ((-$("moving_image").getWidth().toInt())+$("moving_image").parentNode.getWidth().toInt());
	}

	if (imageFocusTop > 0) {
		imageFocusTop = 0;
	} else if (imageFocusTop < ((-$("moving_image").getHeight().toInt())+$("moving_image").parentNode.getHeight().toInt())) {
		imageFocusTop = ((-$("moving_image").getHeight().toInt())+$("moving_image").parentNode.getHeight().toInt());
	}
	return {x:imageFocusLeft,y:imageFocusTop};
}

function moveFocus(x,y,forcedMove) {
	var calculatedPos = calculateFocus_set(-x,-y);
	if (!forcedMove) {
		hideAllPointInfos();
		$("moving_image").set("morph",{
			transition:Fx.Transitions.Sine.easeInOut,
			duration:calculateToSpeed(calculatedPos.x,calculatedPos.y)*1000,
			onComplete:function(){
				nextFocus();
			},
			link:"cancel"
		});
	}
	$("moving_image").morph({left:calculatedPos.x,top:calculatedPos.y});
}

function resetFocus() {
	moveFocus($("moving_image").parentNode.getWidth().toInt()/2,$("moving_image").parentNode.getHeight().toInt()/2);
}

function nextFocus() {
	moveFocus(targetPoints[targetPoint].x,targetPoints[targetPoint].y,false);
	targetPoint++;
	if (targetPoint == targetPoints.length) { targetPoint=0; }
}

function calculateDistance(x1,y1,x2,y2){
	var dx = x1-x2;
	var dy = y1-y2;

	return Math.sqrt(dx*dx + dy*dy);
}

function calculateToSpeed(x,y) {
	var x2 = $("moving_image").getStyle("left").toInt();
	var y2 = $("moving_image").getStyle("top").toInt();

	return calculateDistance(x,y,x2,y2)/movePixelsPerSec;
}

function showPrepWindow() {
	openBoxWithImage("map2.jpg",800,450,800,450,mapItems);
}

function showSeniorWindow() {
	openBoxWithImage("map.jpg",1330,805,800,450,mapItems);
}

function drawLine(targetX,targetY,length,label,addLeft,addRight) {
	var newLineDiv_holder = new Element("DIV",{
		styles:{
			position:"absolute",
			top:"0px",
			left:"0px"
		}
	});
	var newLineDiv = new Element("DIV",{
		styles:{
			width:"1px",
			height:((length>0)?length:-length) + "px",
			position:"absolute",
			left:targetX + "px",
			top:((length>0)?targetY+"px":(targetY+length)+"px"),
			background:"#000000"
		}
	});

	var newLineDiv_txt = new Element("DIV",{
		styles:{
			width:"250px",
			height:"15px",
			color:"#000000",
			fontWeight:"bold",
			position:"absolute",
			left:targetX-125+"px",
			top:((length>0)?targetY+length+"px":(targetY+length)-15+"px"),
			textAlign:"center"
		},
		html:addLeft+label+addRight
	});
	newLineDiv_holder.appendChild(newLineDiv_txt);
	newLineDiv_holder.appendChild(newLineDiv);



	return newLineDiv_holder;
}