// JavaScript Document

var ANIMATION_SPEED = 600;
var NAV_LINK_WIDTH = 24;
var SECTION_NAV_CLOSED_WIDTH = '40px';
var SECTION_OPEN_HEIGHT = '330px';
var SECTION_ABOUT_HEIGHT = '215px';
var SECTION_CONTACT_HEIGHT = '580px';
var SECTION_CLOSED_HEIGHT = '25px';
var SECTION_NAMES = ["one", "two", "three", "four"];

var sectionTwoContentNodes = new Array();
var sectionThreeContentNodes = new Array();
var numSectionTwoNodes = 0;
var numSectionThreeNodes = 0;
var currentSection;
var currentNode = 1;

$(document).ready(function() {
	// Set mouse click handlers for section titles (expand/collapse)
	$(".section-title").click(function() {
		var id = $(this).attr("id").split("-")[2];		
		h = $(this).parent().css("height").split("px")[0];
		
		if(h > 100) {	// it's open, so close it
			collapseSection(id);
		} else {		// it's closed, so open it
			currentSection = id;
			expandSection(id);
		}
	});
	
	// Set mouse click behavior for section node navigation
	$(".section-nav-container .nav-link").live("click", function() {
		if($(this).hasClass("nav-link-active")) {
			return false;
		} else {
			showSectionNode(parseInt($(this).attr("class").split("nav-link-")[1]));
		}
	});
	
	// Read the XML file and start loading the section content
	$.get("xml/sections.xml",parseSectionContentXML);
	
	// Initialize Shadowbox
	Shadowbox.init();
	
	// Init Google Map
	initGoogleMap();
	
	// Initialize elements on page that use
	// jScrollPane plugin		   
	$('.scroll-pane').jScrollPane({dragMaxHeight:100});
});

