var backgroundElement;
var imageElement;
var currentImage;
var currentStatus;

var nextImage;
var prevImage;

var testelement;
var initialized = 0;


var GalleryImageTextArray = new Array();
var GalleryImagePathArray = new Array();
var GalleryImageNextArray = new Array();
var GalleryImagePrevArray = new Array();


function framework_initialize() {
	initialized = 1;
	backgroundElement = document.createElement("div");
	
	backgroundElement.style.position = "fixed";
	backgroundElement.style.left = "0px";
	backgroundElement.style.top = "0px";
	backgroundElement.style.width = "100%";
	backgroundElement.style.height = "100%";
	backgroundElement.style.backgroundColor = "#000000";
	backgroundElement.style.display = "none";
	backgroundElement.style.zOrder = 500;
	
	imageElement = document.createElement("div");
	
	imageElement.style.position = "fixed";
	imageElement.style.left = "50%";
	imageElement.style.top = "50%";
	imageElement.style.width = "0px";
	imageElement.style.height = "0px";
	imageElement.style.backgroundColor = "#FFFFFF";
	imageElement.style.backgroundImage = "url(image/previewbackground.jpg)";
	imageElement.style.backgroundPosition = "center";
	imageElement.style.backgroundRepeat = "no-repeat"
	imageElement.style.overflow = "hidden";
    	imageElement.style.zOrder = 501;
	

	
	document.getElementsByTagName("body")[0].appendChild(backgroundElement);	
	
	document.getElementsByTagName("body")[0].appendChild(imageElement);
	
	currentStatus = 0;

	prevImage = document.createElement("div");
	nextImage = document.createElement("div");

	prevImage.style.position = "absolute";
	prevImage.style.left = "0";
	prevImage.style.bottom = "250px";
	prevImage.style.width = "16px";
	prevImage.style.height = "16px";
	prevImage.style.cursor = "pointer";
	prevImage.style.fontSize = "25px";
	prevImage.style.color = "#FF5555";
	prevImage.style.textAlign = "center";
	prevImage.style.verticalAlign = "center";
	prevImage.style.zIndex = 1005;
	prevImage.style.backgroundImage = "url(image/control_rewind.png)";


	nextImage.style.position = "absolute";
	nextImage.style.right = "0";
	nextImage.style.bottom = "250px";
	nextImage.style.width = "16px";
	nextImage.style.height = "16px";
	nextImage.style.cursor = "pointer";
	nextImage.style.zIndex = 1005;
	nextImage.style.fontSize = "25px";
	nextImage.style.textAlign = "center";
	nextImage.style.verticalAlign = "center";
	nextImage.style.color = "#FF5555";
	nextImage.style.backgroundImage = "url(image/control_fastforward.png)";

	imageElement.onmouseover = function() {
		prevImage.style.display = "";
		nextImage.style.display = "";
	}

	imageElement.onmouseout = function() {
		prevImage.style.display = "none";
		nextImage.style.display = "none";
	}

	imageElement.appendChild(prevImage);
	imageElement.appendChild(nextImage);
}

function framework_expandImage() {
	new Effect.Morph(imageElement, {
		style:"width: "+(currentImage.width+20)+"px; height: "+(currentImage.height+20)+"px; margin-left: -"+((currentImage.width+20)/2)+"px; margin-top: -"+((currentImage.height+20)/2)+"px; left: 50%; top: 50%;",
		duration: 0.25
	});
	
	window.setTimeout("Effect.Appear(currentImage);", 1500);
}

function framework_hideImage() {
	testelement.innerHTML = "";
    
	Effect.Fade(currentImage, { duration: 0.25 } );
	Effect.Fade(backgroundElement, { duration: 0.25 } );

	window.setTimeout('new Effect.Morph(imageElement, { style:"width: 0px; height: 0px; margin-left: 0px; margin-top: 0px; left: 50%; top: 50%;", duration: 0.25 });', 500);
}

function framework_showImage(path) {
    if(initialized == 0) {
    	framework_initialize();
    }
    
    if(currentImage != false && currentImage != null) {
    	currentImage.parentNode.removeChild(currentImage);
    }
    
	currentImage = new Image();
	currentImage.src = GalleryImagePathArray[path];

	imageElement.appendChild(currentImage);
    	imageElement.style.position = "absolute";
	imageElement.style.zIndex = 200;

    testelement = document.createElement("div");
    
    
    testelement.style.backgroundColor = "#FFFFFF";
    
    
    testelement.style.padding = "3px";
    
    
    testelement.style.position = "absolute";
    
    
    testelement.style.width = "100%";
    
    
    testelement.style.textAlign = "center";
    
    testelement.innerHTML = GalleryImageTextArray[path];
    
    //testelement.setOpacity(0.5);
    
    
    imageElement.appendChild(testelement);

	//currentImage.setOpacity(0);
	currentImage.style.position = "absolute";
	currentImage.style.marginTop = "10px";
	currentImage.style.marginLeft = "10px";
	currentImage.style.cursor = "pointer";
	currentImage.onclick = framework_hideImage;


	prevImage.onclick = function() {
		framework_hideImage();
		window.setTimeout("framework_showImage(\""+GalleryImagePrevArray[path]+"\")", 1100);
	}

	nextImage.onclick = function() {
		framework_hideImage();
		window.setTimeout("framework_showImage(\""+GalleryImageNextArray[path]+"\")", 1100);
	}
	
    currentImage.onload = framework_expandImage;
    
	Effect.Appear(backgroundElement, { from: 0.0, to: 0.75, duration: 0.5 });
	
}


function IntializeHeaderImage(immediately) {
	if(isNaN(immediately))
		immediately = 0;
		
	immediately = 1-immediately;
	var parentElement = document.getElementById('SITE_header');
	
	var i = 0;
	
	for(i = 0; i < 5; i++) {
		
		var Element = document.createElement('div');
		Element.className = 'headerImage';
		Element.style.left = 3+(i*160)+"px";
		Element.style.display = 'none';
		Element.id = 'headerImage_'+i;
		
		window.setTimeout("Effect.Appear('"+Element.id+"');", i*(250*immediately));

		parentElement.appendChild(Element);	
	}
}

function ParseMenu(classr) {
	var entries = document.getElementsByClassName(classr);
	for(var entry in entries) {
		entries[entry].onmouseover = function() {
			var wid = this.id.split("_")[1];
			
			new Effect.Morph('headerImage_'+wid, { style: 'border: rgb(225,0,0) 2px solid', duration: 0.25 });
			//new Effect.Morph('menu_'+wid, { style: 'color: rgb(225,0,0)', duration: 0.25 });
			new Effect.Morph('menulink_'+wid, { style: 'color: rgb(225,0,0)', duration: 0.25 });
		}
		entries[entry].onmouseout = function() {
			var wid = this.id.split("_")[1];
			new Effect.Morph('headerImage_'+wid, { style: 'border: #BBBBBB 2px solid', duration: 0.25 });
			//new Effect.Morph('menu_'+wid, { style: 'color: #FFFFFF', duration: 0.25 }); 
			new Effect.Morph('menulink_'+wid, { style: 'color: #FFFFFF', duration: 0.25 }); 
		}
	}	
}


function InitializeSite() {
		IntializeHeaderImage(1);
	ParseMenu("MENU_item");
	ParseMenu("headerImage");
	document.getElementsByTagName('body')[0].style.overflowX = "hidden";

}
window.onload = InitializeSite;