var objImageLargeContainer;
var objImageOverlay;

window.addEvent("domready", function() {

	if($("REQUESTIMAGES_Cat")) {
		$("REQUESTIMAGES_Cat").addEvent("change", function() {
			window.location = "/imagegallery.asp?REQUESTIMAGES_Cat=" + $("REQUESTIMAGES_Cat").value;
		});
	}

	objImageLargeContainer = $("oImageGalleryLargeHolder");
	objImageOverlay = $("oImageGalleryLargeOverlay");

	var galleryitems = $$("#oImageGalleryList li");
	galleryitems.each(function(galleryitem, i) {
		
		// Get Description
		var itemdescription = $$("#" +galleryitem.id + " div");
		itemdescription = itemdescription[0].innerHTML;
		
		// Get Name
		var itemname = $$("#" +galleryitem.id + " a");
		itemname = itemname[1].innerHTML;
		
		// Get Image URL
		var itemimageurlactual = $$("#" +galleryitem.id + " a");
		var itemimageurl = itemimageurlactual[1].href;
		
		var itemurlinnertext;
		itemurlinnertext = itemimageurlactual[1].innerHTML;
		
		itemimageurlactual[0].href='#';
		itemimageurlactual[1].href='#';
		
		
		// Get Image ID
		var itemimageid = galleryitem.id;
		itemimageid = itemimageid.split("oImageGalleryItem");
		itemimageid = itemimageid[1];
				
		galleryitem.addEvent("click", function(ev) {
		
			var eva = new Event(ev);
			eva.stop();
				
			document.body.style.overflowX='hidden';

			var arrayPageSize = getPageSize();
			var WindowWidth = arrayPageSize[2];
			var WindowHeight = arrayPageSize[3];
			var PageHeight = arrayPageSize[1];
			
			objImageOverlay.style.width = WindowWidth + 'px';
			objImageOverlay.style.height = PageHeight + 'px';
					
			objImageLargeContainer.style.left = ((WindowWidth/2) - (objImageLargeContainer.getStyle('width').toInt() / 2)) +"px";
			objImageLargeContainer.style.top = "214px";
		
			objImageLargeContainer.innerHTML = '<div class="Text"><div class="Padding"><img src="'+itemimageurl+'" /><h2>'+itemname+'</h2><p>'+itemdescription+'</p><br/><input type="button" value="Close" class="Button" onclick="ImageClose();" />&nbsp;&nbsp;&nbsp;<input type="button" value="Add to Request Images Basket" class="Button" onclick="ImageBasketAdd('+itemimageid+');" /></div></div>';

			objImageOverlay.setStyle('opacity', '0.01');
			objImageOverlay.style.display = 'block';
			objImageLargeContainer.style.display = 'block';
			
			
		});
		
		
	});
	
	var galleryrequesteditems = $$("#oImageGalleryRequestedList li");
	galleryrequesteditems.each(function(galleryitem, i) {
		
		// Get Description
		var itemdescription = $$("#" +galleryitem.id + " div");
		itemdescription = itemdescription[0].innerHTML;
		
		// Get Name
		var itemname = $$("#" +galleryitem.id + " a");
		itemname = itemname[1].innerHTML;
		
		// Get Image URL
		var itemimageurl = $$("#" +galleryitem.id + " a");
		itemimageurl = itemimageurl[1].href;
		
		// Get Image ID
		var itemimageid = galleryitem.id;
		itemimageid = itemimageid.split("oImageGalleryItem");
		itemimageid = itemimageid[1];
				
		galleryitem.addEvent("click", function(ev) {
		
			var eva = new Event(ev);
			eva.stop();
			
			document.body.style.overflowX='hidden';

			var arrayPageSize = getPageSize();
			var WindowWidth = arrayPageSize[2];
			var WindowHeight = arrayPageSize[3];
			var PageHeight = arrayPageSize[1];
			
			objImageOverlay.style.width = WindowWidth + 'px';
			objImageOverlay.style.height = PageHeight + 'px';
			
			objImageLargeContainer.style.left = ((WindowWidth/2) - (objImageLargeContainer.getStyle('width').toInt() / 2)) +"px";
			objImageLargeContainer.style.top = "214px";
			
			objImageLargeContainer.innerHTML = '<div class="Text"><div class="Padding"><img src="'+itemimageurl+'" /><h2>'+itemname+'</h2><p>'+itemdescription+'</p><br/><input type="button" value="Close" class="Button" onclick="ImageClose();" /></div></div>';

			objImageOverlay.setStyle('opacity', '0.01');
			objImageOverlay.style.display = 'block';
			objImageLargeContainer.style.display = 'block';
			
			
		});
		
		
	});
	
	objImageOverlay.addEvent("click", function(event) {
		
		objImageOverlay.style.display = 'none';
		objImageLargeContainer.style.display = 'none';
		
	
	});
	 
	
});  

var iRequestImagesCount;
iRequestImagesCount = 0;

function ImageBasketAdd(id){
	
	$("REQUESTIMAGES_IDs1").value=$("REQUESTIMAGES_IDs1").value+id+',';
	$("REQUESTIMAGES_IDs2").value=$("REQUESTIMAGES_IDs2").value+id+',';
	
	iRequestImagesCount = iRequestImagesCount + 1;
	$("oImageGalleryRequestTotal").innerHTML = iRequestImagesCount + " images in basket";
	
	objImageLargeContainer.innerHTML = '<div class="Text"><div class="Padding"><p>This image has been added to your request basket</p></div></div>';
		
	ImageClose.delay(2000);

}

function ImageClose(){
	
	objImageOverlay.style.display = 'none';
	objImageLargeContainer.style.display = 'none';
}



function getPageSize(){
	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	// all but Explorer Mac
	} else if (document.body.scrollHeight > document.body.offsetHeight){
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	// Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
	} else {
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	// all except Explorer
	if (self.innerHeight) {
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	// Explorer 6 Strict Mode
	} else if (document.documentElement && document.documentElement.clientHeight) {
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	// other Explorers
	} else if (document.body) {
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}


	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
	return arrayPageSize;
}

function getPageScroll(){

	var yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {
		yScroll = document.body.scrollTop;
	}

	arrayPageScroll = new Array('',yScroll);
	return arrayPageScroll;
	
}