var beautyNumImage = 4;
var fashionNumImage = 4;
var celebrityNumImage = 4;
var sfxNumImage = 5;
var filmNumImage = 4;

function opacity(id, opacStart, opacEnd, millisec) {
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;

	//determine the direction for the blending, if start and end are the same nothing happens
	if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	} else if(opacStart < opacEnd) {
		for(i = opacStart; i <= opacEnd; i++)
			{
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
	var object = document.getElementById(id).style; 
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
	//if an element is invisible, make it visible, else make it ivisible
	if(document.getElementById(id).style.opacity == 0) {
		opacity(id, 0, 100, millisec);
	} else {
		opacity(id, 100, 0, millisec);
	}
}

function blendimage(divid, imageid, imagefile, millisec) {
	var speed = Math.round(millisec / 100);
	var timer = 0;
	
	//set the current image as background
	document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
	
	//make image transparent
	changeOpac(0, imageid);
	
	//make new image
	document.getElementById(imageid).src = imagefile;

	//fade in image
	for(i = 0; i <= 100; i++) {
		setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
		timer++;
	}
	
	//clear div bg
	setTimeout("document.getElementById('" + divid + "').style.backgroundImage = 'url()';", millisec);
}

function currentOpac(id, opacEnd, millisec) {
	//standard opacity is 100
	var currentOpac = 100;
	
	//if the element has an opacity set, get it
	if(document.getElementById(id).style.opacity < 100) {
		currentOpac = document.getElementById(id).style.opacity * 100;
	}

	//call for the function that changes the opacity
	opacity(id, currentOpac, opacEnd, millisec)
}


/*
*	fadeOutIn(imgID, newSrc, millisec)
*
*	(c) 2007, Kevin Kilcher, kevin@kevinkilcher.com, http://www.kevinkilcher.com
* v1.0
*
*	Fades imgID from 100 to 0 opacity, switches the src of imgID to newSrc and then fades imgID
*		from 0 to 100 opacity. Each fade takes millisec / 1000 seconds to complete.
*/
function fadeOutIn(imgID, newSrc, millisec){
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;

	// swap the image 2 milliseconds after the fade out h as happend.
	setTimeout("document.getElementById('" + imgID + "').style.display = 'none';", millisec + 1);
	setTimeout('document.getElementById("' + imgID + '").src = "' + newSrc + '"', millisec + 2);
	setTimeout("document.getElementById('" + imgID + "').style.display = 'block';", millisec + 3);
	
	for(i = 100; i >= 0; i--){
		setTimeout("changeOpac(" + i + ",'" + imgID + "')",(timer * speed));
		timer++;
	}

	for(i = 0; i <= 100; i++){
		setTimeout("changeOpac(" + i + ",'" + imgID + "')",(timer * speed));
		timer++;
	}
}

/*
*	fadeInOut(imgID, newSrc, millisec)
*
*	(c) 2007, Kevin Kilcher, kevin@kevinkilcher.com, http://www.kevinkilcher.com
* v1.0
*
*	Fades imgID from 0 to 100 opacity, switches the src of imgID to newSrc and then fades imgID
*		from 100 to 0 opacity. Each fade takes millisec / 1000 seconds to complete.
*/
function fadeInOut(imgID, newSrc, millisec){
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;

	// swap the image 2 milliseconds after the fade out h as happend.
	setTimeout("document.getElementById('" + imgID + "').style.display = 'none';", millisec + 1);
	setTimeout('document.getElementById("' + imgID + '").src = "' + newSrc + '"', millisec + 2);
	setTimeout("document.getElementById('" + imgID + "').style.display = 'block';", millisec + 3);
	
	for(i = 0; i <= 100; i++){
		setTimeout("changeOpac(" + i + ",'" + imgID + "')",(timer * speed));
		timer++;
	}

	for(i = 100; i >= 0; i--){
		setTimeout("changeOpac(" + i + ",'" + imgID + "')",(timer * speed));
		timer++;
	}
}

/*
* pause(numberMilliSeconds)
* Pauses code execution for specified time. Uses busy code, not good.
* Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
*/
function pause(numberMillis) {
	var now = new Date();
	var exitTime = now.getTime() + numberMillis;
	while (true) {
		now = new Date();
		if (now.getTime() > exitTime)
			return;
	}
}

/*
*	crossFadeImages(imgID, millisec)
*
*	(c) 2007, Kevin Kilcher, kevin@kevinkilcher.com, http://www.kevinkilcher.com
* v1.0
*
*	Creates a crossfate effect by placing the current image in the bg of the div and fading
*		the new image in over it.
*/
function crossFadeImages(imgID, millisec){
	var fadeDuration = millisec / 1000;
	var imgElement = document.getElementById(imgID);
	var imgInfoArray = imgElement.src.split("/");
	var imgNameArray = imgInfoArray[imgInfoArray.length - 1].split(".");
	var imgNumberArray = imgNameArray[0].split("_");
	var imgNumber = parseInt(imgNumberArray[1]);
	var imgType = imgNumberArray[0];
	
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;
	
	// change the src of the image to the new image.
	var numImage = eval(imgType + "NumImage")
	var newSrc;
	if(imgNumber + 1 <= numImage){
		newSrc = "images/" + imgType + "_";
		if(imgNumber + 1 < 10){ newSrc += "0"; }
		newSrc += (imgNumber + 1) + ".jpg";
	} else {
		newSrc = "images/" + imgType + "_01.jpg";
	}
	
	// fadeOutIn(imgID, newSrc, millisec);
	Effect.Fade(imgElement, {duration: fadeDuration, afterFinish: function(){ imgElement.src = newSrc; pause(500); Effect.Appear(imgElement, {duration: fadeDuration	}); } });
	setTimeout('crossFadeImages("' + imgID+ '", ' + millisec + ');', 15000);
}

/*
*	insertQuicktimeMovie(src, width, height, autoplay, loop, controller)
*
*	(c) 2007, Kevin Kilcher, kevin@kevinkilcher.com, http://www.kevinkilcher.com
* v1.0
*
*	Writes object/embed code into a page inline.
*		src = Relative path to the quicktime video.
*		width = Width of the quicktime video in pixels.
*		height = Height of the quicktime video in pixels.
*		autoplay = TRUE|FALSE to start playing the video as soon as it loads.
*		loop = TRUE|FALSE to loop the video when it is finished.
*		controller = TRUE|FALSE show quicktime controller. If TRUE, 16 pixels are added to height.
*/
function insertQuicktimeMovie(src, width, height, autoplay, loop, controller){
	autoplay = new Boolean(autoplay);
	loop = new Boolean(loop);
	controller = new Boolean(controller);
	width = parseInt(width);
	height = parseInt(height);

	if(controller){
		height += 16;
	}

	objectString  = '<object CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" ';
	objectString += 'width="'+ width +'" height="'+ height +'" ';
	objectString == 'CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">\n';
	objectString += '<param name="src" value="'+ src +'">\n';
	objectString += '<param name="autoplay" value="'+ autoplay +'">\n';
	objectString += '<param name="loop" value="'+ loop +'">\n';
	objectString += '<param name="controller" value="'+ controller +'">\n';
	objectString += '<embed src="'+ src +'" width="'+ width +'" height="'+ height +'" autoplay="'+ autoplay +'" loop="'+ loop +'" controller="'+ controller +'" ';
	objectString += 'pluginspage="http://www.apple.com/quicktime/"></embed>\n';
	objectString += '</object>';
	document.write(objectString);
}

/*
*	insertQTElement(videoID, src, width, height, autoplay, loop, controller)
*
*	(c) 2007, Kevin Kilcher, kevin@kevinkilcher.com, http://www.kevinkilcher.com
* v1.0
*
*	Writes object/embed code into a specified div.
*		assetDiv = ID of the element where the object will be placed.
*		assetID = Base asset ID used to get handles on assetID_author and assetID_info.
*		src = Relative path to the quicktime video.
*		width = Width of the quicktime video in pixels.
*		height = Height of the quicktime video in pixels.
*		autoplay = TRUE|FALSE to start playing the video as soon as it loads.
*		loop = TRUE|FALSE to loop the video when it is finished.
*		controller = TRUE|FALSE show quicktime controller. If TRUE, 16 pixels are added to height.
*/
function insertQTElement(assetDiv, assetID, src, width, height, autoplay, loop, controller){
	assetElement = document.getElementById(assetDiv);
	
	autoplay = new Boolean(autoplay);
	loop = new Boolean(loop);
	controller = new Boolean(controller);
	width = parseInt(width);
	height = parseInt(height);

	if(controller){
		height += 16;
		assetElement.style.height = (parseInt(assetElement.style.height) + 16) + 'px';
	}
	
	var assetFooter = getAssetFooter(assetDiv, assetID);
	
	objectString  = '<object CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" id="videoDisplay" ';
	objectString += 'width="'+ width +'" height="'+ height +'" ';
	objectString += 'CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">\n';
	objectString += '<param name="src" value="'+ src +'">\n';
	objectString += '<param name="autoplay" value="'+ autoplay +'">\n';
	objectString += '<param name="loop" value="'+ loop +'">\n';
	objectString += '<param name="controller" value="'+ controller +'">\n';
	objectString += '<embed id="videoDisplay" src="'+ src +'" width="'+ width +'" height="'+ height + ' ';
	objectString += 'autoplay="'+ autoplay +'" loop="'+ loop +'" controller="'+ controller +'" pluginspage="http://www.apple.com/quicktime/"></embed>\n';
	objectString += '</object>';

	assetElement.innerHTML = objectString + assetFooter;
}

/*
* insertImageElement(assetDiv, assetID, src, width, height)
*
*	(c) 2007, Kevin Kilcher, kevin@kevinkilcher.com, http://www.kevinkilcher.com
* v1.0
*
*	Writes image tag code into specific div.
*		assetDiv = ID of the element where the object will be placed.
*		assetID = Base asset ID used to get handles on assetID_author and assetID_info.
*		src = Relative path to the image file.
*		width = Width of the image in pixels.
*		height = Height of the image in pixels.
*/
function insertImageElement(assetDiv, assetID, src, width, height){
	var imageEl = document.getElementById(assetDiv);
	
	var assetFooter = getAssetFooter(assetDiv, assetID);
	
	var imageString  = '<img src="' + src + '" width="' + width + '" height="' + height + '" alt="" id="imageDisplay">';
	var closeString  = '\n<br /><a href="javascript:closeAssetDiv(\'displayDiv\');">close [x]</a>';
	imageEl.innerHTML = imageString + assetFooter;
}

/*
*	getViewportWidth()
*
*	(c) 2007, Kevin Kilcher, kevin@kevinkilcher.com, http://www.kevinkilcher.com
* v1.0
*
*	Returns the width of the viewport on any browser.
*/
function getViewportWidth(){
	return document.body.offsetWidth ? document.body.offsetWidth : document.documentElement.offsetWidth;
}

/*
*	getViewportHeight()
*
*	(c) 2007, Kevin Kilcher, kevin@kevinkilcher.com, http://www.kevinkilcher.com
* v1.0
*
*	Returns the height of the viewport on any browser.
*/
function getViewportHeight(){
	return window.innerHeight ? window.innerHeight : document.documentElement.offsetHeight;
}

/*
*	getAssetFooter(closeDiv, assetID)
*
*	(c) 2007, Kevin Kilcher, kevin@kevinkilcher.com, http://www.kevinkilcher.com
* v1.0
*
*	Returns the HTML for info div and close div.
*		closeDiv = ID of div to be close by close button.
*		assetID = Base asset ID used to get handles on assetID_author and assetID_info.
*/
function getAssetFooter(closeDiv, assetID){
	var footerString = '';
	
	if(document.getElementById(assetID + '_author').value != '' || document.getElementById(assetID + '_info').value != ''){
		footerString += '<div id="assetInfo">';
		var rExp = /\n/gi;
		if(document.getElementById(assetID + '_author').value != ''){
			footerString += '\n' + document.getElementById(assetID + '_author').value.replace(rExp, '\n<br>') + '<br>';
		}
		
		if(document.getElementById(assetID + '_info').value != ''){
			footerString += '\n' + document.getElementById(assetID + '_info').value.replace(rExp, '\n<br>');
		}
		footerString += '</div>';
	}
	
	footerString += '<div id="closeButton"><a href="javascript:closeAssetDiv(\'' + closeDiv + '\');">close [x]</a></div>';
	footerString += '<div id="clearMe"></div>';

	return footerString;
}

/*
*	showAssetDiv(assetDiv, assetPath, assetWidth, assetHeight)
*
*	(c) 2007, Kevin Kilcher, kevin@kevinkilcher.com, http://www.kevinkilcher.com
* v1.0
*
*	Calculates size and position of the div before showing it on the screen.
*/
function showAsset(assetDiv, assetID, assetPath, assetWidth, assetHeight, assetType){
	// Get a handle on the asset div.
	var theDiv = document.getElementById(assetDiv);
	
	// Close the div in case it is open.
	closeAssetDiv(assetDiv);
	
	
	// Set variables.
	var extraWidth = 0; // should probably be zero.
	var extraHeight = 20; // amount of extra height for close button or whatever.
	var divHTML, divWidth, divHeight, divTop, divLeft, divDisplay;
	var portWidth = getViewportWidth();
	var portHeight = getViewportHeight();
	
	// Hide the div incase it is open.
	theDiv.style.display = 'none';
	theDiv.style.width = '0px';
	theDiv.style.height = '0px';
	
	// Set the dimensions and position of the div.
	divWidth = String(parseInt(assetWidth) + extraWidth);
	divHeight = String(parseInt(assetHeight) + extraHeight);
	pageTopOffset = window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop;
	divTop = Math.round((parseInt(portHeight) / 2) - ((parseInt(assetHeight) + extraHeight) / 2) - (extraHeight / 4) + pageTopOffset);
	if(divTop < 0) divTop = 0;
	divLeft = Math.round((parseInt(portWidth) / 2) - ((parseInt(assetWidth) + extraWidth) / 2));
	divDisplay = "block";
	
	theDiv.style.width = divWidth + 'px';
	// theDiv.style.height = divHeight;
	theDiv.style.top = divTop + 'px';
	theDiv.style.left = divLeft + 'px';
	theDiv.style.display = divDisplay;
	theDiv.style.height = 'auto';
	
	if(navigator.appVersion.indexOf('MSIE') == -1){
		// theDiv.style.position = 'fixed';
	}
	 
	if(assetType == 'movie'){ 
		insertQTElement(assetDiv, assetID, assetPath, assetWidth, assetHeight, true,false,true);
	} else {
		insertImageElement(assetDiv, assetID, assetPath, assetWidth, assetHeight);
	}
}

/*
*	closeAssetDiv(assetDiv)
*
*	(c) 2007, Kevin Kilcher, kevin@kevinkilcher.com, http://www.kevinkilcher.com
* v1.0
*
*	Closses the specified asset div and clears the contents.
*/
function closeAssetDiv(assetDiv){
	theDiv = document.getElementById(assetDiv);
	
	if(assetDiv == 'videoDiv'){
		if(navigator.appVersion.indexOf('Safari') != -1){
			// FIX: Safari keeps playing the video without this line.
			document.videoDisplay.Stop();
		}
	}
	theDiv.innerHTML = '';
	
	theDiv.style.display = 'none';
	theDiv.style.position = 'absolute';
	theDiv.style.width = '0px';
	theDiv.style.height = '0px';
}

function makeEventListener(eventName, bindTo, bubbling){
	var browserInfo = new dlientSniff();	
	
	if(browserInfo.is_ie){
		
	} else {
		
	}
}

/*
*	displayViewportInfo()
*
*	(c) 2007, Kevin Kilcher, kevin@kevinkilcher.com, http://www.kevinkilcher.com
* v1.0
*
*	Displays information about the browser, viewport and window size access methods for the browser.
*/
function displayViewportInfo(){
	var info = '';
	info += 'appName: ' + navigator.appName + '\n';
	info += 'appVersion: ' + navigator.appVersion + '\n';
	info += 'appCodeName: ' + navigator.appCodeName + '\n';
	info += 'language: ' + navigator.language + '\n';
	info += 'platform: ' + navigator.platform + '\n';
	info += '\n';
	info += 'self.innerWidth: ' + self.innerWidth + '\n';
	info += 'self.innerHeight: ' + self.innerHeight + '\n';
	info += 'window.innerWidth: ' + window.innerWidth + '\n';
	info += 'window.innerHeight: ' + window.innerHeight + '\n';
	info += 'document.body.offsetWidth: ' + document.body.offsetWidth + '\n';
	info += 'document.body.offsetHeight: ' + document.body.offsetHeight + '\n';
	info += 'document.body.clientWidth: ' + document.body.clientWidth + '\n';
	info += 'document.body.clientHeight: ' + document.body.clientHeight + '\n';
	info += 'document.documentElement.offsetWidth: ' + document.documentElement.offsetWidth + '\n';
	info += 'document.documentElement.offsetHeight: ' + document.documentElement.offsetHeight + '\n';
	info += 'document.documentElement.clientWidth: ' + document.documentElement.clientWidth + '\n';
	info += 'document.documentElement.clientHeight: ' + document.documentElement.clientHeight + '\n';
	alert(info);
}