var galPointer = 0;
var imgData;
var virtData;
var galData = new Object();
var galOuterDiv;
var galSelectorDiv;
var galNumbers;
var galPageRef;
var galTitle;
var galType;
var virtTourOuterDiv;
var QTInfoDiv;
var galSiteRoot;

function doGallery(obj,urlBase,src){
	galPageRef=obj.innerHTML;
	galSiteRoot = urlBase + '/';
	galleryInit(galPageRef,src);
}

function galleryInit(galPageRef,src){
	galOuterDiv = document.getElementById("graphical-header");
	galSelectorDiv = document.getElementById("gallery-selector");
	if (src != 'central' && src != 'local') src = 'local';
	new Ajax.Request('interactivePanelHandler.axd',{
		method:'post',
		parameters: {p: galPageRef, sd: src},
		onSuccess: function(transport){
			var json = transport.responseText.evalJSON();
			imgData = json.gallery;
			for(var i=0; i<imgData.length; i++){
				imgData[i].imageurl = imgData[i].imageurl.replace(/\(/, '%28');
				imgData[i].imageurl = imgData[i].imageurl.replace(/\)/, '%29');
				imgData[i].imageurl = imgData[i].imageurl.replace(/"/, '%22');
				imgData[i].imageurl = imgData[i].imageurl.replace(/'/, '%27');
			}
			virtData = json.virttour; /*Uncomment this when backend configuration is done*/
			galleryDraw(1, galPointer);
		}
	});
}

function galleryDraw(type, which){
	if(type==1){
		galData = imgData;
		galType = "image";
	}else if(type==2){
		galData = virtData;
		galType = "movie";
	}
	//Cleanup routine removes the children of galSelectorDiv
	galPointer = 0;
	while (galSelectorDiv.childNodes[0]){
		galSelectorDiv.removeChild(galSelectorDiv.lastChild);
	}
	if(document.getElementById("virt-tour")){
		divToRemove=document.getElementById("virt-tour");
		divToRemove.style.display = 'none';
		galOuterDiv.removeChild(divToRemove);
	}
	if(document.getElementById("QTInfo")){
		divToRemove=document.getElementById("QTInfo");
		divToRemove.style.display = 'none';
		galOuterDiv.removeChild(divToRemove);
	}
	// Check whether there are any gallery images to display
	if (galData.length > 0) {
		galleryPlaceImage(which);
		galleryDrawHeader(type);
		galleryDrawMainSelector(which);
	}
	return false;
}

function galleryDrawMainSelector(which){
	galleryDrawTitle(which);
	if(galData.length > 1){
	    galleryDrawPrev(which);
	    galleryDrawSelector(which);
	    galleryDrawNext(which);
	}
	galleryDrawClear();
	galleryHideDefaultImage();
	galSelectorDiv.style.display = 'block';
}

function galleryPlaceImage(which){
	if(galType=="image"){
		var gallImg = galData[which].imageurl;
	}else if(galType=="movie"){
		var gallImg = imgData[0].imageurl;
		createVirtDiv();
		virtInsertMovie(which);
	}
	galOuterDiv.style.backgroundImage = "url(" + galSiteRoot + gallImg + ")";
}

function galleryDrawHeader(type){
	// Only show the gallery/virtual tours buttons if there are virtual tours
	if (virtData.length > 0){
		var container = document.createElement("div");
		galSelectorDiv.appendChild(container);
		container.setAttribute("id", "galHeader");
		if(type==1){
			if(imgData.length){ //Write in the gallery switch (and it starts active)
				var html = "<div class=\"icon\"><img src=\"" + galSiteRoot + "images/eh-hotel/icons/image-gallery-on.gif\" /></div><div class=\"link\">Photo gallery</div>";
				var galSwitch = document.createElement("div");
				container.appendChild(galSwitch);
				galSwitch.setAttribute("id", "imgSwitchOff");
				galSwitch.innerHTML = html;
			}
			if(virtData.length){ //Write in the virtTour gallery switch (starts inactive)
				var html = "<div class=\"icon\"><img src=\"" + galSiteRoot + "images/eh-hotel/icons/virt-tour-off.gif\" /></div><div class=\"link\"><a href=\"#\" onclick=\"return galleryDraw(2,0);\">Virtual tours</a></div>";
				var virtSwitch = document.createElement("div");
				container.appendChild(virtSwitch);
				virtSwitch.setAttribute("id", "virtSwitch");
				virtSwitch.innerHTML = html;
			}
			var div = document.createElement("div");
			div.className = "clear";
			container.appendChild(div);
		}else if(type==2){
			if(imgData.length){ //Write in the gallery switch (and it starts active)
				var html = "<div class=\"icon\"><img src=\"" + galSiteRoot + "images/eh-hotel/icons/image-gallery-off.gif\" /></div><div class=\"link\"><a href=\"#\" onclick=\"return galleryDraw(1,0);\">Photo Gallery</a></div>";
				var galSwitch = document.createElement("div");
				container.appendChild(galSwitch);
				galSwitch.setAttribute("id", "imgSwitch");
				galSwitch.innerHTML = html;
			}
			if(virtData.length){ //Write in the virtTour gallery switch (starts inactive)
				var html = "<div class=\"icon\"><img src=\"" + galSiteRoot + "images/eh-hotel/icons/virt-tour-on.gif\" /></div><div class=\"link\">Virtual tours</div>";
				var virtSwitch = document.createElement("div");
				container.appendChild(virtSwitch);
				virtSwitch.setAttribute("id", "virtSwitchOff");
				virtSwitch.innerHTML = html;
			}
			var div = document.createElement("div");
			div.className = "clear";
			container.appendChild(div);
		}
	}
}

function galleryDrawTitle(which){
	var text = galData[which].subjecttitle;
	var para = document.createElement("p");
	galSelectorDiv.appendChild(para);
	para.className = "title";
	para.setAttribute("id", "galTitle");
	var title = document.createTextNode(text);
	galTitle = text;
	para.appendChild(title);
}

function galleryChangeTitle(whichTitle){
	var ref = whichTitle.getAttribute("href");
	var index = ref.substring(1);
	var newTitle = galData[index].subjecttitle;
	var titleElement = document.getElementById("galTitle");
	titleElement.innerHTML = newTitle;
}

function galleryReverseTitle(){
	var titleElement = document.getElementById("galTitle");
	titleElement.innerHTML = galTitle;
}

function galleryDrawSelector(which){
	galNumbers = document.createElement("div");
	galNumbers.setAttribute("id", "numbers");
	galSelectorDiv.appendChild(galNumbers);
	for(var i=0;i<galData.length;i++){
		var imageurl = galData[i].imageurl;
		var div = document.createElement("div");
		galNumbers.appendChild(div);
		div.className = "imgnum";
		var num = document.createTextNode(i+1);
		if(i != galPointer){
			var anch = document.createElement("a");
			div.appendChild(anch);
			anch.setAttribute("href", ("#" + i));
			anch.appendChild(num);
		}else{
			div.appendChild(num);
		}
	}
	var links = galNumbers.getElementsByTagName("a");
	for(var x=0;x<links.length;x++){
		links[x].onclick = function(){
			return galleryShowPic(this);
		}
		links[x].onmouseover = function(){
			return galleryChangeTitle(this);
		}
		links[x].onmouseout = function(){
			return galleryReverseTitle();
		}
	}
}

function galleryDrawPrev(which){
	var prevImg = Number(which) - 1;
	var div = document.createElement("div");
	div.setAttribute("id", "galPrev");
	galSelectorDiv.appendChild(div);
	div.className = "imgnum";
	var prevText = document.createTextNode("<");
	
	if(which>0){
		var anch = document.createElement("a");
		div.appendChild(anch);
		anch.setAttribute("href", ("#" + prevImg));
		anch.appendChild(prevText);
		anch.onclick = function(){
			return galleryShowPic(this);
		}
		anch.onmouseover = function(){
			return galleryChangeTitle(this);
		}
		anch.onmouseout = function(){
			return galleryReverseTitle();
		}
	}else{
		div.appendChild(prevText);
	}
}

function galleryDrawNext(which){
	var nextImg = Number(which) + 1;
	var div = document.createElement("div");
	div.setAttribute("id", "galNext");
	galSelectorDiv.appendChild(div);
	div.className = "imgnum";
	var nextText = document.createTextNode(">");
	
	if(which<(galData.length-1)){
		var anch = document.createElement("a");
		div.appendChild(anch);
		anch.setAttribute("href", ("#" + nextImg));
		anch.appendChild(nextText);
		anch.onclick = function(){
			return galleryShowPic(this);
		}
		anch.onmouseover = function(){
			return galleryChangeTitle(this);
		}
		anch.onmouseout = function(){
			return galleryReverseTitle();
		}
	}else{
		div.appendChild(nextText);
	}
}

function galleryDrawClear(){
	var div = document.createElement("div");
	div.className = "clear";
	galSelectorDiv.appendChild(div);
}

function galleryIndexSelector(oldIndex, newIndex){
	var oldNumber = Number(oldIndex) + 1;
	var newNumber = Number(newIndex) + 1;
	var links = galNumbers.getElementsByTagName("a");
	for(var i=0;i<links.length;i++){
		
		var test = links[i].getAttribute("href").substring(1);
		if(test == newIndex){
			links[i].parentNode.innerHTML = newNumber;
		}
	}
	//Activate the old index
	var elementToActivate = galNumbers.getElementsByTagName("div")[oldIndex];
	elementToActivate.innerHTML = "";
	var newLink = document.createElement("a");
	elementToActivate.appendChild(newLink);
	newLink.setAttribute("href", "#" + oldIndex);
	var text = document.createTextNode(oldNumber);
	newLink.appendChild(text);
	newLink.onclick = function(){
		return galleryShowPic(this);
	}
	newLink.onmouseover = function(){
		return galleryChangeTitle(this);
	}
	newLink.onmouseout = function(){
		return galleryReverseTitle();
	}
	//Sort the prev and next
	//prev first
	var prevDiv = document.getElementById("galPrev");
	var prevText = document.createTextNode("<");
	var prevImg = Number(newIndex) - 1;
	prevDiv.innerHTML = "";
	if(newIndex>0){
		var anch = document.createElement("a");
		prevDiv.appendChild(anch);
		anch.setAttribute("href", ("#" + prevImg));
		anch.appendChild(prevText);
		anch.onclick = function(){
			return galleryShowPic(this);
		}
		anch.onmouseover = function(){
			return galleryChangeTitle(this);
		}
		anch.onmouseout = function(){
			return galleryReverseTitle();
		}
	}else{
		prevDiv.appendChild(prevText);
	}
	//next last
	var nextDiv = document.getElementById("galNext");
	var nextText = document.createTextNode(">");
	var nextImg = Number(newIndex) + 1;
	nextDiv.innerHTML = "";
	if(newIndex<(galData.length-1)){
		var anch = document.createElement("a");
		nextDiv.appendChild(anch);
		anch.setAttribute("href", ("#" + nextImg));
		anch.appendChild(nextText);
		anch.onclick = function(){
			return galleryShowPic(this);
		}
		anch.onmouseover = function(){
			return galleryChangeTitle(this);
		}
		anch.onmouseout = function(){
			return galleryReverseTitle();
		}
	}else{
		nextDiv.appendChild(nextText);
	}
}

function galleryShowPic(whichPic){
	var ref = whichPic.getAttribute("href");
	var index = ref.substring(1);
	var newTitle = galData[index].subjecttitle;
	var oldIndex = galPointer;
	galTitle = newTitle;
	galPointer = index;
	galleryIndexSelector(oldIndex, galPointer);
	var titleElement = document.getElementById("galTitle");
	titleElement.innerHTML = newTitle;
	
	if(galType=="image"){
		var img = galData[index].imageurl;
		galOuterDiv.style.backgroundImage = "url("  + galSiteRoot + img + ")";
	}else if(galType=="movie"){
		virtInsertMovie(index);
	}
	return false;
}

function galleryHideDefaultImage(){
	var dImage = ftnGetObject('gallery-default');
	if(dImage!=null){
		var container = dImage.parentNode;
		container.removeChild(dImage);
	}
}
	
function galleryAlert(string){
	alert("GALLERY SAYS: " + string);
}

function virtDraw(which){
	// Check whether there are any gallery images to display
	if (virtData.length > 0) {
		virtInsertMovie(which);
	}
	return false;
}

function createVirtDiv(){
	virtTourOuterDiv = document.createElement("div");
	virtTourOuterDiv.setAttribute("id", "virt-tour");
	galOuterDiv.appendChild(virtTourOuterDiv);
	QTInfoDiv = document.createElement("div");
	QTInfoDiv.setAttribute("id", "QTInfo");
	galOuterDiv.appendChild(QTInfoDiv);
	//HTML for the quicktime info panel - may need tidying for accessibility - sorry Geoff, I was in a hurry!
	var html = "<div id=\"QTInfoText\"><p class=\"text-title\"><img src=\"" + galSiteRoot + "images/eh-hotel/text/look-around.gif\" alt=\"Take a look around\" /></p><p>Explore our virtual tours and get a real feel for Exclusive Hotels.</p><p>Navigate your way around the tour by clicking over the image and using your mouse to point the way - and don&rsquo;t forget to to zoom in to get a closer look using the + and - controls!</p><p class=\"text-title\"><img src=\"" + galSiteRoot + "images/eh-hotel/text/cant-tour.gif\" alt=\"Can't see the tour?\" /></p><p>The virtual tour requires that you have QuickTime. Please click to download it so you don&rsquo;t miss out on a little sneak preview!</p><p><a href=\"http://www.apple.com/quicktime/download/\" style=\"position:relative;color:#ffffff;margin-left:0;\" title=\"Click here to get Quicktime\" target=\"_blank\">Download QuickTime</a></p></div>";
	QTInfoDiv.innerHTML = html;
}

function virtInsertMovie(which){
	// Originally this was just in an iFrame in IE, to get round horrendous rendering
	// issues with the activeX QT plugin, but it seems to be the only way to get the 
	// site menu to render in front of the QTVRs in the other browsers too.
	var vMovie = virtData[which].movieurl;
	var iFrame = document.createElement('iframe');
	iFrame.src = galSiteRoot + 'files/movies/' + vMovie;
	iFrame.style.zIndex = 0;
	iFrame.className = "virtmovie";
	// Need to do border this way to keep IE happy...note camelCase, too - it won't work otherwise
	iFrame.setAttribute('frameBorder','0');
	// It would be nice to set a better background colour or even faded image, but
	// this isn't possible in IE - only way would be to embed the QT in an HTML page 
	// and set the background of that.
	ftnCabRemoveChildElements(virtTourOuterDiv);
	virtTourOuterDiv.appendChild(iFrame);
}

function virtAlert(string){
	alert("VIRT TOUR SAYS: " + string);
}