function parseSectionContentXML(_xml) {
	var xml = $(_xml);
	var sectionId, sectionName, sectionImage, sectionVideo, sectionDescription, sectionHtml, sectionTitle;
	var sectionFlashSource, sectionFlashWidth, sectionFlashHeight, sectionFlashvars;
	var sectionGallery;
	xml.find("section-node").each(function() {
		sectionHtml = "";
		sectionId = $(this).attr("section-id");
		sectionName = $(this).attr("section-name");
		
		if($(this).find("section-flash").length > 0) {
			sectionFlashSource = $(this).find("flash-source").text();
			sectionFlashWidth = $(this).find("flash-source").attr("width");
			sectionFlashHeight = $(this).find("flash-source").attr("height");
			sectionFlashvars = new Array();
			$(this).find("section-flash").find("flashvar").each(function() {
				sectionFlashvars.push({flashvarName: $(this).attr("name"), flashvarValue: $(this).attr("value")});
			});
		}
		
		if($(this).find("section-gallery").length > 0) {
			sectionGallery = {};
			sectionGallery.galleryName = $(this).find("section-gallery").attr("name");
			sectionGallery.width = $(this).find("section-gallery").attr("width");
			sectionGallery.height = $(this).find("section-gallery").attr("height");
			sectionGallery.src = $(this).find("section-gallery").attr("src");
			
			// preload image
			preloadImage(sectionGallery.src);
			
			if($(this).find("section-gallery").children().length > 0) {
				sectionGallery.hasImages = true;
				sectionGallery.images = new Array();
				$(this).find("section-gallery").find("section-gallery-image").each(function() {
					sectionGallery.images.push({src: $(this).text()});
				});
			} else {
				sectionGallery.hasImages = false;
			}
		} else {
			sectionGallery = "";
		}
		
		sectionTitle = $(this).find("section-title").text();
		sectionImage = {};
		$(this).find("section-image").each(function() {
			sectionImage.width = $(this).attr("width");
			sectionImage.height = $(this).attr("height");
			sectionImage.src = $(this).attr("src");
			// preload image
			preloadImage(sectionImage.src);
		});
		sectionVideo = {};
		$(this).find("section-video").each(function() {
			sectionVideo.width = $(this).attr("width");
			sectionVideo.height = $(this).attr("height");
			sectionVideo.src = $(this).attr("src");
		});
		sectionDescription = {};
		$(this).find("section-desc").each(function() {
			sectionDescription.descClient = $(this).find("desc-client").text();
			sectionDescription.descContent = $(this).find("desc-content").text();
			sectionDescription.descLink = $(this).find("desc-link").text();
			sectionDescription.descLinkUrl = $(this).find("desc-link").attr("src");
		});
		if(sectionTitle != "") {
			if(sectionGallery == "") {
				sectionHtml += "<a class='shadowbox' href='" + sectionVideo.src + "' rel='shadowbox;width=" + sectionVideo.width + ";height=" + sectionVideo.height + ";' title='" + sectionTitle + "'>";
				sectionHtml += "<img src='" + sectionImage.src + "' width='" + sectionImage.width + "' height='" + sectionImage.height + "' alt='" + sectionTitle + "'></a>";
			} else {
				sectionHtml += "<a class='shadowbox' href='" + sectionGallery.src + "' rel='shadowbox[" + sectionGallery.galleryName + "]' title='" + sectionTitle + "'>";
				sectionHtml += "<img src='" + sectionGallery.src + "' width='" + sectionGallery.width + "' height='" + sectionGallery.height + "' alt='" + sectionTitle + "'></a>";
				if(sectionGallery.hasImages) {
					for(var i=0; i<sectionGallery.images.length; i++) {
						sectionHtml += "<a class='shadowbox' href='" + sectionGallery.images[i].src + "' rel='shadowbox[" + sectionGallery.galleryName + "]' title='" + sectionTitle + "'>";
						sectionHtml += "<img src='" + sectionGallery.images[i].src + "' width='1' height='1' alt='" + sectionTitle + "'></a>";
					}
				}
			}
		} else {
			sectionHtml += "<object type='application/futuresplash' data='" + sectionFlashSource + "' width='" + sectionFlashWidth + "' height='" + sectionFlashHeight + "' id='flash-content'>";
			sectionHtml += "<param name='flashvars' value='" + sectionFlashvars[0].flashvarName + "=" + sectionFlashvars[0].flashvarValue;
			sectionHtml += "&" + sectionFlashvars[1].flashvarName + "=" + sectionFlashvars[1].flashvarValue + "'>";
			sectionHtml += "</object>";
		}
		sectionHtml += "<div class='desc'><p class='desc-client'>Client: <span>" + sectionDescription.descClient + "</span></p>";
		sectionHtml += "<p class='desc-content'>" + sectionDescription.descContent + "</p>";
		sectionHtml += "<p class='desc-link'>";
		if(sectionDescription.descLinkUrl != undefined && sectionDescription.descLinkUrl != "") {
			sectionHtml += "<a href='" + sectionDescription.descLinkUrl + "' target='_blank'>" + sectionDescription.descLink + "</a></p></div>";
		} else {
			sectionHtml += sectionDescription.descLink + "</p></div>";
		}
		if(sectionId == "two") {
			sectionTwoContentNodes.push({
				sectionId: sectionId,
				sectionName: sectionName,
				sectionImage: {width: sectionImage.width, height: sectionImage.height, src: sectionImage.src},
				sectionVideo: {width: sectionVideo.width, height: sectionVideo.height, src: sectionVideo.src},
				sectionDescription: {descClient: sectionDescription.descClient, descContent:sectionDescription.descContent, descLink: sectionDescription.descLink},
				sectionHtml: sectionHtml
			}); 
			numSectionTwoNodes++;
		} else {
			sectionThreeContentNodes.push({
				sectionId: sectionId,
				sectionName: sectionName,
				sectionImage: {width: sectionImage.width, height: sectionImage.height, src: sectionImage.src},
				sectionVideo: {width: sectionVideo.width, height: sectionVideo.height, src: sectionVideo.src},
				sectionDescription: {descClient: sectionDescription.descClient, descContent:sectionDescription.descContent, descLink: sectionDescription.descLink},
				sectionHtml: sectionHtml
			});
			numSectionThreeNodes++;
		}
	});
	initSectionContent();
}
function initSectionContent(sectionId) {
	// first empty the sections
	$("#section-two .section-content").empty()
	$("#section-three .section-content").empty();
	
	// create an empty node to show as the first/default section-node for each section
	var secTwoNodeDiv = $("<div></div>").addClass("section-content-node section-content-node-1");
	var secThreeNodeDiv = $("<div></div>").addClass("section-content-node section-content-node-1");
	
	if(sectionTwoContentNodes.length > 0 && sectionThreeContentNodes.length > 0) {
		// retreive section-specific HTML content from our array
		secTwoNodeDiv.html(sectionTwoContentNodes[0].sectionHtml);
		secThreeNodeDiv.html(sectionThreeContentNodes[0].sectionHtml);
	} else {
		alert("content arrays empty!");
	}
	
	// append the HTML to the page
	$("#section-two .section-content").append(secTwoNodeDiv);
	$("#section-three .section-content").append(secThreeNodeDiv);
	
	Shadowbox.setup("a.shadowbox");
}
function showSectionNode(id) {
	
	// Create HTML node on the fly
	var nodeDiv = $("<div></div>").addClass("section-content-node section-content-node-"+id);
	// Set the CSS to hide it on left/right side of screen
	if(id > currentNode) {
		nodeDiv.css("left", "960px");
	} else {
		nodeDiv.css("left", "-960px");
	}
	// Populate DIV with the node HTML
	if(currentSection == "two") {
		nodeDiv.html(sectionTwoContentNodes[id-1].sectionHtml);
	} else {
		nodeDiv.html(sectionThreeContentNodes[id-1].sectionHtml);
	}		
	
	// Add it off screen
	$("#section-" + currentSection + " .section-content").append(nodeDiv);
	
	// animate the current node off screen and new node on screen
	// Set the CSS to hide it on left/right side of screen
	if(id > currentNode) {
		$(".section-content-node-" + currentNode).animate({left: "-960px"}, ANIMATION_SPEED, removeSection);
	} else {
		$(".section-content-node-" + currentNode).animate({left: "960px"}, ANIMATION_SPEED, removeSection);
	}
	$(".section-content-node-" + id).animate({left: "30px"}, ANIMATION_SPEED);
	
	// Update nav icons
	$(".nav-link").each(function() {
		$(this).removeClass("nav-link-active");
	});
	$(".nav-link-" + id).addClass("nav-link-active");
	
	// Update which node is now showing
	currentNode = id;
	
	// Apply Shadowbox to the recently added content
	Shadowbox.setup("a.shadowbox");
}
function removeSection() {
	$(this).remove();
}

