/****************************************************************
* 							Image divider
* 				   07/04/2008 - Copyright SONOMA SARL
* 				   Original author - Oliver Hitchcock
*
* These functions create a semi-transparent divider that 
* expands from the center of the screen. When fully grown an 
* image is loaded into the center of the divider. A close
* button is also added in the cornder of the divider. When either 
* the image or the close button are clicked the images are unloaded 
* and the divider is shrunk until it disappears.
* 
* REQUIREMENTS
* 
* To call the divider, add loadDivider(Name_of_image) to an event handler (onClick, etc.)
* The name_of_image argument must correspond to first element in one 
* of the entries in the imgs array (see just after end of these comment)
*
* Add the image file name and dimensions (width, height) to the imgs array
* Set the imageDirectory variable to the relative path to the images directory
* 
* Three dividers in the HTML file:
*
* <div id="closeImgHolder"><img src="close.gif" onclick="unloadDivider()" width="63" height="16"></div>
* <div id="subImgHolder">&nbsp;</div>
* <div id="imgHolder" class="transbox">&nbsp;</div>
* 
* The following CSS styles:
*
* #imgHolder {
*	 background-color: #333333;
*   filter:alpha(opacity=60);
*   opacity:0.6;
*   position:absolute;
*   visibility:hidden;
*   z-index:10;
* }
* #subImgHolder {
*   background-color: #ffffff;
*   position:absolute;
*   z-index:11;
* }
* #closeImgHolder {
*   position:absolute;
*   visibility:hidden;
*   width:64px;
*   height:21px;
*   z-index:12;
* }
* And just for good measure, if it was forgotten in the main CSS files:
* img {
*   border:0px;
* }
*
* TESTING
* IE 7.0 		07/04/08
* Firefox 2.0	07/04/08
****************************************************************/

// Image dimensions
var imgs = new Array();
imgs[0] = new Array('DIN125.gif',665,263);
imgs[1] = new Array('DIN7991.gif',665,215);
imgs[2] = new Array('DIN84.gif',663,167);
imgs[3] = new Array('DIN912.gif',663,367);
imgs[4] = new Array('DIN931.gif',663,201);
imgs[5] = new Array('DIN933.gif',663,150);
imgs[6] = new Array('DIN934.gif',666,230);
imgs[7] = new Array('DIN963.gif',665,167);
// Path to image folder
var imageDirectory = "images/visserie/";
// Pointer to the array holding image data
var imageIndex;
var imgWidth;
var imgHeight;
// The ID of the target divider
var dividerID = "imgHolder";
// Holder for the screen width
var screenWidth;
// Holders for the final divider dimensions
var dividerTargetWidth;
var dividerTargetHeight;
// Holders for the final divider position
var dividerPositionX;
var dividerPositionY = 200;
var dividerCenterPositionY;
// Percentage margin around image (percentage of image width and height)
var percentageMargin = 0.3;
// Number of pixels for each expansion or contraction
var nPixelsPerStep;
// Number of steps to complete open or close
var nOpenCloseSteps = 40;
// Delay (in milliseconds) between each divider expansion or contraction
var nDelayInMSeconds = 8;
// Divider colour and opacity
var nDividerStyleOpacity = 60;
// Holder for the document object (saves having to type 'document')
var d = document;
// Boolean - Holder for the opening or closing flag (true if divider is opening, false if closing)
var dividerIsOpening;
// Holder for the timer ID
var timerID;
// 
function loadDivider(imageFileName) {
	// Get window dimensions 
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		screenWidth = window.innerWidth;
	} else if(d.documentElement && (d.documentElement.clientWidth || d.documentElement.clientHeight)) {
		//IE 6+ in 'standards compliant mode'
		screenWidth = d.documentElement.clientWidth;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		screenWidth = d.body.clientWidth;
	}
	// tidy up any previous dividers
	removeSubDividers();
	// Get the image dimension data based on file name
	imageIndex = getImageIndex(imageFileName);
	if(imageIndex==-1) return;
	imgWidth = imgs[imageIndex][1];
	imgHeight = imgs[imageIndex][2];	
	// Calculate final width and height of divider based on image dimensions
	var margin = Math.max((imgWidth*percentageMargin), (imgHeight*percentageMargin));
	dividerTargetWidth = imgWidth + margin;
	dividerTargetHeight = imgHeight + margin;
	// Calculate final position of complete divider (x & y)
	dividerPositionX = (screenWidth/2)-(dividerTargetWidth/2);
	// Calculate position of initial horizontal line (1 pixel high) and center for expansion
	dividerCenterPositionY = dividerPositionY + (dividerTargetHeight/2);
	// Calculate number of pixels per step
	nPixelsPerStep = dividerTargetHeight/nOpenCloseSteps;
	// Make sure that the divider is visible as a horizontal line 
	setDividerPositionStyle(1, dividerCenterPositionY);
	// Start counter for divider expansion
	dividerIsOpening = true;
	timerID = setInterval("openCloseDivider();", nDelayInMSeconds);
}

