document.write("<link href='oktoberHouse.css' rel='stylesheet' type='text/css' />");

document.write("<script type='text/javascript' src='browser-detect.js'> <\/script>");
document.write("<script type='text/javascript' src='objects.js'> <\/script>");
document.write("<script type='text/javascript' src='slideshow.js'> <\/script>");
document.write("<script type='text/javascript' src='scroller.js'> <\/script>");
document.write("<script type='text/javascript' src='utils.js'> <\/script>");

    
// preload menu images
if (document.images)
{
	menuWelcome 			= new Image();
  	menuWelcome.src			=	"img-bin/menuWelcome.gif";  
	menuWelcome_hover		= new Image();
  	menuWelcome_hover.src	=	"img-bin/menuWelcome_hover.gif";
  
  	menuLocation 			= new Image();
  	menuLocation.src		=	"img-bin/menuLocation.gif";  
	menuLocation_hover		= new Image();
  	menuLocation_hover.src	=	"img-bin/menuLocation_hover.gif";
  
  	menuEvents 				= new Image();
  	menuEvents.src			=	"img-bin/menuEvents.gif";  
	menuEvents_hover		= new Image();
  	menuEvents_hover.src	=	"img-bin/menuEvents_hover.gif";
  
  	menuFunctionRooms 			= new Image();
  	menuFunctionRooms.src		=	"img-bin/menuFunctionRooms.gif";  
	menuFunctionRooms_hover		= new Image();
 	menuFunctionRooms_hover.src	=	"img-bin/menuFunctionRooms_hover.gif";
  
  	menuSampleMenu 				= new Image();
  	menuSampleMenu.src			=	"img-bin/menuSampleMenu.gif";  
	menuSampleMenu_hover		= new Image();
  	menuSampleMenu_hover.src	=	"img-bin/menuSampleMenu_hover.gif";
  
  	menuHistory	 			= new Image();
  	menuHistory.src			=	"img-bin/menuHistory.gif";  
	menuHistory_hover		= new Image();
  	menuHistory_hover.src	=	"img-bin/menuHistory_hover.gif";
  	
  	menuLinks	 			= new Image();
  	menuLinks.src			=	"img-bin/menuLinks.gif";  
	menuLinks_hover			= new Image();
  	menuLinks_hover.src		=	"img-bin/menuLinks_hover.gif";
}

function onImageOver(imgName)
{
   if (document.images)
   {
    	img = eval(imgName + "_hover.src");
      document[imgName].src = img;
   }
}

function onImageOut(imgName)
{
   if (document.images)
   {
    	img = eval(imgName + ".src");
      document[imgName].src = img;
   }
}

function init()
{
	// select the first image randomly unless a valid imageIndex has been passed in
	//var	currentImageIndex	= (imageIndex != null && imageIndex <= imageArray.length) /* remember, imageArray is a one-based array */
	//											? imageIndex
	//: Math.floor(Math.random() * (imageArray.length-1) + 1);
	
	// Try to select a promotional gif as first image
	var attempts = 0;
	var justdoit = false;
	var currentImageIndex	= 1;
	do
	{
		currentImageIndex = Math.floor(Math.random() * (imageArray.length-1) + 1);
		if (attempts++ >= 20) justdoit = true;
	}
	while (!isGIF(imageArray[currentImageIndex].file) && !justdoit);
	
	var currentPortfolioIndex	= getPortfolioIndexByPortfolioId(imageArray[currentImageIndex].portfolioId);
	
	// display first image then wait a bit before starting the slideshow so the first image doesn't jump
	onPortfolio(currentPortfolioIndex, false, currentImageIndex);
	setTimeout("startSlideShow()", 18000);
}