/**
 * This function responds to a mouse click on a section title and expands the section down.
 * It reveals the content inside the section once the section has opened up via the use
 * of a callback function called after the expanding animation is done.
 *
 */
function expandSection(id) {
	currentNode = 1;
	
	var ref = $("#section-" + id);
	switch(id) {
		case "one":
			ref.animate({height: SECTION_ABOUT_HEIGHT}, ANIMATION_SPEED, function() {$(this).find(".section-content").fadeIn();});
			break;
		case "four":
			$("#content #section-four .section-content").css({marginTop: "0px", display:"none"});
			ref.animate({height: SECTION_CONTACT_HEIGHT}, ANIMATION_SPEED, function() {$(this).find(".section-content").fadeIn();});
			break;
		default:
			ref.animate({height: SECTION_OPEN_HEIGHT}, ANIMATION_SPEED, showSectionContent);
	}
	
	var h;
	// if a section is open, close it
	$(".section").each(function() {
		h = $(this).css("height").split("px")[0];
		if(h > 100)
			collapseSection($(this).attr("id").split("-")[1]);
	});
}

/**
 * This function responds to a mouse click on a section title and collapses the section up.
 * It fades out the section elements and then closes
 *
 */
function collapseSection(id) {
	var section = $("#section-" + id);
	section.find(".section-content").fadeOut();
	section.find(".section-nav-container").fadeOut();
	section.animate({height: SECTION_CLOSED_HEIGHT}, ANIMATION_SPEED, function() {resetSection(id);});
}

