// JavaScript gallery class - John Resig code processed

// global namespace
if(typeof Gallery == 'undefined') {
	var Gallery = {};
}

if(typeof $ != 'function') {
	var $ = function ( id ) {
    	return document.getElementById( id );
	}
}

// event binding helper functions ::

// Implement function.apply for browsers which don't support it natively (e.g IE5)
// Courtesy of Aaron Boodman - http://youngpup.net
if (!Function.prototype.apply) {
        Function.prototype.apply = function(oScope, args) {
            var sarg = [];
            var rtrn, call;

            if (!oScope) oScope = window;
            if (!args) args = [];

            for (var i = 0; i < args.length; i++) {
                    sarg[i] = "args["+i+"]";
            }

            call = "oScope.__applyTemp__(" + sarg.join(",") + ");";

            oScope.__applyTemp__ = this;
            rtrn = eval(call);
            oScope.__applyTemp__ = null;
            return rtrn;
        }
}

function contextBind(context, func, params) { // ex: this.myDiv.onclick = contextBind(this,this.myDivClickHandler => inside myDivClickHandler, this will be the same as the object that contains the handler method, not the div!
	if (null == params) {
		return function() {
			return func.apply(context, arguments);
		}
	} else {
		return function() {
			return func.apply(context, params);
		}
	}
}

// cross-browser attach evt
function addEvent(elem, evtType, func, capture) {
	capture = (capture) ? capture : false;
	if (elem.addEventListener) {
		elem.addEventListener(evtType, func, capture);
	} else if (elem.attachEvent) {
		elem.attachEvent("on" + evtType, func);
	} else {
	// for IE/Mac, NN4, and older
		elem["on" + evtType] = func;
	}
}

// constructor
Gallery.Create = function(galleryImages,overlayID,galleryID,galleryImgContainerID,galleryPhotosResize) {
	
	// the gallery structure:
	
	/*
	 * Create the following DOM structure:
	 * <div id="overlayID"></div>
	 * <div id="galleryID">
	 *     <div id="galleryImageID"></div>
	 *     <div id="galleryPrevID"><a href="">&laquo; Prev</a></div>
	 *     <div id="galleryNextID"><a href="">Next &raquo;</a></div>
	 *     <div id="galleryTitleID"></div>
	 * </div>
	 */
	
	// array of objects of this type: {thumb_id:...,large_img:... }
	// thumb_id = id of the clickable image on page (this will launch the gallery onclick)
	// large_img = large image that will be displayed when the thumb image is clicked! (usually a hidden Image object...)
	this.images = galleryImages; 
	
	// create overlay div
	this.overlay = document.createElement('DIV');
	this.overlay.id = overlayID;
	this.overlay.title = "Click to close";
	this.overlay.onclick = contextBind(this,this.hideOverlay);
	document.body.appendChild(this.overlay);
	
	// create gallery div
	this.gallery = document.createElement('DIV');
	this.gallery.id = galleryID;
	this.gallery.innerHTML = '<div id="gallery_prev_up"><a href="">&laquo;&laquo;&laquo;</a></div>' +
				'<div id="gallery_close_up"><a href="Javascript:void(0);">Close</a></div>' +
				'<div id="gallery_next_up"><a href="">&raquo;&raquo;&raquo;</a></div>' +
				'<div id="gallery_title_up"></div>' +
	            '<div id="'+galleryImgContainerID+'"></div>' +
				'<div id="gallery_prev"><a href="">&laquo;&laquo;&laquo;</a></div>' +
				'<div id="gallery_close"><a href="Javascript:void(0);">Close</a></div>' +
				'<div id="gallery_next"><a href="">&raquo;&raquo;&raquo;</a></div>' +
				'<div id="gallery_title"></div>';
	document.body.appendChild(this.gallery);	
	DHTML.setOpacity(this.gallery, 0);
	
	// set remaining gallery elements
	this.imgContainer = $(galleryImgContainerID);
	this.nextLink = $("gallery_next");
	this.prevLink = $("gallery_prev");
	this.closeLink = $("gallery_close");
	this.nextLinkUp = $("gallery_next_up");
	this.prevLinkUp = $("gallery_prev_up");
	this.closeLinkUp = $("gallery_close_up");
	this.title = $("gallery_title");
	
	// attach on-click handlers for all gallery images
	this.setImgClickHandlers();
	
	// current image (as object)
	this.curImage = null;
	// displayed image
	this.displayedImage = document.createElement('IMG');
	this.displayedImage.id = 'gallery_displayed_image';
	this.displayedImage.src = '';
	this.imgContainer.appendChild(this.displayedImage);
	
	// resize factor ( e.g 0.7 = 70% => all gallery pics will be resized to 70% of their original size)
	this.resize_percent = galleryPhotosResize;
	
	// handle resize and scroll
	window.onresize = contextBind(this,this.adjust);
	//addEvent(window, 'resize', contextBind(this,this.adjust), true);
	//document.onscroll = this.adjust;
}