function startPageLayout()
{
	document.write('<center>');
	document.write('	<div class="display">');
	document.write('  	<div id="banner"><center><img  src="img-bin/banner.gif" alt="Cassidy\'s Bar"/></center></div>');
	document.write('		<div id="logoLHS"></div><div id="logoRHS"></div>');
	document.write('  	<div id="menu">');
	document.write('  		<span class="smallButton" nowrap><a href="home.html">			<img name="menuWelcome" 		src="img-bin/menuWelcome.gif" 			border="0" onMouseOver="onImageOver(\'menuWelcome\')" 			onMouseOut="onImageOut(\'menuWelcome\')" />			</a><span>');
	document.write('  		<span class="smallButton" nowrap><a href="location.html">		<img name="menuLocation" 		src="img-bin/menuLocation.gif" 			border="0" onMouseOver="onImageOver(\'menuLocation\')" 			onMouseOut="onImageOut(\'menuLocation\')" />		</a><span>');
	document.write('  		<span class="smallButton" nowrap><a href="events.html">			<img name="menuEvents" 			src="img-bin/menuEvents.gif" 			border="0" onMouseOver="onImageOver(\'menuEvents\')" 			onMouseOut="onImageOut(\'menuEvents\')" />			</a><span>');
	document.write('  		<span class="smallButton" nowrap><a href="functionRooms.html">	<img name="menuFunctionRooms" 	src="img-bin/menuFunctionRooms.gif" 	border="0" onMouseOver="onImageOver(\'menuFunctionRooms\')" 	onMouseOut="onImageOut(\'menuFunctionRooms\')" />	</a><span>');
	document.write('  		<span class="smallButton" nowrap><a href="sampleMenu.html">		<img name="menuSampleMenu" 		src="img-bin/menuSampleMenu.gif" 		border="0" onMouseOver="onImageOver(\'menuSampleMenu\')" 		onMouseOut="onImageOut(\'menuSampleMenu\')" />		</a><span>');
	document.write('  		<span class="smallButton" nowrap><a href="history.html">		<img name="menuHistory" 		src="img-bin/menuHistory.gif" 			border="0" onMouseOver="onImageOver(\'menuHistory\')" 			onMouseOut="onImageOut(\'menuHistory\')" />			</a><span>');
	document.write('  		<span class="smallButton" nowrap><a href="links.html">			<img name="menuLinks" 			src="img-bin/menuLinks.gif" 			border="0" onMouseOver="onImageOver(\'menuLinks\')" 			onMouseOut="onImageOut(\'menuLinks\')" />			</a><span>');
	document.write('  	</div>');		
	document.write('  	<div id="content" class="text">');	
	document.write('    	<div id="contentMainPanel">');
	
}
	
function endPageLayout()
{
	document.write('			</div>');	// close contentMainPanel
	
	document.write('			<div id="contentInfoPanel" >');
	doInfoPanel();
	document.write('    	</div>');	
	
	//document.write('		<div id="footer">');
	//doFooter();
	//document.write('		</div>');
	
	document.write('		<div id="OktoberHouse">');
		
	document.write('				<span class="OktoberHouseLink"><a href=\'javascript:openWindow("http://www.oktoberhouse.com", "OktoberHouse")\'>Oktober House Web Design</a></span>');
	document.write('			</div>');
	
	document.write('   	</div>'); // close content
	document.write('	</div>'); // close display	
  document.write('</center>');
}

function openWindow(url, targetName)
{
	//win = window.open(url, targetName);
	
	// on tabbed browsers the tab pane is not re-activated if the window is already open,
	// so just open a new window
	win = window.open(url);
	win.focus();
	return;	
}

function prepareImage(img)
{
	// set cursor
	var target = imageArray[currentImageIndex].onClick;
	img.style.cursor = (target != null && target != "")
									 ? "pointer" 
									 : "default";
	
	// set mouse-over title
	img.title = imageArray[currentImageIndex].title;
	
	// don't display borders around gifs
	img.style.border = isGIF(imageArray[currentImageIndex].file) ? '0' : '1px solid black';
	
	// rescale size								 
	rescaleMainImage(img);	
}

function onPromotion(img)
{
	target = imageArray[currentImageIndex].onClick;
	if (target != null && target != "")
	{
		window.location.href = target;
	}
}

function doInfoPanel()
{
	// SlideShow Panel
	document.write('<div class="infoPanelObject" id="FilterZone" ');
	document.write('    style="filter	:progid:DXImageTransform.Microsoft.Fade(duration=2.0, overlap=0)');
	document.write('		:progid:DXImageTransform.Microsoft.Fade(duration=1.0, overlap=1)">');																					
	document.write('	<img name="mainImage" class="mainImageFrame" src="img-bin/spacer_black.gif" onload="javascript:prepareImage(this);" onClick="javascript:onPromotion(this);" alt="Images" />');
	document.write('</div>');
	
	// Address Panel
	document.write('<div id="infoPanelAddress" class="infoPanelObject">');
	document.write(client.name + '<br>' + client.address + '<br>' + client.address2 + '<br><br>' + client.phone);
	document.write('	<br><br>Email:&nbsp;<span class="link"><a href="mailto:' + client.email + '">' + client.email + '</a></span>');
	document.write('	<br><br><span class="link"><a target="_blank" href="http://www.cassidysbar.bebo.com">www.bebo.com</a></span>');
	document.write('	<br><span class="link"><a target="_blank" href="http://www.myspace.com/cassidysbar">www.myspace.com</a></span>');
	document.write('</div>');	
	
	
	// Scroller Panel
	if (eventArray != null)
	{	
		for (i=0; i<eventArray.length; i++)
		{
			str  = "<span class='eventDate'>" + eventArray[i].date + " " + eventArray[i].time + "</span>";
			str += "<br><span class='eventTitle'>" + eventArray[i].title + "</span>";
			str += "<br><span class='eventDescription'>" + eventArray[i].description + "</span>";
			str += "<br><br>";
			
			pausecontent[i] = str;	
		}
      
		document.write('<div id="infoPanelScroller" class="infoPanelObject">');
		document.write('<div id="infoPanelScrollerTitle">News, Events & Special Offers...</div>');
			
		//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
		new pausescroller(pausecontent, "pscroller1", "someclass", 3000);
		document.write('</div>');
	}

}

