/*=============================================================================

			 	 TITLE:		NetMediaOne - Image Gallery
		  MODIFIED:		2007.02.13
		 AUTHOR(S): 	Graham Wheeler - NetMediaOne - www.netmediaone.com
		  REQUIRES:		NetMediaOne Core 1.0
									Prototype 1.5.0
									Scriptaculous 1.7.0

=============================================================================*/

NMO.ImageGallery = {

	init: function() {
		var sb = new StringBuffer('\n<div id="imageViewerOverlay" style="display: none;"></div>\n');
		sb.append( '\n<div id="imageViewer" style="display: none;">\n' );
		sb.append( '<div id="imageViewerPicWrapper"><img id="imageViewerPic" src="" alt="Click to Close Window"></div>\n' );
		sb.append( '<div id="imageViewerControls">\n' );
		sb.append( '<img src="').append(NMO.rootPath).append('images/btn_viewer_prev.gif" alt="Show Previous Image" title="Show Previous Image" onClick="NMO.ImageGallery.imageViewerButtonClick(this);">\n' );
		sb.append( '<img src="').append(NMO.rootPath).append('images/btn_viewer_next.gif" alt="Show Next Image" title="Show Next Image" onClick="NMO.ImageGallery.imageViewerButtonClick(this);">\n' );
		sb.append( '<img src="').append(NMO.rootPath).append('images/btn_viewer_close.gif" alt="Close Window" title="Close Window" onClick="NMO.ImageGallery.imageViewerButtonClick(this);" style="border-left: 1px solid #ddd580; padding-left: 20px; margin-left: 17px;">\n' );
		sb.append( '</div>\n<div id="imageViewerCaption"></div>\n</div>\n' );
		sb.append( '\n<div id="imageViewerCursorCue" style="display: none;">Click for Fullsize Image</div>\n' );
		new Insertion.Top( $(NMO.layoutWrapper), sb.toString() );
				
		// Fix margins
		NMO.ImageGallery.preview = $("portfolioPreview");
		$$(".PortfolioThumbnails").each( function(pE) {
			var tnails = pE.immediateDescendants();
			tnails.each( function(img) {
				if ( tnails.indexOf(img)%7 == 0 ) { img.style.marginLeft = "0px"; }																					 
			} );
		} );
		
		NMO.ImageGallery.thumbnails = $$(".PortfolioThumbnails img");
		NMO.ImageGallery.viewer = $("imageViewer");
		NMO.ImageGallery.viewerPic = $("imageViewerPic");
		NMO.ImageGallery.viewerPicWrapper = $("imageViewerPicWrapper");
		NMO.ImageGallery.viewerCaption = $("imageViewerCaption");
		NMO.ImageGallery.viewerOverlay = $("imageViewerOverlay");
		NMO.ImageGallery.cursorCue = $("imageViewerCursorCue");
		NMO.ImageGallery.selectedIndex = 0;
		
		NMO.ImageGallery.cursorCue.style.display = "block";
		NMO.ImageGallery.cursorCue.style.display = "none";
		NMO.ImageGallery.viewerOverlay.style.display = "block";
		NMO.ImageGallery.viewerOverlay.style.display = "none";

		NMO.ImageGallery.thumbnails.each( function(img) {			 
			Event.observe( img, "mouseover", function(e) {
				NMO.ImageGallery.preview.src = this.src.replace( "_small", "_medium" );
				NMO.ImageGallery.selectedIndex = NMO.ImageGallery.thumbnails.indexOf(this);
				NMO.ImageGallery.showCursorCue();
			}.bind(img), false );
			Event.observe( img, "mouseout", function(e) { NMO.ImageGallery.hideCursorCue(); }, false );
			Event.observe( img, "mousemove", function(e) { NMO.ImageGallery.updateCursorCue(); }, false );
			Event.observe( img, "click", function(e) { NMO.ImageGallery.showImageViewer(); }, false );

		} );
		Event.observe( NMO.ImageGallery.preview, "click", NMO.ImageGallery.showImageViewer, false );
		Event.observe( NMO.ImageGallery.preview, "mouseover", function(e) { NMO.ImageGallery.showCursorCue(); }, false );
		Event.observe( NMO.ImageGallery.preview, "mouseout", function(e) { NMO.ImageGallery.hideCursorCue(); }, false );
		Event.observe( NMO.ImageGallery.preview, "mousemove", function(e) { NMO.ImageGallery.updateCursorCue(); }, false );
		Event.observe( NMO.ImageGallery.viewerPic, "click", NMO.ImageGallery.hideImageViewer, false );
		Event.observe( NMO.ImageGallery.viewerOverlay, "click", NMO.ImageGallery.hideImageViewer, false );
	},
	
	showCursorCue: function() {
		NMO.ImageGallery.cursorCue.style.display = "block";
		NMO.ImageGallery.cursorCue.setOpacity(0.9);
	},
	
	hideCursorCue: function() {
		NMO.ImageGallery.cursorCue.style.display = "none";
	},
	
	updateCursorCue: function() {
		NMO.ImageGallery.cursorCue.setStyle( { left: (NMO.mouseX + 15) + "px", top: (NMO.mouseY + 15) + "px" } );
	},
	
	showImageViewer: function() {
/*
	for ( var i = 0; i < NMO.ImageGallery.thumbnails.length; i++ ) {
			var tn = NMO.ImageGallery.thumbnails[i];
			if ( tn == img ) {
				NMO.ImageGallery.selectedIndex = i;
			}
		}
*/
		var pScroll = NMO.getPageScroll();
		var pSize = NMO.getPageSize();
		NMO.ImageGallery.viewerOverlay.style.left = "0px";
		NMO.ImageGallery.viewerOverlay.style.height = pSize[1] + "px";
		NMO.ImageGallery.viewer.style.left = "50%";
		NMO.ImageGallery.viewer.style.top = ( pScroll[1] + ( ( pSize[3] - 555 ) / 2 ) ) + "px";
		Effect.Appear( NMO.ImageGallery.viewerOverlay, { duration: .25, from: 0, to: .50  } );
		Effect.Appear( NMO.ImageGallery.viewer, { duration: .25 } );
		NMO.ImageGallery.setImage();
	},
	
	setImage: function() {
		var img = NMO.ImageGallery.thumbnails[NMO.ImageGallery.selectedIndex];
		NMO.ImageGallery.viewerPic.src = img.src.replace( "_small", "_large" );
		NMO.ImageGallery.preview.src = img.src.replace( "_small", "_medium" );
		Element.update( NMO.ImageGallery.viewerCaption, img.getAttribute("alt") );
	},
	
	hideImageViewer: function() {
		Effect.Fade( NMO.ImageGallery.viewerOverlay, { duration: .25, from: .50, to: 0 } );
		Effect.Fade( NMO.ImageGallery.viewer, { duration: .25 } );
	},

	imageViewerButtonClick: function(btn) {
		if ( btn.getAttribute("alt") == "Show Previous Image" ) {
			// Show the previous image
			if ( NMO.ImageGallery.selectedIndex > 0 ) {
				NMO.ImageGallery.selectedIndex = NMO.ImageGallery.selectedIndex - 1;
			} else {
				NMO.ImageGallery.selectedIndex = NMO.ImageGallery.thumbnails.length - 1;
			}
			NMO.ImageGallery.setImage();
		} else if ( btn.getAttribute("alt") == "Show Next Image" ) {
			// Show the next image
			if ( NMO.ImageGallery.selectedIndex < NMO.ImageGallery.thumbnails.length - 1 ) {
				NMO.ImageGallery.selectedIndex = NMO.ImageGallery.selectedIndex + 1;
			} else {
				NMO.ImageGallery.selectedIndex = 0;
			}
			NMO.ImageGallery.setImage();
		} else if ( btn.getAttribute("alt") == "Close Window" ) {
			// Hide the image viewer window
			NMO.ImageGallery.hideImageViewer();
		} else {
			// Do nothing
		}
	}
	
};

Event.observe( window, "load", NMO.ImageGallery.init, false );