// _global path. Please edit to make sure all the path is OK.
var _sXMLPath = "/userfiles/galleryxml/";
var _sImgInterfacePath = "/Images/";
var _sImgThumbnailPath = "/userfiles/gallery/thumbs/";
var _sImgZoomPath = "/userfiles/gallery/";

//
// gallery system variable do not edit
var __iImageIndex = 0;
var __iPageIndex = 0;
var __iPageTotal = 0;
var __oSelectedMenu = null;
var __oData = new Array();
var __aPNG = [
	[{img:"sm_c1.png", bg:false},	{img:"sm_b1.png", bg:true},	{img:"sm_c2.png", bg:false}],
	[{img:"sm_b4.png", bg:true},	{img:"", bg:true},			{img:"sm_b2.png", bg:true}],
	[{img:"sm_c4.png", bg:false},	{img:"sm_b3.png", bg:true},	{img:"sm_c3.png", bg:false}]
];
var __iTempLoader =  new Array();
var __iPreloadZoomImage = new Image();
var __pageTweening = false;
//
function fLoadGalleryXML(){
	// load data from XML file
	var sXMLFile = _sXMLPath+"gallery.xml";
	new fLoadXML(sXMLFile, function(xml, oXMLObject){
		fInitGallery(oXMLObject["gallery"][0]);
	});
	//
	// set up background frame
	fInitIframeBg();
	fPreloadInterfaceImages();
}
//
function fPreloadInterfaceImages() {
	// preload blank image
	var iBlankImage = new Image();
	iBlankImage.src = _sImgInterfacePath+"sm_blank.gif";
	//
	// preload shadow images
	for (var i = 0; i<__aPNG.length; i++) {
		if (__aPNG[i].img != "") {
			var iShadowImage = new Image();
			iShadowImage.src = _sImgInterfacePath+__aPNG[i].img;
		}
	}
}
//
function fPreloadImages(){
	for (var i = (__iPageIndex+1)*9; i<(__iPageIndex+2)*9; i++){
		__iTempLoader[i] = new Image();
		if (i<__oData.length && __oData[i].thumb  && !__oData[i].preloaded) {
			__iTempLoader[i].src = _sImgThumbnailPath+__oData[i].thumb;
			__oData[i].preloaded = true;
		}
	}
}
//
function fInitGallery(oXMLObject){
	// set category buttons
	var aCategory = oXMLObject.category;
	var oCategoryList = $("smGalleryCategory").empty();
	__oSelectedMenu = null;
	//
	// set menu title
	var dt = new Element("dt").setText("Velg en kategori").injectInside(oCategoryList);
	//
	// set menu buttons
	for (var i = 0; i<aCategory.length; i++) {
		var dd = new Element("dd");
		//
		// add button only when we have data
		if (aCategory[i].image) {
			dd.injectInside(oCategoryList);
			var a = new Element("a").setProperties({
				href: "javascript:void(0);"
			}).setText(aCategory[i].fGetAttribute("name")).injectInside(dd);
			//
			// set up button behavior
			a.catId = i;
			a.addEvent("click", function(e){
				new Event(e).stop();
				if (__oSelectedMenu == $(this)) {
					return;
				}
				// disable buttons
				$("smGalleryFrame").setOpacity(0.2);
				//
				if (__oSelectedMenu) {
					__oSelectedMenu.removeClass("selected");
				}
				__oSelectedMenu = $(this);
				var oXMLObject = aCategory[__oSelectedMenu.catId];
				$("smGalleryList").innerHTML = "";
				$("smGalleryList").addClass("loadingList");
				setTimeout(function(){
					fLoadGallery(oXMLObject);
				}, 1000);
			});
			//
			// choose the 1st menu item
			if (__oSelectedMenu == null) {
				__oSelectedMenu = a;
				fLoadGallery(aCategory[__oSelectedMenu.catId]);
			}
		}
	}
	//
	// finalize the menu buttons.
	// add class "end" to the last menu item & show menu
	oCategoryList.getLast().addClass("end");
	oCategoryList.setStyle("visibility", "visible");
}
//
function fLoadGallery(oXMLObject){
	// calculate visual page
	__iPageIndex = 0;
	__iPageTotal = Math.ceil(oXMLObject.image.length/9);
	//
	// set up menu title & show list
	$("smGalleryCategory").getFirst().empty().setText("Valg : "+oXMLObject.fGetAttribute("name"));
	$("smGalleryList").innerHTML = "";
	$("smGalleryList").setStyle("visibility", "visible");
	//
	// active menu button
	if (__oSelectedMenu) {
		__oSelectedMenu.addClass("selected");
	}
	// reset data array
	__oData = new Array();
	//
	// create list from the selected data
	for (var i = 0; i<__iPageTotal*9; i++) {
		var oButton = new Element("a").setProperties({
			href: "javascript:void(0);"
		}).injectInside("smGalleryList");
		//
		// show only button only it in the data range
		if (i<oXMLObject.image.length) {
			//
			// store data to a button
			oButton.data = {
				id: oXMLObject.image[i].fGetAttribute("id"),
				date: oXMLObject.image[i].date[0].data,
				title: oXMLObject.image[i].title[0].data,
				desc: oXMLObject.image[i].desc[0].data,
				thumb: oXMLObject.image[i].thumb[0].data,
				img: oXMLObject.image[i].img[0].data,
				linkWeb: oXMLObject.image[i].linkWeb[0].data,
				dataIndex: i,
				preloaded: false
			};
			__oData.push(oButton.data);
			//
			// add class "last" to the last button in row
			if ((i+1)%3 == 0) {
				oButton.addClass("last");
			}
			//
			// add behaviors to a button (apply some animations)
			oButton.addEvents({
				"mouseenter": function(e){
					var oThis = $(this);
					oThis.fx1.stop().start(1, 0.5);
					oThis.fx2.stop().start(-16, 0);
				},
				"mouseleave": function(e){
					var oThis = $(this);
					oThis.fx1.stop().start(0.5, 1);
					oThis.fx2.stop().start(0, -16);
				},
				"click": function(e){
					fShowZoomImage(this.data);
				}
			});
			//
			// add image to a button (placed it in a span tag)
			var oSpanImage = new Element("span").addClass("spanImage").injectInside(oButton);
			var eImage = new Element("img").setProperties({
				//src: _sImgThumbnailPath+oXMLObject.image[i].thumb[0].data,
				//alt: oXMLObject.image[i].desc[0].data
			}).injectInside(oSpanImage);
			eImage.__loaded = false;
			eImage.__src = _sImgThumbnailPath+oXMLObject.image[i].thumb[0].data;
			eImage.__alt = oXMLObject.image[i].desc[0].data;
			//
			// add image information to a button (placed in span tag)
			var oSpanOrder = new Element("span").addClass("spanOrder").setText(i+1).injectInside(oButton);
			var oSpanTitle = new Element("span").addClass("spanTitle").setText(oXMLObject.image[i].title[0].data).injectInside(oButton);
			var oSpanTag = new Element("span").addClass("spanTag").setText("Se mer").injectInside(oSpanImage);
			//
			// attach FX to a button. Predefined.
			oButton.fx1 = new Fx.Style(eImage, "opacity");
			oButton.fx2 = new Fx.Style(oSpanTag, "top");
		} else {
			// hide button if it's not in data range
			oButton.setOpacity(0);
		}
	}
	// reset to normal state
	$("smGalleryList").removeClass("loadingList");
	setTimeout(function(){
		$("smGalleryFrame").setOpacity(0);
	}, 1000);
	//
	// page jump button PREVIOUS
	$("smPrevBtn").setOpacity(0.5).addClass("deactive");
	$("smPrevBtn").onclick = function(e){
		new Event(e).stop();
		if ($("smPrevBtn").hasClass("deactive") || __pageTweening) {
			return;
		}
		__pageTweening = true;
		//
		__iPageIndex--;
		if (__iPageIndex < 0) {
			__iPageIndex = 0;
		}
		fJumpPage();
	};
	//
	// page jump button NEXT
	$("smNextBtn").onclick = function(e){
		new Event(e).stop();
		if ($("smNextBtn").hasClass("deactive") || __pageTweening) {
			return;
		}
		__pageTweening = true;
		//
		__iPageIndex++;
		if (__iPageIndex >= __iPageTotal) {
			__iPageIndex = __iPageTotal - 1;
		}
		fJumpPage();
		//
	};
	//
	// show/hide page nav based on the data length (display only data has more than 9 elements)
	if (oXMLObject.image.length > 9) {
		$$(".smGalleryPage").setText((__iPageIndex+1)+" av "+__iPageTotal).setStyle("visibility", "visible");
		$$(".smGalleryNav").setStyle("visibility", "visible");
		$("smPrevBtn").setOpacity(0.5).addClass("deactive");
		$("smNextBtn").setOpacity(1);
	} else {
		$$(".smGalleryPage").setHTML("&nbsp;").setStyle("visibility", "hidden");
		$$(".smGalleryNav").setStyle("visibility", "hidden");
		$("smPrevBtn").setOpacity(0);
		$("smNextBtn").setOpacity(0);
	}
	//
	// attach page flip animation
	$("smGalleryList").fx = new Fx.Scroll("smGalleryList", {
		duration: 1500,
		onComplete: function(){
			__pageTweening = false;
		}
	}).set([0,0]);
	//
	fLoadThumbnails();
}
// load images
function fLoadThumbnails(){
	var oList = $("smGalleryList");
	var aImg = oList.getElements("img");
	for (var i = __iPageIndex*9; i<(__iPageIndex+1)*9; i++) {
		if (aImg[i] && !aImg[i].__loaded) {
			aImg[i].src = aImg[i].__src;
			aImg[i].alt = aImg[i].__alt;
			aImg[i].__loaded = true;
		}
	}
	fPreloadImages();
}
// scroll to the selected anchor page.
function fJumpPage() {
	$$(".smGalleryPage").setText((__iPageIndex+1)+" av "+__iPageTotal);
	$("smGalleryList").fx.stop().scrollTo(0, __iPageIndex*507);
	//
	if (__iPageIndex == 0) {
		$("smPrevBtn").setOpacity(0.5).addClass("deactive");
	} else {
		$("smPrevBtn").setOpacity(1).removeClass("deactive");
	}
	if (__iPageIndex == __iPageTotal-1) {
		$("smNextBtn").setOpacity(0.5).addClass("deactive");
	} else {
		$("smNextBtn").setOpacity(1).removeClass("deactive");
	}
	//
	fLoadThumbnails();
}
//
function fShowZoomImage(oData){
	$("smGalleryFrame").setOpacity(0.5);
	//
	var iBaseWidth = 70;
	var iBaseHeight = 32;
	//
	var oZoomLayer = $("smGalleryZoom");
	var oZoomLayerSize = oZoomLayer.getCoordinates();
	var oZoomContent = $("smGalleryZoomPlace");
	var oZoomContentSize = oZoomContent.getCoordinates();
	oZoomContent.removeClass("loaded").setStyles({
		width: (!oZoomLayer.__opened) ? iBaseWidth : oZoomContentSize.width - 30,
		height: (!oZoomLayer.__opened) ? iBaseHeight : oZoomContentSize.height - 30
	}).empty();
	//
	__iImageIndex = oData.dataIndex;
	var iPage = Math.floor(__iImageIndex/9);
	if (__iPageIndex != iPage) {
		__iPageIndex = iPage;
		fJumpPage();
	}
	//
	// show zoom layer
	oZoomLayer.setStyles({
		top: (!oZoomLayer.__opened) ? window.getScrollTop()+(window.getHeight()-iBaseHeight)/2-80 : oZoomLayerSize.top,
		left: (!oZoomLayer.__opened) ? (window.getWidth()-iBaseWidth)/2-60 : oZoomLayerSize.left
	}).setOpacity(1);
	oZoomLayer.__opened = true;
	//
	// load image
	var iLoadedImage = new Element("img").setProperties({
		alt: oData.title
	}).setStyles({
		position: "absolute",
		top: "-1000px",
		left: "-1000px"
	}).setOpacity(0).injectInside(oZoomContent);
	//
	// add image information
	var oInfoDiv = new Element("div").setStyles({
		position: "absolute",
		top: "-1000px",
		left: "-1000px"
	}).addClass("imgInfo").injectAfter(iLoadedImage);
	//
	var oTitle = new Element("h3").setText(oData.title).injectInside(oInfoDiv);
	var oDecs = new Element("p").setText(oData.desc).injectInside(oInfoDiv);
	var oDate = new Element("p").setText(oData.date).injectInside(oInfoDiv);
	var oLink = new Element("p").injectInside(oInfoDiv);
	var oBtn = new Element("a").setProperties({
		href: oData.linkWeb,
		target: "_blank"
	}).setText(oData.linkWeb).injectInside(oLink);
	//
	// arrows
	var oLeftArrow = new Element("img").setProperty("src", _sImgInterfacePath+"sm_arrow_prev.gif").setStyles({
		position: "absolute",
		top: 0,
		left: 0
	}).setOpacity(0).injectInside(oZoomContent);
	var oRightArrow = new Element("img").setProperty("src", _sImgInterfacePath+"sm_arrow_next.gif").setStyles({
		position: "absolute",
		top: 0,
		left: 0
	}).setOpacity(0).injectInside(oZoomContent);
	//
	// add animation to loaded image
	iLoadedImage.fx = new Fx.Style(iLoadedImage, "opacity", {
		duration: 500,
		onComplete: function(){
			var oThisSize = iLoadedImage.getCoordinates();
			oInfoDiv.setStyles({
				position: "static",
				top: 0,
				left: 0
			});
			// set arrow position
			oLeftArrow.setStyles({
				left: 100,
				top: oThisSize.height/2+60
			});
			oRightArrow.setStyles({
				left: oThisSize.width+20,
				top: oThisSize.height/2+60
			});
			//
			var oLeftButton = new Element("img").setProperties({
				src: _sImgInterfacePath+"sm_blank.gif",
				width: oThisSize.width/2,
				height: oThisSize.height
			}).setStyles({
				position: "absolute",
				top: 75,
				left: 75
			}).injectInside(oZoomContent);
			if (__iImageIndex == 0) {
				oLeftButton.setOpacity(0);
			}
			oLeftButton.addEvents({
				"mouseover" : function(e){
					oLeftArrow.setOpacity(0.7);
				},
				"mouseout" : function(e){
					oLeftArrow.setOpacity(0);
				},
				"click" : function(e){
					__iImageIndex = Math.max(__iImageIndex-1,0);
					fShowZoomImage(__oData[__iImageIndex]);
				}
			});
			//
			var oRightButton = new Element("img").setProperties({
				src: _sImgInterfacePath+"sm_blank.gif",
				width: oThisSize.width/2,
				height: oThisSize.height
			}).setStyles({
				position: "absolute",
				top: 75,
				left: 75+oThisSize.width/2
			}).injectInside(oZoomContent);
			if (__iImageIndex == __oData.length-1) {
				oRightButton.setOpacity(0);
			}
			oRightButton.addEvents({
				"mouseover" : function(e){
					oRightArrow.setOpacity(0.7);
				},
				"mouseout" : function(e){
					oRightArrow.setOpacity(0);
				},
				"click" : function(e){
					__iImageIndex = Math.min(__iImageIndex+1,__oData.length-1);
					fShowZoomImage(__oData[__iImageIndex]);
				}
			});
		}
	});
	//
	// add event after loading
	__iPreloadZoomImage.onload = function(){
		iLoadedImage.src = _sImgZoomPath+oData.img;
		setTimeout(function(){
			var oThisSize = iLoadedImage.getCoordinates();
			//
			oInfoDiv.setStyles({
				width: oThisSize.width
			});
			var nTextHeight = oInfoDiv.getCoordinates().height;
			//
			oZoomLayer.fx.stop().start({
				"top": [window.getScrollTop()+(window.getHeight()-oThisSize.height-nTextHeight)/2-80],
				"left": [(window.getWidth()-oThisSize.width)/2-60]
			});
			oZoomContent.addClass("loaded");
			oZoomContent.loadedImage = iLoadedImage;
			oZoomContent.fx.stop().start({
				"width": [oThisSize.width],
				"height": [oThisSize.height+nTextHeight]
			});
		}, 100);
	}
	__iPreloadZoomImage.src = _sImgZoomPath+oData.img;
}
//
function fHideZoomImage(){
	$("smGalleryFrame").setOpacity(0);
	//
	var oZoomLayer = $("smGalleryZoom");
	oZoomLayer.__opened = false;
	oZoomLayer.setStyles({
		top: "-5000px",
		left: "-5000px"
	}).setOpacity(0);
}
//
function fInitIframeBg(){
	var oBody = $$("body")[0];
	var oBodySize = oBody.getCoordinates();
	//
	// set up background frame
	// to disable buttons & create white mask when one of the button is clicked.
	var oIframe = new Element("iframe").setProperties({
		id: "smGalleryFrame",
		frameBorder: 0,
		src: "about:blank"
	}).setStyles({
		position: "absolute",
		top: 0,
		left: 0,
		width: oBodySize.width,
		height: oBodySize.height+5,
		background: "#fff",
		zIndex: 998
	}).setOpacity(0).injectInside(oBody);
	//
	//
	//
	// set up display ZOOM div
	var oDiv = new Element("div").setProperties({
		id: "smGalleryZoom"
	}).setStyles({
		position: "absolute",
		top: 0,
		left: 0,
		zIndex: 999
	}).setHTML("<table cellpadding='0' cellspacing='0' style='left:0;'><tbody><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>");
	oDiv.setOpacity(0).injectInside(oBody);
	oDiv.fx = new Fx.Styles(oDiv, {
		duration: 500
	});
	//
	// set up table background
	var oTBody = oDiv.getFirst().getFirst();
	var aTr = oTBody.getChildren();
	for (var i = 0; i<__aPNG.length; i++) {
		var oTr = aTr[i];
		var aTd = oTr.getChildren();
		for (var j = 0; j<__aPNG[i].length; j++) {
			fSetPNGImage(__aPNG[i][j].img, aTd[j], 60, 60, __aPNG[i][j].bg);
			if (i == 1 && j == 1) {
				oDiv.oContent = aTd[j];
			}
		}
	}
	//
	//
	// set close button
	var oClose = new Element("a").setProperties({
		href: "javascript:void(0);"
	}).addClass("smCloseButton").injectInside(oDiv.oContent);
	oClose.addEvent("click", function(e){
		new Event(e).stop();
		fHideZoomImage();
	});
	//
	// set up zoom image
	var oZoomPlace = new Element("div").setProperties({
		id: "smGalleryZoomPlace"
	}).setText("Loading ...").injectAfter(oClose);
	oZoomPlace.fx = new Fx.Styles(oZoomPlace, {
		duration: 500,
		onComplete: function(){
			oZoomPlace.loadedImage.setStyles({
				position: "static",
				top: 0,
				left: 0
			}).fx.stop().start(0, 1);
		}
	});
	//
}
//
function fSetPNGImage(sSrc, oPlace, iWidth, iHeight, bSetBackground){
	if (sSrc == "") {
		return;
	}
	//
	var oContainer = $(oPlace);
	var sFilter = "DXImageTransform.Microsoft.AlphaImageLoader";
	if (bSetBackground == false) {
		// insert PNG image into a place
		var eImage = new Element("img").setProperties({
			src: _sImgInterfacePath+((window.ie && !window.ie7) ? "sm_blank.gif" : sSrc),
			alt: "",
			width: iWidth,
			height: iHeight
		}).injectInside(oContainer);
		// IE fix PNG
		if (window.ie && !window.ie7) {
			eImage.style.filter = "progid:"+sFilter+"(src='"+_sImgInterfacePath+sSrc+"', sizingMethod='scale');";
		}
	} else {
		oContainer.setStyles({
			background: "url("+_sImgInterfacePath+((window.ie && !window.ie7) ? "sm_blank.gif" : sSrc)+")"
		});
		// IE fix PNG
		if (window.ie && !window.ie7) {
			oContainer.style.filter = "progid:"+sFilter+"(src='"+_sImgInterfacePath+sSrc+"', sizingMethod='scale');";
		}
	}
}
//
window.addEvent("load", function(e){
	fLoadGalleryXML();
});