/// <reference path="jquery.vsdoc.js">

$(function() {

	var 
	//variables
    $numbers = $("#numbers a")
    , $homeImage = $("#homeImage")
    , $arrowLeft = $("#ArrowLeft")
    , $arrowRight = $("#ArrowRight")
    , $arrowLeftImg = $arrowLeft.find("img")
    , $arrowRightImg = $arrowRight.find("img")
    , $arrowText = $("#ArrowText")
    , $mediaBoxContent = $("#mediaBoxContent img")
    , $photoBy = $("#photoBy")
    , $photoByDiv = $("#photoBy div")
    , $photoByText = $("#photoBy span")
    , $mediaNumbers = $("#mediaNumbers")
    , $subPhoto = $('#mediaBoxNav ul li.subPhoto a')
    , $subVideo = $('#mediaBoxNav ul li.subVideo a')
    , $subWebcam = $('#mediaBoxNav ul li.subWebCam a')
    , $mediaboximage = $('#mediaboximage')
    , cacheImages = []
    , currentPhoto = -1
    , currentMarquee = 0
    , currentVideo = 0
    , trackVideos = false
    , tabLocation = 0;

	//externalize variables in case they need to be changed globally
	window["Videos"] = Videos;
	window["Photos"] = Photos;

	//attach event handlers
	$subPhoto.click(function() { return switchto(0); });
	$subVideo.click(function() { return switchto(1); });
	$subWebcam.click(function() { return switchto(2); });


	function switchto(switchtarget) {
		tabLocation = switchtarget;
		$.each([$subPhoto, $subVideo, $subWebcam], function(i, $item) {
			$item.parent().removeClass("on");
		});

		var tabCss;
		switch (switchtarget) {
			case 0:
				tabCss = "PhotoBy";
				trackVideos = false;
				$photoBy.css("margin-top", "5px");
				$photoByText.text("Photo by");
				updatePhotosText();

				$('#flvwrapper').css('display', 'none');
				$('#mediaNumbers, #mediaboximage').fadeIn("50");
				$mediaboximage.attr('src', '/shared/hff/files/images/' + Photos[currentPhoto].url);

				$subPhoto.parent().addClass("on");

				break;
			case 1:
				tabCss = "Video";
				trackVideos = true;
				$photoBy.css("margin-top", "5px");
				$photoByText.text("");
				updatePhotosText();
				$mediaboximage.hide();

				$subVideo.parent().addClass("on");

				$('#flvwrapper, #mediaNumbers').fadeIn("50");
				if (currentVideo) {
					window.setTimeout("setVideo(Videos[" + currentVideo + "].url);", 100);
				}
				break;

			case 2:
				tabCss = "Webcam";
				$photoBy.css("margin-top", "-8px");
				$photoByText.text("");
				$photoByDiv.html(webcamhtml);
				$('#mediaNumbers, #flvwrapper').css('display', 'none');
				$mediaboximage.attr('src', webcamurl).fadeIn("50");

				$subWebcam.parent().addClass("on");
				break;
		}
		$photoBy.removeClass().addClass(tabCss);
		$mediaNumbers.removeClass().addClass(tabCss)


		return false;
	}

//	function updateWebcam() {
//		if (tabLocation === 2) {
//			function error() {
//				//display the offline error
//				// $photoByDiv.text("The Island Park Webcam is available during daylight hours");
//				// $mediaboximage.hide();
//			}
//			var time = new Date().getTime().toString()
//			, url = "/webcam.php?r=" + time;
//
//			$.ajax({
//				type: "GET",
//				url: url,
//				success: function(data) {
//					if (!data || data.length < 200)
//						error(data);
//					else {
//						//update the webcam url
//						$mediaboximage.attr("src", url);
//						$mediaboximage.fadeIn("200");
//					}
//				},
//				error: error
//			});
//
//		}
//	}
//	window["updateWebcam"] = updateWebcam;
//	window.setInterval("updateWebcam();", 60000);

	// Arguments are image paths relative to the current page.
	$.preLoadImages = function() {
		var args = arguments, args_len = args.length;
		for (var i = args_len; i--; ) {
			var img = document.createElement('img');
			img.src = args[i];
			cacheImages.push(img);
		}
	};
	$numbers.each(function(index, elem) {
		var img = NumberImages[index];
		$(elem).attr("href", "#" + img);
		$.preLoadImages(MarqueesPath + img);
	});
	$numbers.click(function() {
		var $this = $(this);
		$homeImage.css("background-image", "url('" + $this.attr("href").replace(/\#/, MarqueesPath) + "')");
		$numbers.removeClass("on");
		$this.addClass("on");
		return false;
	});
	function marquee() {
		currentMarquee = (currentMarquee + 1) % NumberImages.length;
		$($numbers[currentMarquee]).trigger("click");
	}
	window.marquee = marquee;
	window.setInterval("marquee()", 5000);
	function switchArrow(num) {

		var newImg = (trackVideos ? currentVideo : currentPhoto) + num
        , path = PhotosPath
        , items = trackVideos ? Videos : Photos;
		if (newImg < 0 || newImg >= items.length)
			return false;
		if (newImg === 0)
			$arrowLeftImg.attr("src", path + "left-arrow-home.gif");
		else $arrowLeftImg.attr("src", path + "left-arrow-home-on.gif");
		if (newImg === items.length - 1)
			$arrowRightImg.attr("src", path + "right-arrow-home.gif");
		else $arrowRightImg.attr("src", path + "right-arrow-home-on.gif");
		if (trackVideos)
			currentVideo = newImg
		else currentPhoto = newImg;
		updatePhotosText();
		if (trackVideos) {
			setVideo(items[newImg].url);
		}
		return false;
	}
	function updatePhotosText() {
		var index = trackVideos ? currentVideo : currentPhoto
        , items = trackVideos ? Videos : Photos
        , basePath = trackVideos ? VideosPath : PhotosPath;

		$arrowText.text((index + 1) + " of " + items.length);
		if (!trackVideos)
			$mediaBoxContent.attr("src", basePath + items[index].url);
		$photoByDiv.text(items[index].by);
	}
	$arrowLeft.click(function() { return switchArrow(-1); });
	$arrowRight.click(function() { return switchArrow(1); });
	switchArrow(1);
	function setVideo(url) {
		var movieName = 'the_video_player'
        , movie = navigator.appName.indexOf("Microsoft") != -1 ? window[movieName] : document[movieName];
		movie.playMovie(VideosPath + url);
	}
	window["setVideo"] = setVideo;
});