var strImgLoc = "/images/";
var imgLoader = new Image();
var pl = 0;

imgLoader.src = strImgLoc+"preloader.gif";

objImage = new Image();
arrImages = new Array();

arrImages[0] = strImgLoc + "gal_sh_top.png";
arrImages[1] = strImgLoc + "gal_sh_bot.png";
arrImages[2] = strImgLoc + "gal_sh_bg.png";
arrImages[3] = strImgLoc + "gal_close_bt.png";
arrImages[4] = strImgLoc + "video_bg.png";
arrImages[5] = strImgLoc + "ie_vid_bg.gif"

for(intImg=0; intImg<=5; intImg++)
{
	objImage.src=arrImages[intImg];
}

var intImageCount = 0;

/**
 * Swap Image
 * This method loads the passed image in the main gallery image area
 * and applies some styling and positioning once loaded
 */
function swapImage(strLink, intNum)
{
	var objPlaceHolder = document.getElementById('placeHolder');

	while (objPlaceHolder.firstChild)
	{
		objPlaceHolder.removeChild(objPlaceHolder.firstChild);
	}

	var objImage = new Image();

	objImage.onload = function()
	{
		var intWidth  = objImage.width;
		var intHeight = objImage.height;

		decPadding = (440-intHeight)/2;

		objImage.style.paddingTop 		= decPadding+"px";
		objImage.style.paddingBottom 	= decPadding+"px";
		objImage.id						= "curimage";
		objImage.style.display			= "none";

		var objBlanker = document.createElement("div");

		objBlanker.style.width		= "100%";
		objBlanker.style.margin		= "0 auto";
		objBlanker.style.background	= "#ffffff";

		objPlaceHolder.appendChild(objBlanker);
		objBlanker.appendChild(objImage);

		$("#curimage").fadeIn();
	}

	objImage.src=strLink.href;
	document.getElementById('imageno').innerHTML="Showing "+intNum+" of "+intImageCount;
}

/**
 * Build the gallery
 * This method adds the thumbnails with class noShow to the bottom
 * section of the gallery popup
 *
 * @param String strLink
 * @param String strImageURL
 */
function buildGallery(strLink, strImageURL)
{
	var objGalleryThumb = document.createElement('div');
	var objThumbImg		= document.createElement('img');

	objThumbImg.src=strImageURL;

	objGalleryThumb.setAttribute("title","image "+(intImageCount+1));
	objGalleryThumb.className = "galthumb";

	objGalleryThumb.onmouseover = function()
	{
		this.className = this.className.replace("galthumb","galthumb_ov");
	}

	objGalleryThumb.onmouseout = function()
	{
		this.className = this.className.replace("galthumb_ov","galthumb");
	}

	objGalleryThumb.onclick = function()
	{
		swapImage(strLink,this.title);
	}

	objGalleryThumb.appendChild(objThumbImg);

	document.getElementById('thumbHolder').appendChild(objGalleryThumb);
}

/**
 * Load a video URL in an iFrame
 *
 * @param String strVideoURL - Video URL to load
 */
function loadVideo(strVideoURL)
{
	var objGalleryContainer = document.getElementById('galleryContainer');

	if(objGalleryContainer)
	{
		document.getElementById('galleryContainer').style.display="none";
	}

	if($("#videoContainer"))
	{
		$("#videoContainer").remove();
	}

	strHtml = 	'<div id="videoContainer">'+
				'<iframe src="'+strVideoURL+'" frameborder="0">'+
				'</iframe>'+
				'<a href="#" id="videoClose" title="close" alt="close">Close Gallery</a></div>';

	$("#siteContainer").append(strHtml);
	$("#videoContainer").show();

	$("#videoClose").click(
		function()
		{
			$("#videoContainer").remove();
		}
	);

	return false;
}

/**
 * Load the Flash Rotator
 */
function loadRotator(strRotatorURL)
{
	var objGalleryContainer = document.getElementById('galleryContainer');
	var intProductID = $('a.rotator').attr('id');

	if(objGalleryContainer)
	{
		document.getElementById('galleryContainer').style.display="none";
	}

	if($("#rotatorContainer"))
	{
		$("#rotatorContainer").remove();
	}

	strHtml = 	'<div id="rotatorContainer">'+
				'<div id="rotator"></div>'+
				'</div>';

	$("#siteContainer").append(strHtml);
	$("#rotatorContainer").show();

	$("#rotatorClose").click(
		function()
		{
			$("#rotatorContainer").remove();
		}
	);

	var so = new SWFObject("http://image.ebuyer.com/UK/ProductViewer-live.swf", "rotator", "950", "650", "9", "#FFFFFF");
	so.addParam("wmode", "transparent");
  	so.addVariable("id", intProductID);
  	so.addVariable("type", "rotator");
  	so.addParam("allowScriptAccess", "always");
   	so.write("rotator");

	return false;

}