function doFooter()
{
	document.write('Footer');
}

function doFilter(id)
{
	if (is_ie5up)
	{
		el = document.getElementById(id);
		if (el && el.filters[0])
		{
			el.filters[0].Apply();
			el.filters[0].Play();
		}
	}
}

function isVisible(id)
{
	return (document.getElementById(id).style.visibility == 'visible') ? true : false;
}

function onImageDetails(stopSS, alwaysShow)
{
	if (alwaysShow == null) alwaysShow = false;
	
	el = document.getElementById('ImageDetailsButton');

	if (isVisible('imageDetails') && !alwaysShow)
	{
		// Toggle image details pane off
		if (el)
		{
			el.src="img-bin/button_image_details.gif";
			el.title = "Click here to display image information";
		}
		
		hideElement('imageDetails');
	}
	else
	{
		if (el)
		{
			el.src="img-bin/button_image_details_hide.gif";
			el.title = "Click here to hide image information";
		}

		showPanel_ImageDetails(stopSS);	
	}
}

function hideImageDetails()
{
	el = document.getElementById('ImageDetailsButton');

	if (el)
	{
		el.src="img-bin/button_image_details.gif";
		el.title = "Click here to display image information";
	}
	
	hideElement('imageDetails');
	
}
				
function showPanel_ImageDetails(stopSS)
{
	if (stopSS == true) stopSlideShow();

	showElement("imageDetails");
}		

function onPortfolio(portfolioIndex, displayDetails, imageIndex)
{
	pf 										= portfolioArray[portfolioIndex];
	currentPortfolioIndex	= portfolioIndex;
		
	if (displayDetails == null) 	displayDetails = true;
	if (imageIndex == null) 			imageIndex = getImageIndexByImageId(pf.mainImageId);
	
	displayImage(imageIndex);
	displayPortfolio(portfolioIndex);

	if (displayDetails == true)
	{
		showPanel('PortfolioDetails');
	}

}

function show(el)
{
	if (el) el.style.visibility = 'visible';
}

function displayPortfolio(portfolioIndex)
{
	currentPortfolioIndex	= portfolioIndex;
	pf = portfolioArray[portfolioIndex];

	el = document.getElementById('portfolioTitle');
  if (el)	el.innerHTML = pf.title;

	portfolioDetailsFrame = document.getElementById('portfolioDetailsFrame');

	if (portfolioDetailsFrame)
	{	
		// Next 2 lines for compatibility with IE and FireFox		
		var doc = (portfolioDetailsFrame.contentWindow || portfolioDetailsFrame.contentDocument || portfolioDetailsFrame.document);
  	if (doc.document) doc = doc.document;

		doc.close();
		doc.open();
		doc.write('<html>');
		doc.write('<head>');
		doc.write('<link href="style.css" rel="stylesheet" type="text/css" />');
		doc.write('</head>');
		doc.write('<body name="thisFrame" class="iframe">');
		//doc.write('<div class="textHeader"><center>' + portfolioArray[currentPortfolioIndex].title + '</center></div><br>');
		doc.write('<div class="text"><center>' + portfolioArray[currentPortfolioIndex].description + '</center></div><br>');
		doc.write('<center><table cellspacing="0" cellpadding="5" class="text">');
		
		// note, portfolioArray is a one (rather than zero) based array
		var col = 0;
		var maxCols = 5;
		for (j=1; j<imageArray.length; j++)
		{
			var img 					= imageArray[j];
			if (img.portfolioId == portfolioArray[currentPortfolioIndex].portfolioId)
			{
				if (col == 0 || col%maxCols==0) doc.write('<table cellspacing="0" cellpadding="5" class="text"><tr>');
				col++;
				
				//var imageCount	= pf.numImages == 1 ? '(1 image)' : '(' + pf.numImages + ' images)';
				var sourceFile	= getSourceFileByImageId(img.imageId);

				doc.write('<td align="center">');
				doc.write('<a href="javascript:parent.stopSlideShow(); javascript:parent.showImage(' + parseInt(j) + ')">');
				doc.write('<img width="0" height="0" style="border:1px solid black;" onMouseOver="javascript:parent.onRollover(this, true)" onMouseOut="javascript:parent.onRollover(this, false)" src="' + sourceFile + '" alt="' + img.title + '" title="Click here to display ' + img.title + '" onload="javascript:parent.rescaleImage(this, 120, 70, true);"/>');
				doc.write('</a>');
				doc.write('</td>');	
				
				if (col%maxCols==0) doc.write('</table></tr>');			
			}
		}
		if (!col%maxCols==0) doc.write('</table></tr>');
		
		doc.write('</table></center>');
		doc.write('</body>');
		doc.write('</html>');
		
		// make the images visible once they have all been rescaled
		//for (i=0; i<doc.images.length; i++) doc.images[i].style.visibility="visible";
		
		doc.close(); // need this otherwise cursor remains as wait cursor on FireFox
		
	}
}

