/*
 * Overlay Image Viewer 1.0
 * 
 * Programmed by: Ryan Sandigan (ryanzkizen@gmail.com)
 * Date Created: 2010.07.22
 *
 * Requires jQuery
 */


	function OverlayImageViewer(pId, pTitle) { 
		this.Initialize(pId, pTitle);
	}
    
	(function() {
		OverlayImageViewer.prototype = {
			ResDir: 'js/overlay.image.viewer-1.0/images/',
			ResLoading: new Image(),
			BtnPrevImg: new Image(),
			BtnNextImg: new Image(),
			
			ObjName: '',
			HeaderTitle: '',
			
			BorderColor: '#000000',
			HeaderFontColor: '#ffffff',

			CloseLostFocusClick: true,

			ImagesSrc: [],
			ImagesSrcIndex: 0,
			
			ImagesNavCaption: 'Image',
			
			ImageCaptionAlign: '',

			Initialize : function (pId, pTitle) {
				if (typeof(pId) == 'undefined') { alert('Overlay Window Img Error: pId undefined'); return false; } 
				if (typeof(pTitle) == 'undefined') pTitle = "";
						
				OverlayImageViewer.prototype.ObjName = pId;
				this.ObjName = pId;
				this.HeaderTitle = pTitle;
				
				this.ResLoading.src = this.ResDir+'loading.gif';
				this.BtnPrevImg.src = this.ResDir+'btn.prev.gif';
				this.BtnNextImg.src = this.ResDir+'btn.next.gif';
				
				OverlayImageViewer.prototype.ImagesSrc = [];
				OverlayImageViewer.prototype.ImagesSrcIndex = 0;
			},
			
			AddImage : function(pImgSrc, pCaption) {
				OverlayImageViewer.prototype.ImagesSrc[OverlayImageViewer.prototype.ImagesSrc.length] = new Array(pImgSrc, pCaption);
			},
			
			Show : function () {
				jQuery("body").append('<div '+((this.CloseLostFocusClick) ? 'onclick="jQuery(\'#'+this.ObjName+'\').remove(); jQuery(\'#'+this.ObjName+'_dvOverlay\').remove();"' : '')+' style="width: 100%; height: 100%; background: #000; position: fixed; top: 0; left: 0; z-index: '+OverlayImageViewer.prototype.GetHighestZIndex()+'; filter:alpha(opacity=33); -moz-opacity:0.33; opacity: 0.33" id="'+this.ObjName+'_dvOverlay"></div>');
				
				var shtml = "";
				shtml += "<div id=\""+this.ObjName+"\" style=\"width: auto; height: auto; border-style: solid; border-color: "+this.BorderColor+"; border-width: 2px; display: none; z-index: "+(OverlayImageViewer.prototype.GetHighestZIndex()+2)+";\">";
				shtml += "<div id=\""+this.ObjName+"_header\" style=\"clear: both; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; color: "+this.HeaderFontColor+"; background-color: "+this.BorderColor+";\">";
				shtml += "<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";
				shtml += "  <tr>";
				
				snav = "";
				if (OverlayImageViewer.prototype.ImagesSrc.length > 1) {
					snav = "<div id=\""+this.ObjName+"_content_img_prev\" style=\"display: none; float: left; margin-right: 5px; cursor: pointer\"><img src=\""+this.BtnPrevImg.src+"\" border=\"0\" alt=\"Previous\" align=\"absmiddle\"></div><div id=\""+this.ObjName+"_content_img_nav\" style=\"float: left; padding-top: 2px;\">"+this.ImagesNavCaption+" "+(OverlayImageViewer.prototype.ImagesSrcIndex+1)+" of "+OverlayImageViewer.prototype.ImagesSrc.length+"</div><div id=\""+this.ObjName+"_content_img_next\" style=\"float: left; margin-left: 5px; cursor: pointer\"><img src=\""+this.BtnNextImg.src+"\" border=\"0\" alt=\"Next\" align=\"absmiddle\"></div>";
				}
				
				shtml += "    <td>"+((snav!="") ? '<div style="float: left; padding-top: 2px; margin-right: 10px;">'+((this.HeaderTitle!='') ? this.HeaderTitle+'&nbsp;&nbsp;&nbsp;-' : '')+'</div>'+snav : this.HeaderTitle)+"</td>";
				shtml += "    <td align=\"right\"><a href=\"javascript: void(0)\" onclick=\"jQuery('#"+this.ObjName+"_dvOverlay').remove(); jQuery('#"+this.ObjName+"').remove();\"><img src=\""+this.ResDir+"overlayClose.gif\" name=\""+this.ObjName+"_ImgClose\" width=\"11\" height=\"11\" border=\"0\" id=\""+this.ObjName+"_ImgdvPopMsgClose\" /></a></td>";
				shtml += "  </tr>";
				shtml += "</table>";
				shtml += "</div>";
				shtml += "<div id=\""+this.ObjName+"_content\" style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; clear: both; width: auto; background-color: #ffffff; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;\">";
				shtml += "<div id=\""+this.ObjName+"_content_1\" style=\"display: \"><img src=\""+this.ResLoading.src+"\" width=\"220\" height=\"19\" border=\"0\"></div>";
				shtml += "<div id=\""+this.ObjName+"_content_2\" style=\"position: absolute; top: -8000px; left: -8000px;\"><img id=\""+this.ObjName+"_content_2_img\" border=\"0\"></div>";
				shtml += "</div></div>"
				jQuery("body").append(shtml);
			   
			   var tImageCaptionAlign = this.ImageCaptionAlign;
			   
			   	jQuery("#"+this.ObjName+'_content_2_img').attr('src', this.ImagesSrc[this.ImagesSrcIndex][0]);
				if (this.ImagesSrc[this.ImagesSrcIndex][1] != '')
		    		jQuery("#"+this.ObjName+'_content_2_img').after('<div style=\"width: 100%\" '+((tImageCaptionAlign!='') ? 'align="'+tImageCaptionAlign+'"' : '')+'><p>'+this.ImagesSrc[this.ImagesSrcIndex][1]+'</p></div>');
				else
					jQuery("#"+this.ObjName+'_content_2 div').remove();
			   
			   	var pId = this.ObjName
				var tImagesSrc = this.ImagesSrc;
				var tImagesNavCaption = this.ImagesNavCaption;
				
				
			    jQuery("#"+pId+'_content_img_prev').click(
					function () {
						jQuery("#"+OverlayImageViewer.prototype.ObjName+'_content_2').append('<img id="'+OverlayImageViewer.prototype.ObjName+'_loading" src="'+OverlayImageViewer.prototype.ResLoading.src+'" border="0" style="position: absolute; top: 0px; left: 0px">');
						OverlayImageViewer.prototype.ImagesSrcIndex--;
						jQuery("#"+pId+'_content_2_img').attr('src', OverlayImageViewer.prototype.ImagesSrc[OverlayImageViewer.prototype.ImagesSrcIndex][0]);
						if (OverlayImageViewer.prototype.ImagesSrc[OverlayImageViewer.prototype.ImagesSrcIndex][1] != '') {
							jQuery("#"+OverlayImageViewer.prototype.ObjName+'_content_2 div').remove();
							jQuery("#"+OverlayImageViewer.prototype.ObjName+'_content_2_img').after('<div style=\"width: 100%\" '+((tImageCaptionAlign!='') ? 'align="'+tImageCaptionAlign+'"' : '')+'><p>'+OverlayImageViewer.prototype.ImagesSrc[OverlayImageViewer.prototype.ImagesSrcIndex][1]+'</p></div>');
						} else {
							jQuery("#"+OverlayImageViewer.prototype.ObjName+'_content_2 div').remove();
						}
						jQuery('#'+pId+'_content_img_nav').html(tImagesNavCaption+' '+(OverlayImageViewer.prototype.ImagesSrcIndex+1)+' of '+OverlayImageViewer.prototype.ImagesSrc.length);
						
						if (OverlayImageViewer.prototype.ImagesSrcIndex <= 0) {
							jQuery("#"+pId+'_content_img_prev').hide();
						}
						if (OverlayImageViewer.prototype.ImagesSrcIndex < (OverlayImageViewer.prototype.ImagesSrc.length-1)) {
							jQuery("#"+pId+'_content_img_next').show();
						}
					}
				)
			    jQuery("#"+pId+'_content_img_next').click(
					function () {
						jQuery("#"+OverlayImageViewer.prototype.ObjName+'_content_2').append('<img id="'+OverlayImageViewer.prototype.ObjName+'_loading" src="'+OverlayImageViewer.prototype.ResLoading.src+'" border="0" style="position: absolute; top: 0px; left: 0px">');
						OverlayImageViewer.prototype.ImagesSrcIndex++;
						jQuery("#"+pId+'_content_2_img').attr('src', OverlayImageViewer.prototype.ImagesSrc[OverlayImageViewer.prototype.ImagesSrcIndex][0]);
						if (OverlayImageViewer.prototype.ImagesSrc[OverlayImageViewer.prototype.ImagesSrcIndex][1] != '') {
							jQuery("#"+OverlayImageViewer.prototype.ObjName+'_content_2 div').remove();
							jQuery("#"+OverlayImageViewer.prototype.ObjName+'_content_2_img').after('<div style=\"width: 100%\" '+((tImageCaptionAlign!='') ? 'align="'+tImageCaptionAlign+'"' : '')+'><p>'+OverlayImageViewer.prototype.ImagesSrc[OverlayImageViewer.prototype.ImagesSrcIndex][1]+'</p></div>');
						} else {
							jQuery("#"+OverlayImageViewer.prototype.ObjName+'_content_2 div').remove();
						}
						jQuery('#'+pId+'_content_img_nav').html(tImagesNavCaption+' '+(OverlayImageViewer.prototype.ImagesSrcIndex+1)+' of '+OverlayImageViewer.prototype.ImagesSrc.length);
						
						if (OverlayImageViewer.prototype.ImagesSrcIndex > 0) {
							jQuery("#"+pId+'_content_img_prev').show();
						}
						if (OverlayImageViewer.prototype.ImagesSrcIndex == (OverlayImageViewer.prototype.ImagesSrc.length-1)) {
							jQuery("#"+pId+'_content_img_next').hide();
						}
					}
				)
				
			   
				jQuery("#"+pId+'_content_2_img').load(
					function () {
						jQuery("#"+pId+'_loading').remove();
						
						jQuery("#"+pId+'_content_1').hide();
						jQuery("#"+pId+'_content_2').css('visibility','hidden');
						jQuery("#"+pId+'_content_2').css("top", 0);
						jQuery("#"+pId+'_content_2').css("left", 0);
						jQuery("#"+pId+'_content_2').css("position", "relative");
												
						jQuery("#"+pId+'_content').css('width', jQuery("#"+pId+'_content_2_img').width());
						jQuery("#"+pId+'_header').css('width', jQuery("#"+pId+'_content_2_img').width());
						jQuery("#"+pId).css("top", jQuery(window).scrollTop()+((jQuery(window).height()/2)-(jQuery("#"+pId).height()/2))); 
						jQuery("#"+pId).css("left", jQuery(window).scrollLeft()+((jQuery(window).width()/2)-(jQuery("#"+pId).width()/2)));
					
						if (parseInt(jQuery("#"+pId).css("top")) <= 0) {
							jQuery("#"+pId).css("top", 0);
						}
						if (parseInt(jQuery("#"+pId).css("left")) <= 0) {
							jQuery("#"+pId).css("left", 0);
						}
						jQuery("#"+pId+'_content_2').hide();
						jQuery("#"+pId+'_content_2').css('visibility','');
						jQuery("#"+pId+'_content_2').fadeIn("slow");
					}
				);
				
				
				jQuery("#"+pId+'_dvOverlay').fadeIn("slow", 
					function () {		
						if (jQuery("#"+pId+'_content_2 img')[0].complete) {
							jQuery("#"+pId+'_content_1').hide();
							jQuery("#"+pId+'_content_2').css("top", 0);
							jQuery("#"+pId+'_content_2').css("left", 0);
							jQuery("#"+pId+'_content_2').css("position", "relative");
						}
					
						jQuery("#"+pId).css("position", "absolute");  
						jQuery("#"+pId).fadeIn("slow");
						
						if (jQuery("#"+pId+'_content_2 img')[0].complete) {
							jQuery("#"+pId+'_content').css('width', jQuery("#"+pId+'_content_2_img').width());
							jQuery("#"+pId+'_header').css('width', jQuery("#"+pId+'_content_2_img').width());
						} else {
							jQuery("#"+pId+'_content').css('width', jQuery("#"+pId+'_content_1 img').width());
							jQuery("#"+pId+'_header').css('width', jQuery("#"+pId+'_content_1 img').width());
						}
						
						jQuery("#"+pId).css("top", jQuery(window).scrollTop()+((jQuery(window).height()/2)-(jQuery("#"+pId).height()/2))); 
						jQuery("#"+pId).css("left", jQuery(window).scrollLeft()+((jQuery(window).width()/2)-(jQuery("#"+pId).width()/2)));
						jQuery("#"+pId).css("z-index", OverlayImageViewer.prototype.GetHighestZIndex()+3);
						
						if (parseInt(jQuery("#"+pId).css("top")) <= 0) {
							jQuery("#"+pId).css("top", 0);
						}
						if (parseInt(jQuery("#"+pId).css("left")) <= 0) {
							jQuery("#"+pId).css("left", 0);
						}
					}
				);	
				
			},
			
			Close : function () {
				jQuery('#'+this.ObjName+'_dvOverlay').remove(); 
				jQuery('#'+this.ObjName+'').remove();
			},
			
			GetHighestZIndex: function () {
				var ret = 0;
				var ArrCMS_Func_GetHighestzIndex = new Array();
				jQuery('body').find('div').each(
					function () {
						if (parseFloat(jQuery(this).css('z-index')) > 0) {
							ArrCMS_Func_GetHighestzIndex[parseFloat(jQuery(this).css('z-index'))] = jQuery(this).css('z-index');
						}
					}
				);
				
				if (ArrCMS_Func_GetHighestzIndex.length > 0) {
					ret = parseFloat(ArrCMS_Func_GetHighestzIndex[ArrCMS_Func_GetHighestzIndex.length-1])+1;
				} else {
					ret = 1;
				}
				
				return ret;
			}
		}
	})();