function unloadDivider() {
	dividerIsOpening = false;
	// Remove the image and sub dividers
	removeSubDividers();
	// Begin closing
	timerID = setInterval("openCloseDivider();", nDelayInMSeconds);
}

// 
function openCloseDivider() {
	var currentDividerHeight = parseFloat(d.getElementById(dividerID).style.height);
	var newY;
	var newH;
	// For delay of n seconds, reduce or increase divider height
	if(dividerIsOpening) {
		// When divider reaches target height do callback
		if(currentDividerHeight >= dividerTargetHeight) {
			setDividerPositionStyle(dividerTargetHeight, dividerPositionY);
			clearInterval(timerID);
			callBack();
			return;
		}
		// Increment the divider size
		newH = currentDividerHeight + nPixelsPerStep;
	} else {
		// When divider reaches target height do callback
		if(currentDividerHeight <= 1 || (currentDividerHeight - nPixelsPerStep) <= 1 ) {
			setDividerPositionStyle(1, dividerCenterPositionY);
			clearInterval(timerID);
			callBack();
			return;
		}
		// Increment the divider size
		newH = currentDividerHeight - nPixelsPerStep;
	}
	newY = dividerCenterPositionY - (newH/2);
	setDividerPositionStyle(newH, newY);
}

// 
function callBack() {
	// If the divider is loading, add image and close button
	if(dividerIsOpening) {
		// Add and center the image OVER the divider
		var mainImgHTML = "<img src=\"" + imageDirectory + imgs[imageIndex][0] + "\" border=\"0\" onClick=\"unloadDivider();\">";
		// position the sub divider
		d.getElementById('subImgHolder').style.height = imgHeight + "px";
		d.getElementById('subImgHolder').style.width = imgWidth + "px";
		d.getElementById('subImgHolder').style.top = (dividerPositionY+((dividerTargetHeight/2) - (imgHeight/2))) + "px";
		d.getElementById('subImgHolder').style.left = (dividerPositionX+((dividerTargetWidth/2) - (imgWidth/2))) + "px";
		d.getElementById('subImgHolder').style.visibility = "visible";
		// add the image
		d.getElementById('subImgHolder').innerHTML = mainImgHTML;
		// add the close button
		d.getElementById('closeImgHolder').style.top = (dividerPositionY+10) + "px";
		d.getElementById('closeImgHolder').style.left = (dividerPositionX+(dividerTargetWidth-73)) + "px";
		d.getElementById('closeImgHolder').style.visibility = "visible";
	} else {
		// If the divider is unloading, remove the remaining horizontal line
		d.getElementById(dividerID).style.visibility = "hidden";
	}
}

// 
function setDividerPositionStyle(height, y) {
	d.getElementById(dividerID).style.height = height + "px";
	d.getElementById(dividerID).style.width = dividerTargetWidth + "px";
	d.getElementById(dividerID).style.top = y + "px";
	d.getElementById(dividerID).style.left = dividerPositionX + "px";
	d.getElementById(dividerID).style.visibility = "visible";
}
//
function removeSubDividers() {
	d.getElementById('subImgHolder').innerHTML = "";
	d.getElementById('subImgHolder').style.visibility = "hidden";
	d.getElementById('subImgHolder').style.height = "0px";
	d.getElementById('subImgHolder').style.width = "0px";
	d.getElementById('subImgHolder').style.top = "0px";
	d.getElementById('subImgHolder').style.left = "0px";
	// Remove the close button
	d.getElementById('closeImgHolder').style.top = "0px";
	d.getElementById('closeImgHolder').style.left = "0px";
	d.getElementById('closeImgHolder').style.visibility = "hidden";
}

// Function returns the index of the image in the imgs array based on a given image file name string
// imageFileName - string 	Image name to match to string in arrays of image data
// Return - integer 		Index of array containing correct image data
//							Returns -1 if no match to image file name found
function getImageIndex(imageFileName) {
	var l = imgs.length;
	for(var i = 0; i < l; i++) {
		if(imgs[i][0]==imageFileName) return i;
	}
	return -1;
}