function getPortfolioIndexByPortfolioId(portfolioId)
{
	// return -1 if selected image has not been assigned to a portfolio
	if (portfolioId == null) return 0;

	for (i=1; i<portfolioArray.length; i++)
	{
		if (portfolioArray[i].portfolioId == portfolioId) return i;
	}

	// error: shouldn't be here
	return -1;
}

function PortfolioHasMoreThanOneImage()
{
	switch (portfolioArray[currentPortfolioIndex].numImages)
	{
		case 0:
			alert("There are no images in this portfolio.");
			return false;
		case 1:
			alert("There is only one image in this portfolio.");
			return false;
	}

	return true;
}

function showImage(imageIndex)
{
	displayImage(0, false); // replace current image with a blank image so there is no flicker
	displayImage(imageIndex, true);
	showPanel('mainImage');
	showImageDetailsButton(true);
	showPortfolioTitle(false);
}

function displayImage(imageIndex, doTransition)
{
	if (doTransition == null) doTransition = true;
	
	currentImageIndex = imageIndex;
	
	// note, imageArray is a one (rather than zero) based array
	var img = imageArray[imageIndex];

	src = (img.file == null || img.file == '') ?	'../img-bin/blank_image.jpg' : src = 'img/slideshow/' + img.file;

	// fade in the image - for some strange reason this code must go before document.mainImage.src = src;
	//                     otherwise the new image will briefly appear then fade out and re-fade in rather than the
	//                     old image fading out and the new image fade in.
	if (doTransition)	doFilter("FilterZone");

	document.mainImage.src = src;

	// Title under the Main Image
	el = document.getElementById('MainImageTitle');
	if (el) el.innerHTML = img.title ? img.title : "";
	
	// Image Details Banner
	el = document.getElementById('CurrentImageTitle');
	if (el) el.innerHTML = img.title ? "&nbsp;&nbsp;" + img.title : "";
	
	writeImageDetailsContents(img);
}

function showImageDetailsButton(show)
{
	el = document.getElementById('ImageDetailsButton');
	if (el) 
	{
		el.style.visibility = show ? "visible" : "hidden";	
	}
}

function showPortfolioTitle(show)
{
	el = document.getElementById('portfolioTitle');
	if (el) 
	{
		el.style.visibility = show ? "visible" : "hidden";	
	}
}

function showPortfolio(portfolioIndex)
{
	stopSlideShow();
	showImageDetailsButton(false);
	hideImageDetails();
	showPortfolioTitle(true);
	showPanel('portfolioDetailsFrame');
	onPortfolio(portfolioIndex, false);
}
					