/**
 * This function is called to show the content of a section once the section has finished
 * it's "expanding" animation. It is passed $(this) as a reference to the expanding <div> element
 *
 */
function showSectionContent() {
	$(this).find(".section-content").fadeIn();
	revealNavigation();	
}

/**
 * This function reveals the navigation bar within a section. It dynamically creates the proper
 * number of nav links and animates the "building" of the navigation UI
 *
 */
function revealNavigation() {
	switch(currentSection) {
		case "two":
			// First animate the left/right nav borders
			$("#section-two .section-nav-container").fadeIn();
			var w = 40 + (numSectionTwoNodes * NAV_LINK_WIDTH);
			var adj = numSectionTwoNodes > 3 ? (numSectionTwoNodes - 3) * 100 : 0;			
			$("#section-two .section-nav").animate({width: w+"px"}, (ANIMATION_SPEED + adj), 
									
				// Then populate the actual nav links and fade them in
				function() {					
					for(var i=1; i<=numSectionTwoNodes; i++) {
						if(i==1) {
							$("#section-two .section-nav-container .nav-border-right").before("<a class='nav-link nav-link-active nav-link-"+i+"'></a>");
						} else {
							$("#section-two .section-nav-container .nav-border-right").before("<a class='nav-link nav-link-"+i+"'></a>");
						}
					}
					$("#section-two .nav-link").fadeIn();
				}
			);
			break;
		case "three":
			// First animate the left/right nav borders
			$("#section-three .section-nav-container").fadeIn();
			var w = 40 + (numSectionThreeNodes * NAV_LINK_WIDTH);
			var adj = numSectionThreeNodes > 3 ? (numSectionThreeNodes - 3) * 100 : 0;			
			$("#section-three .section-nav").animate({width: w+"px"}, (ANIMATION_SPEED + adj), 
									
				// Then populate the actual nav links and fade them in
				function() {					
					for(var i=1; i<=numSectionThreeNodes; i++) {
						if(i==1) {
							$("#section-three .section-nav-container .nav-border-right").before("<a class='nav-link nav-link-active nav-link-"+i+"'></a>");
						} else {
							$("#section-three .section-nav-container .nav-border-right").before("<a class='nav-link nav-link-"+i+"'></a>");
						}
					}
					$("#section-three .nav-link").fadeIn();
				}
			);
			break;
		default:
			break;
	}
}

/**
 * This function removes the HTML elements from the div once it is off-screen.
 * It also sets up the first slide in that section for the next time that section
 * is expanded.
 *
 */
function resetSection(id) {
	$("#section-" + id + " .section-content-node").remove();
	$("#section-" + id + " .nav-link").remove();
	$("#section-" + id + " .section-nav").css("width", SECTION_NAV_CLOSED_WIDTH);
	initSectionContent(id);
}

/**
 * This function preloads an image by creating an <img> element
 * from the passed "_src" and appending it to our hidden div
 *
 */
function preloadImage(_src) {
	//alert("preload image: " + _src);
	$("#image-preload").append("<img src='" + _src + "'>");
}

// Google Map Stuff (Google Map API V3)
function initGoogleMap() {
	// create center point for map
	var pntCenter = new google.maps.LatLng(40.76, -73.9205);
	// create options object, (has center point, zoom level, and map type)
	var myOptions = {
		zoom: 15,
		center: pntCenter,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	// instantiate map object
	var map = new google.maps.Map(document.getElementById("map"), myOptions);
	
	// create marker point for office location
	var pntOffice = new google.maps.LatLng(40.7573, -73.9240);
	var marker = new google.maps.Marker({
		position: pntOffice, 
		map: map, 
		title:"RelaTV Media Office"
	});
	
	// create info window HTML
	var infoHtml = "<img src='images/mapEye.gif' width='30' height='30' alt='RelaTV Icon' />";
	infoHtml += "<h3>RelaTV Media Corp</h3>";
	var infowindow = new google.maps.InfoWindow({content: infoHtml});
	// directly call open() so info window is open by default
	infowindow.open(map,marker);
}