// JavaScript Document
var dataArray = new Array();
var xhr = false;


$(function() {
	if(page=="about" || page =="contact")
	{
		$("#subTrigger").hover(showMenu, hideMenu);
	}
	else if (page=="brides")
	{
			$("#subTrigger").hover(showMenu, hideMenu);
			createXHR("ajaxPhp.php?page=brides");
	}
	else if (page=="bridesmaids")
	{
			$("#subTrigger").hover(showMenu, hideMenu);
			activateImageHover();
			createXHR("ajaxPhp.php?page=bridesmaids");
	}
	else if (page == "gowns")
	{
			
			activateImageHover();
			createXHR("ajaxPhp.php?page=gowns&category="+category);
	}
	else if(page=="index")
	{
		var imgPreload = new Image();
		imgPreload.src="images/indexBg.jpg";
		$("#subTrigger").hover(showMenu, hideMenu);
		imgPreload.onload = function() {
		$("#bgContainer").css("background-image", "url(images/indexBg.jpg)");
		}
		$("#bgContainer").css("background-image", "url(images/indexBg.jpg)");
	}
});

function createXHR(url)
{
			if (window.XMLHttpRequest) {
				xhr = new XMLHttpRequest();
			}
			else {
				if (window.ActiveXObject) {
					try {
						xhr = new ActiveXObject("Microsoft.XMLHTTP");
					}
					catch (e) { }
				}
			}
			if(xhr)
			{
				xhr.onreadystatechange = setArray;
				xhr.open ("GET", url, true);
				xhr.send (null);
			}
}

function setArray()
{
			if (xhr.readyState == 4) {
			if (xhr.status == 200) {
				var myImages = xhr.responseXML.getElementsByTagName("dbImage");
				for(var i = 0; i < myImages.length; i++)
				{
					var myTemp=new Array();
					myTemp["path"]=xhr.responseXML.getElementsByTagName("path")[i].firstChild.nodeValue;
					myTemp["name"]=xhr.responseXML.getElementsByTagName("name")[i].firstChild.nodeValue;
					
					if(page!="brides")
					{
						
						myTemp["colour"]=xhr.responseXML.getElementsByTagName("colour")[i].firstChild.nodeValue;
					}
					dataArray[i] = myTemp;
				}
				
				activateNextPre();
			}
			else {
				var outMsg = "There was a problem with the request " + xhr.status;
			}
		}
}

function showMenu(evt)
{
	$("#subMenu").show();
	//$("#subMenu").fadeTo("fast", 1);
}

function hideMenu(evt)
{
	$("#subMenu").hide();
	//$("#subMenu").fadeTo("fast", 0, function(){$("#subMenu").hide()});
}

function activateNextPre()
{
			$("#nextB").fadeTo("normal", 0.3);
			$("#previousB").fadeTo("normal", 0.3);
			var index=0;
			var step=-270;
			var addedFlag = new Array();
			
			$("#previousB").click(function() {
				if(index>0)
				{
					index--;
					var offset=index*step;
					$("#slide").animate({ left: offset.toString() }, 1000, "swing");
				}
			});
			
			$("#nextB").click(function() {
				if(index<maxIndex)
				{
					if(addedFlag[index]!= true)//don't add the same slide twice
					{
						addSlide(index);
						addedFlag[index] = true;
					}
					
					index++;
					var offset=index*step;
					$("#slide").animate({ left: offset.toString() }, 1000, "swing");
					
				}
			});
			
			$("#previousB").hover(function() {$("#previousB").fadeTo("normal", 0.8);}, function() {$("#previousB").fadeTo("normal", 0.3);});
			
			$("#nextB").hover(function() {$("#nextB").fadeTo("normal", 0.8);}, function() {$("#nextB").fadeTo("normal", 0.3);});
}

function addSlide(index)
{
	var arrayIndex = index + 3; 
	var arrayDisplayIndex = arrayIndex+1;
	var maxIndexDisplay = maxIndex+3;
	if (page!="brides")
	{
		if (page =="bridesmaids")
		{
		var newElement = $("<div class = 'gownImage' style = 'background-image:url("+ dataArray[arrayIndex]["path"] +")'><p class ='bridesmaidsIndex'>"+ arrayDisplayIndex +"&frasl;"+maxIndexDisplay+"</p><div class = 'imageTxtBox'><h2>"+dataArray[arrayIndex]["name"]+"</h2><h3>Colour</h3><p class='imageTxt'>"+ dataArray[arrayIndex]["colour"] +"</p></div></div>");
		}
		else
		{
			var newElement = $("<div class = 'gownImage' style = 'background-image:url("+ dataArray[arrayIndex]["path"] +")'><p class ='gownsIndex'>"+ arrayDisplayIndex +"&frasl;"+maxIndexDisplay+"</p><div class = 'imageTxtBox'><h2>"+dataArray[arrayIndex]["name"]+"</h2><h3>Colour</h3><p class='imageTxt'>"+ dataArray[arrayIndex]["colour"] +"</p></div></div>");
		}
		newElement.appendTo("#slide");
		activateImageHover();
		
	}
	else
	{
		var newElement = $("<div class = 'gownImage' style = 'background-image:url("+ dataArray[arrayIndex]["path"] +")'><p class ='bridesmaidsIndex'>"+ arrayDisplayIndex +"&frasl;"+maxIndexDisplay+"</p></div>");
		newElement.appendTo("#slide");
	}
	
}

function activateImageHover()
{
	$(".gownImage").each(
							function()
							{
								$(this).hover(
									function()
									{
										$(this).find("div.imageTxtBox").css("display","block");
										
									},
									function()
									{
										$(this).find("div.imageTxtBox").css("display","none");
										
									}
								)
								
							}
						)
}

function open_win()
{
	window.open("http://felicitysbridal.blogspot.com");
}