function writeImageDetailsContents(img)
{
	el = document.getElementById('imageDetails');
	if (el && img)
	{
		var pfTitle = portfolioArray[currentPortfolioIndex].title;
		var c = '<table class="text" align="left">';
		if (img.title != "") 				c += '<tr valign="top"><td>Title:</td><td width="5"/><td>' + img.title + '</td></tr>';												
				
		c += '<tr valign="top"><td>Portfolio:</td><td width="5"/><td class="link" nowrap title="Click here to open the ' + pfTitle + ' portfolio">';
		c += '<a href="#" onClick="javascript:showPortfolio(' + currentPortfolioIndex + ')">' + pfTitle + '</a></td></tr>'; 
		// <!-- set href="#" and action thru onClick() otherwise href navigation stops music -->
		
		if (img.catNumber != "") 		c += '<tr valign="top"><td>Cat. No.:</td><td width="5"/><td>' + img.catNumber + '</td></tr>';
		if (img.medium != "") 			c += '<tr valign="top"><td>Medium:</td><td width="5"/><td>' + img.medium + '</td></tr>';					
		if (img.price != "") 				c += '<tr valign="top"><td>Price:</td><td width="5"/><td>' + img.price + '</td></tr>';					
		if (img.description != "") 	c += '<tr height="5"><td><img src="img-bin/spacer.gif"/></td></tr><tr valign="top"><td colspan="3">' + img.description + '</td></tr>';					
			
		c += '</table>';	
		el.innerHTML = c;								
	}
}

function rescaleMainImage(img)
{
	if (img == null) return;
	maxSize = 160;

	if (imageStatsArray[img.src] == null)
	{
		imgStats 			= new Image();
		imgStats.src 	= img.src;
		imageStatsArray[img.src] = new IMAGE_STATS(imgStats.width, imgStats.height);
	}

	w = imageStatsArray[img.src].width;
	h = imageStatsArray[img.src].height;

	if (h >= w)
	{
		// portrait or square image
		img.height	= h > maxSize ? maxSize : h;
		img.width		= img.height / (h/w);
	}
	else
	{
		// landscape image
		img.width 	= w > maxSize ? maxSize : w;
		img.height 	= img.width / (w/h);
	}
		
	setMainImageTitle(img);
}

function setMainImageTitle(img)
{
	// Title under the Main Image
	el = document.getElementById('MainImageTitle');
	if (el)
	{
		el.style.height 		= img.height + 30;
		el.style.width 			= img.width;
		el.style.visibility =  "visible"; // initially it is hidden, otherwise first time site is visited title is displayed under empty gif while user waits for all images to load
	}	
}

function rescaleImage(img, maxWidth, maxHeight, stretch)
{
	if (img == null) return;
	if (maxWidth == null) 	{ maxWidth 	= 340; }
	if (maxHeight == null) 	{ maxHeight = 340; }
	if (stretch == null)		{ stretch		= false; } // stretch image to max width or height
	
	if (imageStatsArray[img.src] == null)
	{
		imgStats 			= new Image();
		imgStats.src 	= img.src;
		imageStatsArray[img.src] = new IMAGE_STATS(imgStats.width, imgStats.height);
	}

	w = imageStatsArray[img.src].width;
	h = imageStatsArray[img.src].height;
	
	img.height	= stretch 
							? maxHeight 
							: h > maxHeight 
								? maxHeight 
								: h;
	img.width		= img.height / (h/w) <= maxWidth
							? img.height / (h/w)
							: maxWidth;
	
}

function getImageIndexByImageId(imageId)
{
	// note, imageArray is a one (rather than zero) based array
	for (i=1; i<imageArray.length; i++)
	{
		if (imageArray[i].imageId == imageId)
			return i;
	}
	
	// Shouldn't be here
	//alert("error:\n\ngetImageIndexByImageId(" + imageId + "): Invalid imageId");
	return 0;
}

function getPortfolioIndexByPortfolioId(portfolioId)
{
	// note, portfolioArray is a one (rather than zero) based array
	for (i=1; i<portfolioArray.length; i++)
	{
		if (portfolioArray[i].portfolioId == portfolioId)
			return i;
	}	
	
	// Shouldn't be here
	//alert("error:\n\ngetPortfolioIndexByPortfolioId(" + portfolioId + "): Invalid portfolioId");
	return 0;
}

function getSourceFileByImageId(imageId)
{
	if (imageId == null || imageId == "")
	{
		return "../img/slideshow/blank_image.jpg";
	}

	// note, imageArray is a one (rather than zero) based array
	for (i=1; i<imageArray.length; i++)
	{
		if (imageArray[i].imageId == imageId)
		{
			return "img/slideshow/" + imageArray[i].file;
		}
	}

	return '';
}

// this is required for a FireFox workaround where the thumbnail style doesn't work
function onRollover(img, mouseOver)
{
	img.style.border = mouseOver ? "1px solid #BF9A32" : "1px solid black";
}