/*
 *
 */
 
function picViewer(){
	this.elem = null;
	this.dir = null;
	this.previewDir = null;
	this.images = null;	
	this.PREVIEW_SIZE = 80;
	this.GAP_SIZE = 10;
	this.name = "picViewer_" + Math.round(Math.random() * 10000);
	document[this.name] = this;
	this.width = 0;
	this.scr = {w:0,h:0};
	
	this.init = function(){
		if(this.elem){
			this.scr = {w:this.elem.offsetWidth, h:this.elem.offsetHeight};
			//this.scr.scrollWidth = this.scr.w - 60 - 4 * this.GAP_SIZE;
			this.scr.scrollWidth = this.scr.w - 50;
			this.width = this.images.length * this.PREVIEW_SIZE + (this.images.length - 2) * this.GAP_SIZE;
			
			//alert(this.width);
			var aout = '<div id="'+(this.name+'_scrXXX')+'" \
				style="position:relative; overflow:hidden; \
				width:' + (this.scr.scrollWidth)+'; \
				height:'+ (this.PREVIEW_SIZE) +'; \
				">';
				
			aout += '<div id="'+(this.name+'_scroller')+'" \
				style="position:absolute;left:0;top:0;height:'+this.PREVIEW_SIZE+'">';
				
			for(var i=0; i<this.images.length; i++){
				aout += '<img src="'
					+ this.previewDir+'/'+this.images[i] + '"'
					+ '  width="'+this.PREVIEW_SIZE + '"'
					+ '  height="'+this.PREVIEW_SIZE + '"'
					+ '  style="cursor:pointer"'
					+ '  onclick="document.'+this.name+'.openImage(\''+ (this.dir+'/'+this.images[i]) +'\')"'
					+ '  border="0"/>';
					
				if(i < this.images.length - 1){
					aout += '<img src=".pb/.rs/e.gif" width="'+this.GAP_SIZE+'" height="'+this.GAP_SIZE+'" border="0"/>';
				}
			}
			aout += '</div>';
			aout += '</div>';
			
			var out = '\
				<table width="100%" height="100%" border="0" cellspacing="'+(this.GAP_SIZE)+'" cellpadding="0">\
				  <tr>\
				    <td colspan="3" height="100%">\
						<div id="'+(this.name)+'_bigPicDiv" \
							style="position:relative;width:100%;height:100%;overflow:hidden;\
								text-align:center;" \
							>Loading...\
							</div>\
					</td>\
				  </tr>\
				  <tr>\
				    <td width="30" valign="middle"><img id="'+(this.name+'_ArrowPrev')+'" \
						src=".pb/.rs/prv.png" width="30" height="30" \
						border="0" onload="iePNGfix(this)" \
						style="cursor:pointer;visibility:hidden" \
						onMouseOver="document.'+this.name+'.scrollPrev()" \
						onMouseOut="document.'+this.name+'.scrollPrevStop()" \
						/>\
					</td>\
				    <td width="100%" height="'+this.PREVIEW_SIZE+'" nowrap="1" style="padding:2px;background-color:#333333">'+aout+'</td>\
				    <td width="30" valign="middle"><img id="'+(this.name+'_ArrowNext')+'" \
						src=".pb/.rs/nxt.png" width="30" height="30" \
						border="0" onload="iePNGfix(this)" \
						style="cursor:pointer;" \
						onMouseOver="document.'+this.name+'.scrollNext()" \
						onMouseOut="document.'+this.name+'.scrollNextStop()" \
						/>\
					</td>\
				  </tr>\
				</table>\
			';
			this.elem.innerHTML = out;

			this.openImage(this.dir + "/" + this.images[0]);
		};
	};
	
	
	this.tmo = null;
	this.scrollStep = 1;
	this.scrollNext = function(){
		clearTimeout(this.tmo);
		var dv = document.getElementById(this.name + "_scroller");
		var check = this.width + dv.offsetLeft - this.scr.scrollWidth + this.GAP_SIZE;
		if (check > 0){
			dv.style.left = dv.offsetLeft - this.scrollStep;
			this.scrollStep *= 1.05;
			if (this.scrollStep > 10) this.scrollStep = 10;
			this.tmo = setTimeout('document.'+this.name+'.scrollNext();', 10);
		} else {
			dv.style.left = (-this.width + this.scr.scrollWidth - this.GAP_SIZE);
		}
		this.checkArrows();
	};
	this.scrollNextStop = function(){
		clearTimeout(this.tmo);
		this.checkArrows();
	};
	this.scrollPrev = function(){
		clearTimeout(this.tmo);
		var dv = document.getElementById(this.name + "_scroller");
		if (dv.offsetLeft < 0){
			dv.style.left = dv.offsetLeft + this.scrollStep;
			this.scrollStep *= 1.05;
			if (this.scrollStep > 10) this.scrollStep = 10;
			this.tmo = setTimeout('document.'+this.name+'.scrollPrev();', 10);
		} else {
			dv.style.left = 0;
		}
		this.checkArrows();
	};
	this.scrollPrevStop = function(){
		clearTimeout(this.tmo);
		this.checkArrows();
	};
	
	this.checkArrows = function(){
		var aPrev = document.getElementById(this.name+"_ArrowPrev");
		var aNext = document.getElementById(this.name+"_ArrowNext");
		var dv = document.getElementById(this.name + "_scroller");
		if (dv.offsetLeft < 0){
			aPrev.style.visibility = "visible";
		} else {
			aPrev.style.visibility = "hidden";
		}
		var check = this.width + dv.offsetLeft - this.scr.scrollWidth + this.GAP_SIZE;
		if (check > 0){
			aNext.style.visibility = "visible";
		} else {
			aNext.style.visibility = "hidden";
		}
	};
	
	
	
	
	
	
	this.openImage = function(path){
		var dv = document.getElementById(this.name+"_bigPicDiv");
		dv.style.background = "url(.pb/.rs/lo.gif) no-repeat center center";
		var out = '<img id="'+this.name+'_bigPic"\
								src="'+(path)+'"\
								style="position:absolute;left:100%;top:100%;\
									background-color:green;\
									cursor:pointer;\
									border:solid #cccccc 2px;"\
								onload="document.'+(this.name)+'.displayBigPic(this)" \
								onclick="document.'+(this.name)+'.openBigWin(event,this)" \
					>';
		dv.innerHTML = out;
	};
	
	this.displayBigPic = function( img ){
		var dv = document.getElementById(this.name + "_bigPicDiv");
		
		//alert("DV: "+dv.offsetWidth);
		var sw = dv.offsetWidth;
		var sh = dv.offsetHeight;
		
		var factor = 1;
		if (img.width > img.height){
			factor = sw / img.width;
		} else {
			factor = sh / img.height;
		}
		var nw = img.width * factor;
		var nh = img.height * factor;
		
		var BORDER = 2;
		
		img.origWidth = img.width;
		img.origHeight = img.height;
		
		img.width = nw - BORDER*2;
		img.height = nh - BORDER*2;
		
		img.style.left = (sw - nw) / 2;
		img.style.top = (sh - nh) / 2;
		
		dv.style.background = "";
	};
	
	
	this.bigImageWin = null;
	this.openBigWin = function(event,img){
		var x = event.screenX - img.origWidth / 2;
		var y = event.screenY - img.origHeight / 2;
		bigImageWin = window.open(
									img.src,
								  	"bigImageWin",
								  	"left="+x+",top="+y+",\
								  	width="+(img.origWidth + 40)
									+",\
								  	height="+(img.origHeight + 40)
									+",\
									scrollbars=yes,resizable=yes,toolbar=0,menubar=0,location=0"
								  );
		bigImageWin.focus();
	}

	
}
 
 
 
 
 
 
 
 
 
function createPicViewerFromElement(elem, dir, previewDir, images){
	var pv = new picViewer();
	pv.elem = elem;
	pv.dir = dir;
	pv.previewDir = previewDir;
	pv.images = images;
	pv.init();
	return pv;
}


function iePNGfix(ob){
	var ieBr = navigator.appVersion.split("MSIE")
	var version = parseFloat(ieBr[1])
	if ((version >= 5.5) && (version < 7) && (document.body.filters)){
		// do the fix ...
		if (ob.style){
			// object
		} else {
			ob = document.getElementById(ob);
		}
		if(ob.fix == 1) {return;}
		ob.fix = 1;
		var src = ob.background;
		var w = ob.width;
		var h = ob.height;
		if (ob.src) {src = ob.src;}
		ob.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ src +"', sizingMethod='scale');";
		if (ob.src) {
		  ob.src = ".pb/.rs/e.gif";
		  ob.width = w;
		  ob.height = h;
		} else {
		  ob.background = "url(.pb/.rs/e.gif)";
		}
	}
}