/**
 * Displays the press esc to close message
 */
function showEscMessage()
{
	if($('#escmsg'))
	{
		$('#escmsg').remove();
	}

	var objMsg 	= document.createElement('div');
	objMsg.id	= "escmsg";
	strMsgText 	= document.createTextNode('press Esc to close');

	objMsg.appendChild(strMsgText);
	document.getElementById('galleryContainer').appendChild(objMsg);

	setTimeout('removeEscMsg()',2000);
}

/**
 * Remove Esc Message
 */
function removeEscMsg()
{
	if($('#escmsg'))
	{
		$('#escmsg').fadeOut();
	}
}

/**
 * Generic page function
 */
$(function()
{
	strHtml = 	'<div id="shadow">'+
				'<div id="galleryContainer">'+
				'<div id="galleryTop">'+
				'<a href="#" id="galleryClose" title="close" alt="close">Close Gallery</a>'+
				'</div>'+
				'<div id="galleryArea">'+
				'<div id="placeHolder"></div>'+
				'<div id="thumbHolder"><p id="imageno"></p></div>'+
				'</div>'+
				'<div id="galleryBase"></div>'+
				'</div>'+
	 			'</div>';

	$("#siteContainer").append(strHtml);

	document.getElementById('galleryClose').onclick=function()
	{
		document.getElementById('galleryContainer').style.display="none";
	}

	var intImageNum = document.getElementById('imageno');
	var arrLinks 	= document.getElementById('siteContainer').getElementsByTagName("a");

	for (var i=0; i<arrLinks.length; i++)
	{
		if(arrLinks[i].className =="gallery")
		{
			arrLinks[i].onclick = function()
			{
				if($("#videoContainer"))
				{
					$("#videoContainer").remove();
				}

				document.getElementById('galleryContainer').style.display="block";
				showEscMessage();
				swapImage(this,this.title);

				return false;
			};


			// if the class of the parent element (the Div) is 'noShow'
			// then build the gallery thumb for this icon
			// this basically just ignores the first Gallery icon which has a class of 'galleryThumbs'
			if (arrLinks[i].parentNode.className == 'noShow')
			{
				buildGallery(arrLinks[i], arrLinks[i].childNodes[0].src);
				intImageCount++;
			}
		}

		if(arrLinks[i].className =="video")
		{
			arrLinks[i].onclick = function()
			{
				loadVideo(this.href);
				return false;
			}
		}

		if(arrLinks[i].className =="rotator")
		{
			arrLinks[i].onclick = function()
			{
				loadRotator(this.href);
				return false;
			}
		}
	}

	//Check if we need another row
	if(intImageCount > 8)
	{
		document.getElementById('thumbHolder').style.height = 190 + "px";
	}

	//listen for keypress and close on escape
	document.onkeydown = function(e)
	{
        if (e == null)
        { // ie
          keycode = event.keyCode;
        }
        else
        { // mozilla
          keycode = e.which;
        }

		// keycode 27 = Esc
        if(keycode == 27)
        {
			var tehGallery 	= document.getElementById('galleryContainer');

	        if(tehGallery)
	        {
	        	tehGallery.style.display="none";
	        }

			if($("#videoContainer"))
			{
				$("#videoContainer").remove();
			}

			if($("#rotatorContainer"))
			{
				$("#rotatorContainer").remove();
			}
        }
	}
});

/**
 * This method is called from Flash ActionScript
 * and removes the flash Rotator element
 */
function removeRotator()
{
	var tehRotator	= document.getElementById('rotatorContainer');
	tehRotator.style.display="none";
}

/**
 * This checks the url for a trigger to trigger a gallery on page load
 * Initially to force the Video playblack to run automatically
 * when coming linking from a targetted eblast
 */
$(function()
{
	var strEburl = new String(document.location); 
		if(strEburl.match(/playvid/))//Initial function tests for 'playvid' to trigger the video playback
		{
			var strQfc = strEburl.match(/\d+/);
			var strVideo = 'http://video.ebuyer.com/'+strQfc;
			loadVideo(strVideo);
		}
});