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;