Gallery.Create.prototype = {
	
	setImgClickHandlers : function() {
		var crtImg;
		for (var i=0; i < this.images.length; i++) {
			crtImg = $(this.images[i].thumb_id);
			crtImg.gallery = this;
			crtImg.index = i;
			crtImg.onclick = function() {
				this.gallery.showOverlay();
				this.gallery.showImage(this.index);
				return false;
			}
		}
		// prev and next links onclick handlers
		this.nextLink.onclick = contextBind(this,this.showNextImg);
		this.prevLink.onclick = contextBind(this,this.showPrevImg);
		this.closeLink.onclick = contextBind(this,this.hideOverlay);
		this.nextLinkUp.onclick = contextBind(this,this.showNextImg);
		this.prevLinkUp.onclick = contextBind(this,this.showPrevImg);
		this.closeLinkUp.onclick = contextBind(this,this.hideOverlay);
	},
	
	showOverlay : function() {
		// Make it as tall and wide as the entire page
		// (this helps with scrolling)
		this.overlay.style.height = parseInt(DHTML.pageHeight(),10) + "px";
		this.overlay.style.width = parseInt(DHTML.pageWidth(),10) + "px";
		
		// And fade it in
		DHTML.fadeIn(this.overlay, 50);
	},
	
	showImage : function(imgIndex) {
		// Remember which image we're currently dealing with
		this.curImage = $(this.images[imgIndex].thumb_id);
		this.curLargeImage = $(this.images[imgIndex].large_img.id);
		//this.curLargeImage = this.images[imgIndex].large_img;
		/*/ Remove the image, if there's one already there
		if (this.imgContainer.firstChild)
				this.imgContainer.removeChild(this.imgContainer.firstChild);*/
				
		/* And add our new image in, instead
		this.imgContainer.appendChild(this.curImage.cloneNode(true));*/
		
		//alert('Img display:'+this.displayedImage.style.display+'\nImg opacity:'+this.displayedImage.filters.alpha.opacity);
		//DHTML.setOpacity(this.gallery,100);return;
		
		//alert('Image displayed src = ' + $(this.displayedImage.id).src);

		// We're setting the caption of the gallery image to
		// the 'alt' contents of the regular image
		//this.title.innerHTML = '#'+ (imgIndex + 1); // + ' of '+ this.images.length;
		
		//*
		// Hide the next link if we're at the end of the slideshow
		if ( !this.hasNext(imgIndex) ) {
			DHTML.hide(this.nextLink);
			DHTML.hide(this.nextLinkUp);
		}
				
		// Otherwise, make sure that it's visible
		else {
			DHTML.show(this.nextLink);
			DHTML.show(this.nextLinkUp);
		}
		
		// Hide the previous link if we're at the start of the slideshow
		if ( !this.hasPrev(imgIndex) ){
				DHTML.hide(this.prevLink);
				DHTML.hide(this.prevLinkUp);
		}
		// Otherwise, we need to be sure that it's visible
		else {
				DHTML.show(this.prevLink);
				DHTML.show(this.prevLinkUp);
		}
		//*/
		// Set the correct class (so that it's the correct size)
		//this.gallery.className = this.curImage.className;
		var curImgW = parseInt(parseInt(this.curLargeImage.width,10) * this.resize_percent,10);
		var curImgH = parseInt(parseInt(this.curLargeImage.height,10) * this.resize_percent,10);
		
		//alert('Current image width:'+curImgW+'\nCurrent image height:'+curImgH);
		
		this.displayedImage.style.width = curImgW + 'px';
		this.displayedImage.style.height = curImgH + 'px';
		this.displayedImage.src = this.curLargeImage.src;
		
		
		this.gallery.style.width = (curImgW + 10) + 'px';
		this.gallery.style.height = (curImgH + 45) + 'px';
		
		// Then fade it in smoothly
		DHTML.fadeIn( this.gallery, 100);
		
		
		// Make sure that the gallery is positioned in the right place
		// on the screen
		this.adjust();
		
	},
	
	showNextImg : function() {
		//alert('Show next');
		this.showImage(this.curImage.index + 1);
		return false;
	},
	
	showPrevImg : function() {
		//alert('Show prev');
		this.showImage(this.curImage.index - 1);
		return false;
	},
	
	hideOverlay : function() {
		// Make sure that we reset the current image
		this.curImage = null;
		
		// and hide the overlay and gallery
		DHTML.hide(this.overlay);
		DHTML.hide(this.gallery);
	},
	
	hasPrev : function(imgIndex) {
		return imgIndex > 0 ? true : false;
	},
	
	hasNext : function(imgIndex) {
		return (imgIndex < this.images.length-1) ? true : false;
	},
	
	adjust : function() {
		// Make sure that the gallery exists
		if (!this.gallery) return;
		//alert('Onresize handler!');
		// Find its current height and width
		var w = parseInt(DHTML.getWidth(this.gallery),10);
		var h = parseInt(DHTML.getHeight(this.gallery),10);
		
		var windH = parseInt(DHTML.windowHeight(),10);
		var windW = parseInt(DHTML.windowWidth(),10)
		
		// Position the box, vertically, in the middle of the window
		var t = parseInt(DHTML.scrollY(),10) + ( windH / 2 ) - ( h / 2 );
		//var t = parseInt(document.body.scrollTop,10) + ( parseInt(document.body.clientHeight,10) / 2 ) - ( h / 2 );;
		// But no heigher than the top of the page
		if ( t < 0 ) t = 0;
		
		// Position the box, horizontally, in the middle of the window
		var l = parseInt(DHTML.scrollX(),10) + ( windW / 2 ) - ( w / 2 );
		//var l = parseInt(document.body.scrollLeft,10) + ( parseInt(document.body.clientWidth,10) / 2 ) - ( w / 2 );
		
		// But no less than the left of the page
		if ( l < 0 ) l = 0;
		
		// Set the adjusted position of the element
		DHTML.setY(this.gallery,parseInt(t,10));
		DHTML.setX(this.gallery,parseInt(l,10));
		
		//resize overlay
		//this.overlay.style.height = parseInt(DHTML.pageHeight(),10) + "px";
		//this.overlay.style.width = parseInt(DHTML.pageWidth(),10) + "px";
		this.overlay.style.height = windH + "px";
		this.overlay.style.width = windW + "px";
		
		//alert(' wh='+windH+'\n ww='+windW);
	}
	
}