//Copyright 2007 
//Fwdder.com 
//All rights reserved 
//Author	:: uisp :: dsin ::

/*
var fwdderSlideShow=new FwdderSlideShow();
fwdderSlideShow.setArray(new Array("http://www.fwdder.com/data/mail/2007/05/01/1177954539162/image/__fwdDer.com__-003539253-%5Byen%5Dco9_001.jpg","http://www.fwdder.com/data/mail//2007/05/01/1177954539162/image/__fwdDer.com__-003539321-%5Byen%5Dco9_002.jpg","http://farm1.static.flickr.com/212/481010260_2fc5e5d055_o.jpg"));
fwdderSlideShow.init();
*/
function FwdderSlideShow(){
	this.fwdderSlideShow=this; // this is declared for DOM call back  (onclick) 
	this.ww=0; this.wh=0;	this.sw=0; 	this.sh=0;
	this.scrollLeft=0; 	this.scrollTop=0;
	this.picAr=new Array();
	this.picIndex=0;
	this.img=new Image();
	this.containerNode=null;
	this.intervalId=new Array(); this.timeoutId=new Array();
	this.mode;
	this.keyEvent = new Array();
	this.isShowing=false;
	this.conf = new Array();
		this.conf['fwdder_url'] = "http://www.fwdder.com";
		this.conf['fwdder_img_path']= this.conf['fwdder_url']+"/static/images";
		this.conf['whiteBorderMargin'] = 25;
		this.conf['keyCode'] = { 
			'z' : 90, 	'n' : 78, 'p' : 80, 'esc' : 27,
	        '+leftPad' : 61, '+rightPadFirefox' : 107,	'+rightPadIE' : 187,
			'-leftPad' : 109, '-rightPadFirefox' : 109, '-rightPadIE' : 189,
			'rightArrow' : 39, 'leftArrow' : 37, 'upArrow' : 38, 'downArrow' : 40
		}
	this.isFocusPanel = false;
	this.isShowPanel = false;
}

FwdderSlideShow.prototype.setScreenSize=function(){
	var winWidth=0;
	var winHeight=0;
	if (typeof(window.innerWidth)=="number") {
		//Non-IE
		winWidth = window.innerWidth;
		winHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		winWidth = document.documentElement.clientWidth;
		winHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		winWidth = document.body.clientWidth;
		winHeight = document.body.clientHeight;
	}
	this.ww=winWidth;
	this.wh=winHeight;
	//
	var yWithScroll=0;
	var xWithScroll=0;
	if (window.innerHeight && window.scrollMaxY) {// Firefox
		yWithScroll = window.innerHeight + window.scrollMaxY;
		xWithScroll = window.innerWidth + window.scrollMaxX;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		yWithScroll = document.body.scrollHeight;
		xWithScroll = document.body.scrollWidth;
	} else { // works in Explorer 6 Strict, Mozilla (not FF) and Safari
		yWithScroll = document.body.offsetHeight;
		xWithScroll = document.body.offsetWidth;
  	}
	this.sw=xWithScroll;
	this.sh=yWithScroll;
	//
	var scrOfX=0;
	var scrOfY=0;
	if( typeof( window.pageYOffset ) == 'number' ) {
	   //Netscape compliant/Firefox
	   scrOfY = window.pageYOffset;
	   scrOfX = window.pageXOffset;
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
	   //DOM compliant
	   scrOfY = document.body.scrollTop;
	   scrOfX = document.body.scrollLeft;
	} else if( document.documentElement.scrollTop  || document.documentElement.scrollLeft) {
	   //IE6 standards compliant mode
	   scrOfY = document.documentElement.scrollTop;
	   scrOfX = document.documentElement.scrollLeft;
	}
	this.scrollLeft=scrOfX;
	this.scrollTop=scrOfY;
}
FwdderSlideShow.prototype.setArray=function(ar){
  	this.picAr=ar;
}
FwdderSlideShow.prototype.initGUI=function(){
	var DOMgoUp = this.dom('img',{
		css : { cursor : 'pointer' },
		attribute : { id : 'fwdderSlideShowGoUp', src: this.fwdderSlideShow.conf['fwdder_img_path']+'/media-seek-forward.png'},
		property : {fwdderSlideShow : this},
		event : {onclick: this.reloadPicUp}
	});
	
	var DOMgoDown = this.dom('img',{
		css : { cursor : 'pointer' },
		attribute : { id : 'fwdderSlideShowGoDown', src: this.fwdderSlideShow.conf['fwdder_img_path']+'/media-seek-backward.png'}	,
		property : {fwdderSlideShow : this},
		event : {onclick: this.reloadPicDown}
	});
	
	var DOMFirstPic = this.dom('img',{
		css: { cursor : 'pointer' },
		attribute : { id : 'fwdderSlideShowFirstPic' , src : this.fwdderSlideShow.conf['fwdder_img_path']+'/media-skip-backward.png'},
		property : {fwdderSlideShow : this},
		event : {onclick : this.reloadFirstPic}
	});
	
	var DOMLastPic = this.dom('img',{
		css : {cursor : 'pointer'},
		attribute : {id : 'fwdderSlideShowLastPic', src : this.fwdderSlideShow.conf['fwdder_img_path']+'/media-skip-forward.png'},
		property : {fwdderSlideShow : this},
		event : {onclick : this.reloadLastPic}
	});
	
	var DOMslideShowZoom = this.dom('img',{
		css : {cursor : 'pointer', position: 'relative', left:'28px'},
		attribute : {id : 'fwdderSlideShowZoom', src : this.fwdderSlideShow.conf['fwdder_img_path']+'/media-zoom-in.png'},
		property : {fwdderSlideShow : this},
		event : {onclick : this.toggleZoom}
	});
	
	var DOMslideShowClose = this.dom('img',{
		css : {cursor : 'pointer', position: 'relative', left:'28px'},
		attribute : {id : 'fwdderSlideShowClose', src : this.fwdderSlideShow.conf['fwdder_img_path']+'/media-close.png'},
		property : {fwdderSlideShow : this},
		event : {onclick : this.hideGUI}	
	});
	
	var DOMImageDesc = this.dom('div',{
		css : {position : 'absolute', bottom : '2px', textAlign : 'center', width : '100%'},
		attribute : {id : 'fwdderSlideShowImageDesc'}
	});
		
	var DOMLoading = this.dom('img' , {
		css : {display : 'none', position : 'absolute', top : '50%', left : '50%'},
		attribute : {id : 'fwdderSlideShowLoading', src: this.fwdderSlideShow.conf['fwdder_img_path']+'/loading.gif'}
	});

	var DOMPanel = this.dom('div' , {
		css : {zIndex : '99', width : '128px', position : 'absolute', top : '50%',
			backgroundImage: 'url("'+this.fwdderSlideShow.conf['fwdder_img_path']+'/media-background.png")',
			backgroundRepeat: 'no-repeat',
			backgroundPosition: 'center'
		},
		attribute : {id : 'fwdderSlideShowPanel'},
		child : [DOMFirstPic, DOMgoDown, DOMgoUp, DOMLastPic, DOMslideShowZoom, DOMslideShowClose],
		property : {fwdderSlideShow : this}, 
		event : { onmouseover: function(){
						this.fwdderSlideShow.isFocusPanel = true;
						this.fwdderSlideShow.showPanel();
					},
					onmouseout : function(){
						this.fwdderSlideShow.isFocusPanel = false;
						this.fwdderSlideShow.setHidePanel();
					}
				}
	});

	/*if(this.picAr.length<=1){
		DOMPanel.style.display = "none";
	}*/
	
	var DOMImageArea = this.dom('img' , {
		css : {zIndex: '100', position : 'relative'},
		attribute : {id : 'fwdderSlideShowImage'}
	});

	var DOMImageLink = this.dom('a' , {
		css : {cursor: 'pointer'},
		attribute : {id : 'fwdderSlideShowImageLink'},
		event : {onclick: this.toggleZoom},
		property : {fwdderSlideShow : this},
		child : [DOMImageArea]
	});	
	
	var DOMwidget = this.dom('div' , {
		css : {background: '#FFFFFF',zIndex : '98' , position : 'relative' },
		attribute : { id : 'fwdderSlideShowWidget' },
		property : {fwdderSlideShow : this},
		child : [DOMImageLink, DOMImageDesc, DOMLoading, DOMImageLink]
	});	
	
	var DOMoverlay = this.dom('div' , {
		css : {background : '#000000', filter : 'alpha(opacity=90)',
		MozOpacity: '0.90',  position : 'absolute' , left : '0px', width : '100%', padding : '0px', top : '0px', height : '100%', zIndex : '97' },
		attribute : { id : 'fwdderSlideShowOverlay' },
		property : {fwdderSlideShow : this},
		event : {onclick : this.hideGUI}
	});
	
	var DOMnode = this.dom('div' , {
		css : { position : 'absolute' , left : '0px', width : this.sw+'px', padding : '0px', top : '0px', height : this.sh+'px', zIndex : '96', display : 'none' },
		attribute : { id : 'fwdderSlideShowContainer' },
		property : {fwdderSlideShow : this},
		child : [DOMoverlay, DOMwidget, DOMPanel]
	});

	this.containerNode=DOMnode;
	document.body.appendChild(DOMnode);
	this.reloadPic();
}

	FwdderSlideShow.prototype.fade=function(id, h, millisec,callback) {
		var opacStart = h['os'];
		var opacEnd = h['oe'];
	    //speed for each frame
	    var speed = Math.round(millisec / 100);
	    var timer = 0;
		
		this.changeOpac(id,opacStart);
	    //determine the direction for the blending, if start and end are the same nothing happens
	    if(opacStart > opacEnd) {
	        for(i = opacStart; i >= opacEnd; i--) {
	            setTimeout("this.fwdderSlideShow.changeOpac('" + id + "'," + i + ")",(timer * speed));
	            timer++;
	        }
	    } else if(opacStart < opacEnd) {
	        for(i = opacStart; i <= opacEnd; i++){
	            setTimeout("this.fwdderSlideShow.changeOpac('" + id + "'," + i + ")",(timer * speed));
	            timer++;
			}
	    }
		if(callback){
			setTimeout(eval(callback),timer*speed);
		}
	}

	FwdderSlideShow.prototype.changeOpac=function(id,opacity) {
		this.dom(id,{
			css : {opacity : opacity / 100,
			MozOpacity : opacity / 100,
			KhtmlOpacity : opacity / 100,
			filter : "alpha(opacity=" + opacity + ")"
			}
		});
	}

FwdderSlideShow.prototype.animatePos = function(id,destLeft,leftAdder,destTop,topAdder,timeout,callback,left,top){
	var node=document.getElementById(id);
	
	// undefined is used in case of no args.
	left = (left!=undefined && left!=null)?left:parseFloat(node.style.left);
	top = (top!=undefined && top!=null)?top:parseFloat(node.style.top);
	
	// if don't want to change left or top just let arg = null
	destLeft = (destLeft!=null)?destLeft:parseFloat(node.style.left);
	destTop = (destTop!=null)?destTop:parseFloat(node.style.top);
	
	node.style.left = left+'px'; 
	node.style.top = top+'px';
	if (parseInt(node.style.left) < destLeft-leftAdder) {
		left += leftAdder;
	}else if(parseInt(node.style.left) > destLeft+leftAdder){
		left -= leftAdder;
	}
	if(parseInt(node.style.top) < destTop-topAdder){
		top += topAdder;
	}else if(parseInt(node.style.top) > destTop+topAdder){
		top -= topAdder;
	}
	var leftCond = parseInt(node.style.left) < destLeft-leftAdder || parseInt(node.style.left) > destLeft+leftAdder;
	var topCond = parseInt(node.style.top) < destTop-topAdder || parseInt(node.style.top) > destTop+topAdder;
	if( leftCond || topCond ){
		this.fwdderSlideShow.timeoutId['animatePos']=setTimeout("this.fwdderSlideShow.animatePos('"+id+"',"+destLeft+","+leftAdder+","+destTop+","+topAdder+","+timeout+",'"+callback+"',"+left+","+top+")", timeout);
	}else{
		eval(callback);
	}
}

FwdderSlideShow.prototype.animateSize =function(id,destWidth,widthAdder,destHeight,heightAdder,timeout,callback,width,height,left,top){
	var node=document.getElementById(id);

	width = (width!=undefined && width!=null)?width:parseFloat(node.style.width);
	height = (height!=undefined && height!=null)?height:parseFloat(node.style.height);
	left = (left!=undefined && left!=null)?left:parseFloat(node.style.left);
	top = (top!=undefined && top!=null)?top:parseFloat(node.style.top);

	this.dom(node,{
		css : {width : width+'px', height : height+'px', left : left+'px', top : top+'px'}
	});
	
	if (parseInt(node.style.width) < destWidth-widthAdder) {
		width+=widthAdder;
		left-=widthAdder/2;	
	}else if(parseInt(node.style.width) > destWidth+widthAdder){
		width-=widthAdder;
		left+=widthAdder/2;
	}
	if(parseInt(node.style.height) < destHeight-heightAdder){
		height+=heightAdder;
		top -= heightAdder/2;
	}else if(parseInt(node.style.height) > destHeight+heightAdder){
		height-=heightAdder;
		top += heightAdder/2;
	}
	var widthCond = parseInt(node.style.width) < destWidth-widthAdder || parseInt(node.style.width) > destWidth+widthAdder;
	var heightCond = parseInt(node.style.height) < destHeight-heightAdder || parseInt(node.style.height) > destHeight+heightAdder;
	if( widthCond || heightCond){
		this.fwdderSlideShow.timeoutId['animateSize']=setTimeout("this.fwdderSlideShow.animateSize('"+id+"',"+destWidth+","+widthAdder+","+destHeight+","+heightAdder+","+timeout+",'"+callback+"',"+width+","+height+","+left+","+top+")", timeout);
	}else{
		eval(callback);
	}
}

FwdderSlideShow.prototype.slidePanel = function(){
	var DOMpanel = document.getElementById("fwdderSlideShowPanel");
	this.dom('fwdderSlideShowPanel',{
		css: {left : this.fwdderSlideShow.scrollLeft + (this.fwdderSlideShow.ww-parseInt(DOMpanel.style.width))/2 +"px", 
				top : this.fwdderSlideShow.scrollTop+"px"}
	});
}

FwdderSlideShow.prototype.getImageFitDimension = function(realImageWidth,realImageHeight){ 
	var calcImgW = 80/100*this.fwdderSlideShow.ww;
	var calcImgH = 80/100*this.fwdderSlideShow.wh;

	var imgW=0;
	var imgH=0;
	if( calcImgW/realImageWidth*realImageHeight < 80/100*this.fwdderSlideShow.wh ){
		//horizontal
		imgW = calcImgW;
		imgH = imgW/realImageWidth*realImageHeight; 
	}else if( calcImgH/realImageHeight*realImageWidth < 80/100*this.fwdderSlideShow.ww){
		//vertical
		imgH = calcImgH;
		imgW = imgH/realImageHeight*realImageWidth;
	}
	if(realImageWidth < 80/100*this.fwdderSlideShow.ww && realImageHeight < 80/100*this.fwdderSlideShow.wh){
		imgW = realImageWidth;
		imgH = realImageHeight;
	}
	
	var dimension = new Array();
	dimension['left']=this.fwdderSlideShow.scrollLeft+(this.fwdderSlideShow.ww-imgW)/2;
	dimension['top']=this.fwdderSlideShow.scrollTop+(this.fwdderSlideShow.wh-imgH)/2;
	dimension['width']= imgW;
	dimension['height'] = imgH;
	return dimension;
}

FwdderSlideShow.prototype.getWidgetFitDimension = function(imgW,imgH){
	var widgetW= imgW+2*this.conf['whiteBorderMargin'];
	var widgetH= imgH+2*this.conf['whiteBorderMargin'];
	
	var dimension = new Array();
	dimension['left']=this.fwdderSlideShow.scrollLeft+(this.fwdderSlideShow.ww-widgetW)/2;
	dimension['width']=widgetW;
	dimension['top']=this.fwdderSlideShow.scrollTop+(this.fwdderSlideShow.wh-widgetH)/2;
	dimension['height']=widgetH;
	
	return dimension;
}

FwdderSlideShow.prototype.updateWidgetStyle=function (){	
	var dimension = this.fwdderSlideShow.getImageFitDimension(this.fwdderSlideShow.img.width,this.fwdderSlideShow.img.height);
	this.dom('fwdderSlideShowImage',{
		css: {left : this.conf['whiteBorderMargin']+'px',
				top : this.conf['whiteBorderMargin']+'px',
				width : dimension['width']+'px',
				height : dimension['height']+'px'
		}
	});
	
	var dimension = this.fwdderSlideShow.getWidgetFitDimension(dimension['width'],dimension['height']);
	this.dom('fwdderSlideShowWidget',{
		css: { left : dimension['left']+'px',
				width : dimension['width']+"px",
				top : dimension['top']+"px",
				height : dimension['height']+"px"
		}
	});
}

FwdderSlideShow.prototype.toggleZoom = function(){
	if(this.fwdderSlideShow.mode=="zoom"){
		this.fwdderSlideShow.zoom('out');
	}else{
		this.fwdderSlideShow.zoom('in');
	}
}

	FwdderSlideShow.prototype.showPanel = function(){
		clearTimeout(this.timeoutId['panelDecay']);
		if(!this.isShowPanel){
			this.fade('fwdderSlideShowPanel',{'os':0,'oe':100},100,function(){
			});
			this.isShowPanel = true;
		}		
	}
	
	FwdderSlideShow.prototype.setHidePanel = function(){
		this.timeoutId['panelDecay'] = setTimeout("this.fwdderSlideShow.hidePanel()",500);
	}
	
	FwdderSlideShow.prototype.hidePanel = function(){
		if(this.isShowPanel){
			this.fade('fwdderSlideShowPanel',{'os':100,'oe':0},100,function(){
			});
			this.isShowPanel = false;
		}
	}

FwdderSlideShow.prototype.zoom = function(opr){
	if(opr=='in'){
		this.dom('fwdderSlideShowZoom',{
			attribute : { src : this.fwdderSlideShow.conf["fwdder_img_path"]+"/media-zoom-out.png"}
		});
		this.fwdderSlideShow.mode = "zoom";
		document.getElementsByTagName('html')[0].style.overflow="hidden";
		this.fwdderSlideShow.setScreenSize();
		var slideMargin = 20;
		this.dom('fwdderSlideShowImage',{
			css : {	left : this.conf['whiteBorderMargin']+'px',
				top : this.conf['whiteBorderMargin']+'px',
				width : this.fwdderSlideShow.img.width+'px',
				height : this.fwdderSlideShow.img.height+'px'
			}
		});
		this.dom('fwdderSlideShowWidget',{
			css : { left : this.fwdderSlideShow.scrollLeft+(this.fwdderSlideShow.ww-this.fwdderSlideShow.img.width-this.conf['whiteBorderMargin'])/2+'px',
						top : this.fwdderSlideShow.scrollTop+slideMargin+'px',
						width : this.fwdderSlideShow.img.width+2*this.conf['whiteBorderMargin']+'px',
						height : this.fwdderSlideShow.img.height+2*this.conf['whiteBorderMargin']+'px'
			}
		});
	} else if(opr=='out'){
		this.dom('fwdderSlideShowZoom',{
			attribute : { src : this.fwdderSlideShow.conf["fwdder_img_path"]+"/media-zoom-in.png"}
		});
		this.fwdderSlideShow.mode = "general";
		document.getElementsByTagName('html')[0].style.overflow="";
		this.fwdderSlideShow.setScreenSize();
		var imageDimension = this.fwdderSlideShow.getImageFitDimension(this.fwdderSlideShow.img.width,this.fwdderSlideShow.img.height);
		var widgetDimension = this.fwdderSlideShow.getWidgetFitDimension(imageDimension['width'],imageDimension['height']);
		this.dom('fwdderSlideShowImage',{
			css : {left : this.conf['whiteBorderMargin']+'px',
					top : this.conf['whiteBorderMargin']+'px',
					width : imageDimension['width']+'px',
					height : imageDimension['height']+'px'
				}
		});
		this.dom('fwdderSlideShowWidget',{
			css : {left : widgetDimension['left']+'px',
					top : widgetDimension['top']+'px',
					width : widgetDimension['width']+'px',
					height : widgetDimension['height']+'px'
				}
		});
	}
}

FwdderSlideShow.prototype.slide = function(opr){
	clearTimeout(this.fwdderSlideShow.timeoutId['animatePos']);

	var pixelHop = 20;
	var slideMargin = 20;
	var DOMImageArea=document.getElementById("fwdderSlideShowImage");
	var DOMwidget=document.getElementById("fwdderSlideShowWidget");
	
	if(opr=='left'){
		if(parseInt(DOMwidget.style.left) < this.fwdderSlideShow.scrollLeft+slideMargin){
			DOMImageArea.style.left = parseInt(DOMImageArea.style.left)+pixelHop+'px';

			DOMwidget.style.left = parseInt(DOMwidget.style.left)+pixelHop+'px';
		}
	} else if(opr=='right'){
		if(parseInt(DOMwidget.style.left)+parseInt(DOMwidget.style.width) > this.fwdderSlideShow.scrollLeft+this.fwdderSlideShow.ww-slideMargin){
			DOMImageArea.style.left = parseInt(DOMImageArea.style.left)-pixelHop+'px';

			DOMwidget.style.left = parseInt(DOMwidget.style.left)-pixelHop+'px';
		}
	} else if(opr=="down"){
		if((parseInt(DOMwidget.style.top)+parseInt(DOMwidget.style.height)) > (this.fwdderSlideShow.scrollTop+this.fwdderSlideShow.wh-slideMargin)){
			//DOMImageArea.style.top = parseInt(DOMImageArea.style.top)-pixelHop+'px';

			DOMwidget.style.top = parseInt(DOMwidget.style.top)-pixelHop+'px';
		}	
	} else if(opr=="up"){
		if(parseInt(DOMwidget.style.top) < this.fwdderSlideShow.scrollTop+slideMargin){
			//DOMImageArea.style.top = parseInt(DOMImageArea.style.top)+pixelHop+'px';

			DOMwidget.style.top = parseInt(DOMwidget.style.top)+pixelHop+'px';
		}
	}
}

FwdderSlideShow.prototype.setPicName=function(){
	this.dom('fwdderSlideShowImageDesc',{
		property : {
			innerHTML : decodeURI(this.getFwdderFilename(this.getFilename(this.picAr[this.picIndex])))
		}
	});
}


FwdderSlideShow.prototype.showGUI=function(){
	this.fwdderSlideShow.containerNode.style.display="inline";
	this.fwdderSlideShow.fade('fwdderSlideShowImage',{'os':0,'oe':100},500,function(){});
	this.fwdderSlideShow.slidePanel();
	this.fwdderSlideShow.isShowing = true;
}

FwdderSlideShow.prototype.hideGUI=function(){
	document.getElementsByTagName('html')[0].style.overflow="";
	this.fwdderSlideShow.containerNode.style.display="none";
	this.fwdderSlideShow.isShowing = false;
}

FwdderSlideShow.prototype.setDisplayArrow=function(){
	var nodeGoUp=document.getElementById("fwdderSlideShowGoUp");
	if(this.fwdderSlideShow.picIndex >= (this.fwdderSlideShow.picAr.length-1)){
		//hide goUp
		nodeGoUp.style.visibility="hidden";
	}else{
		nodeGoUp.style.visibility="visible";
	}
	
	var nodeGoDown=document.getElementById("fwdderSlideShowGoDown");
	if(this.fwdderSlideShow.picIndex <= 0){
		//hide goDown
		nodeGoDown.style.visibility="hidden";
	}else{
		nodeGoDown.style.visibility="visible";
	}

	
	var nodeFirstPic=document.getElementById("fwdderSlideShowFirstPic");
	if(this.fwdderSlideShow.picIndex <= 0){
		//hide FirstPic
		nodeFirstPic.style.visibility="hidden";
	}else{
		nodeFirstPic.style.visibility="visible";
	}
	
	var nodeLastPic=document.getElementById("fwdderSlideShowLastPic");
	if(this.fwdderSlideShow.picIndex >= (this.fwdderSlideShow.picAr.length-1)){
		//hide goDown
		nodeLastPic.style.visibility="hidden";
	}else{
		nodeLastPic.style.visibility="visible";
	}	
}

FwdderSlideShow.prototype.init=function(){
	window.fwdderSlideShow = this;
	if (window.addEventListener){
		window.addEventListener('DOMMouseScroll', this.fwdderSlideShow.mouseWheelListener, false);
	}	
	window.onresize=function(){
		if(this.fwdderSlideShow.isShowing){
			this.fwdderSlideShow.setScreenSize();
			this.fwdderSlideShow.slidePanel();
			
			this.fwdderSlideShow.updateWidgetStyle();
		}
	}	
	window.onscroll=function(){
		this.fwdderSlideShow.setScreenSize();
		
		this.fwdderSlideShow.slidePanel();
		if(this.fwdderSlideShow.isShowing && this.fwdderSlideShow.mode == "general"){
			this.fwdderSlideShow.updateWidgetStyle();
		}
	}
	window.onmousewheel = document.onmousewheel = this.fwdderSlideShow.mouseWheelListener;
	
	document.fwdderSlideShow = this;
	document.onmousemove = function(){
		if(!this.fwdderSlideShow.isFocusPanel){
			this.fwdderSlideShow.showPanel();
			this.fwdderSlideShow.setHidePanel();
		}
	}
	document.onkeydown = this.fwdderSlideShow.keyDownListener; 
	document.onkeyup = this.fwdderSlideShow.keyUpListener;
	
	this.fwdderSlideShow.setScreenSize();
	this.fwdderSlideShow.initGUI();
	this.fwdderSlideShow.assignLinkToShow();
}

FwdderSlideShow.prototype.assignLinkToShow=function(){
	if(linkNode=document.getElementById("fwdderSlideShowLink")){
		linkNode.style.cursor = 'pointer';
		linkNode.style.textDecoration = 'underline';
		linkNode.innerHTML="ดูเป็นสไลด์โชว์";
		linkNode.fwdderSlideShow=this;
		linkNode.onclick=this.show;
	}
}

FwdderSlideShow.prototype.show = function(){
	this.fwdderSlideShow.showPic(this.fwdderSlideShow.picIndex);
}

FwdderSlideShow.prototype.mouseWheelListener=function(e){
	if(!e){
		e = window.event;
	}
	if (e.wheelDelta) { /* IE/Opera. */
		delta = e.wheelDelta/120;
        //In Opera 9, delta differs in sign as compared to IE.
        if (window.opera)
			delta = -delta;
        } else if (e.detail) { /** Mozilla case. */
        //In Mozilla, sign of delta is different than in IE.
        //  Also, delta is multiple of 3.
            delta = -e.detail/3;
        }
		//If delta is nonzero, handle it.
        // Basically, delta is now positive if wheel was scrolled up,
        // and negative, if wheel was scrolled down.
	if(this.fwdderSlideShow.isShowing){	
	  	if(this.fwdderSlideShow.mode =="zoom"){
			if(delta > 0){
				this.fwdderSlideShow.slide("up");
			}else if(delta < 0){
				this.fwdderSlideShow.slide("down");
			}
			if(!window.event){ //  != IE
				e.preventDefault();
			}
			return false; 
		} 
	}
}

FwdderSlideShow.prototype.keyUpListener=function(e){
   if(!e){
      e = window.event;      //for IE
   }
	if (e.keyCode == this.fwdderSlideShow.conf.keyCode['z'] && this.fwdderSlideShow.keyEvent["zoom"]) {
      this.fwdderSlideShow.keyEvent["zoom"] = false;
	} 
} 

FwdderSlideShow.prototype.keyDownListener=function(e){
   if(!e){
      e = window.event; //for IE
   }
   if(this.fwdderSlideShow.isShowing){
		switch (e.keyCode){
			case this.fwdderSlideShow.conf.keyCode['z'] :
				if(!this.fwdderSlideShow.keyEvent["zoom"]) this.fwdderSlideShow.keyEvent["zoom"] = true;
				break;
			case this.fwdderSlideShow.conf.keyCode['n'] : 
				this.fwdderSlideShow.reloadPicUp();
				break;
			case this.fwdderSlideShow.conf.keyCode['p'] :
				this.fwdderSlideShow.reloadPicDown();
				break;
			case this.fwdderSlideShow.conf.keyCode['esc'] : 
				this.fwdderSlideShow.hideGUI();
				break;
		}
		
		if( this.fwdderSlideShow.keyEvent["zoom"] ){
		   // zoom in [+]
		    if (e.keyCode == this.fwdderSlideShow.conf.keyCode['+leftPad'] || e.keyCode == this.fwdderSlideShow.conf.keyCode['+rightPadFirefox'] || e.keyCode== this.fwdderSlideShow.conf.keyCode['+rightPadIE'] ) { 
				this.fwdderSlideShow.zoom('in');
		   }
		   // zoom out [-]
		   if (e.keyCode == this.fwdderSlideShow.conf.keyCode['-leftPad'] || e.keyCode == this.fwdderSlideShow.conf.keyCode['-rightPadIE']) {
				 this.fwdderSlideShow.zoom('out');
		   }
		}
		 
		 if( this.fwdderSlideShow.mode == "zoom"){
			switch(e.keyCode){
				case this.fwdderSlideShow.conf.keyCode['rightArrow'] :
					this.fwdderSlideShow.slide("right");
					return false;
					break;
				case this.fwdderSlideShow.conf.keyCode['leftArrow'] :
					this.fwdderSlideShow.slide("left");
					return false;
					break;
				case this.fwdderSlideShow.conf.keyCode['upArrow'] : 
		   			this.fwdderSlideShow.slide("up");
					return false;
					break;
			   case this.fwdderSlideShow.conf.keyCode['downArrow'] :
					this.fwdderSlideShow.slide("down");
					return false;
					break;
			}
		}
	}
  }
  
  // HTMLElement domNode dom(n,h)
  //
  // n can be HTMLElement, 'nodeId', 'nodeType'
  // if 'nodeType' is the type of the new node
  //
  // key of h can be 'css','attribute','property','child'
  // and the value is hashtable of those key.
  FwdderSlideShow.prototype.dom = function(v,h){
	var n = null;
	if(typeof v == 'string'){
		if(document.getElementById(v) !=null){
			n = document.getElementById(v);
		} else if(document.createElement(v).constructor && document.createElement(v).constructor != HTMLUnknownElement){
			n = document.createElement(v);
		} else {
			// TO DO -- 
			// check for the IE HTMLUnknownElement
			// and alert when String is neither id nor tagname
			n = document.createElement(v);
		}
	}else{
		n = v;
	}
	for(property in h){
		switch(property){
		  	case 'css' : 
				for(i in h[property]){				
					n.style[i] = h[property][i];
				}
				break;
			case 'attribute' : 
				for(i in h[property]){
					n.setAttribute(i,h[property][i]);
				}
				break;
			case 'event' : 
			case 'property' :
				for(i in h[property]){
					n[i] = h[property][i];
				}
				break;
			case 'child' : 
				for(i=0;i<h[property].length;i++){
					n.appendChild(h[property][i]);
				}
		}
	}
	return n;
  }

FwdderSlideShow.prototype.showPic=function(picIndex){
	this.updateOverlay();
	this.fwdderSlideShow.updateWidgetStyle();
	this.fwdderSlideShow.mode = "general";
	this.picIndex = parseInt(picIndex);
	this.reloadPic();
	this.showGUI();
}

	FwdderSlideShow.prototype.updateOverlay = function(){
		this.setScreenSize();
		this.dom('fwdderSlideShowOverlay',{
			css : {width:this.sw+'px',height:this.sh+'px'}
		});
	}

	
// --- call back function ---
FwdderSlideShow.prototype.reloadPic=function(){
	this.setDisplayArrow();
//	this.setPicName();  
/*	this.dom('fwdderSlideShowImageLink',{
		attribute : { href : this.picAr[this.picIndex],
						target : "_blank"
		}
	});
*/	
	this.dom('fwdderSlideShowImage',{
		css : {visibility : 'hidden'},
		attribute : {src: this.picAr[this.picIndex]}
	});

	this.timeoutId["loadingMessage"]=setTimeout(function(){
		this.fwdderSlideShow.dom('fwdderSlideShowLoading',{
			css : {display : 'block'}
		});
	}, 50);

	this.img.fwdderSlideShow=this;
	this.img.src = document.getElementById('fwdderSlideShowImage').src;
	this.img.onload =function(){
		this.fwdderSlideShow.dom('fwdderSlideShowImage',{
			css : {visibility : 'visible'},
			attribute : {title : decodeURI(this.fwdderSlideShow.getFwdderFilename(this.fwdderSlideShow.getFilename(this.fwdderSlideShow.picAr[this.fwdderSlideShow.picIndex])))}
		});
		if(this.fwdderSlideShow.mode == "zoom"){
			this.fwdderSlideShow.zoom('in');
		}else{
			this.fwdderSlideShow.updateWidgetStyle();
		}
		this.fwdderSlideShow.clearTimeout();
		this.fwdderSlideShow.dom('fwdderSlideShowLoading',{
			css : {display : 'none'}
		});
	}
}

FwdderSlideShow.prototype.clearTimeout=function(){
	clearTimeout(this.timeoutId["loadingMessage"]); 
}

FwdderSlideShow.prototype.reloadFirstPic=function(){
	this.fwdderSlideShow.picIndex=0;
	this.fwdderSlideShow.reloadPic();
}

FwdderSlideShow.prototype.reloadPicUp=function(){
	if(this.fwdderSlideShow.picIndex+1 < this.fwdderSlideShow.picAr.length){
		this.fwdderSlideShow.picIndex++;
		this.fwdderSlideShow.reloadPic();
	}
}
FwdderSlideShow.prototype.reloadPicDown=function(){
	if(this.fwdderSlideShow.picIndex-1 >= 0){
		this.fwdderSlideShow.picIndex--;
		this.fwdderSlideShow.reloadPic();
	}
}
FwdderSlideShow.prototype.reloadLastPic=function(){
	this.fwdderSlideShow.picIndex=this.fwdderSlideShow.picAr.length-1;
	this.fwdderSlideShow.reloadPic();
}

FwdderSlideShow.prototype.getFilename=function(filepath){
	var filenameAr=filepath.split("/");
	return filenameAr[filenameAr.length-1];
}
FwdderSlideShow.prototype.getFwdderFilename=function(fullfilename){
	var filenameAr=fullfilename.split("-");
	return filenameAr.slice(2).join("-");
}
FwdderSlideShow.prototype.thumbPathToFullPath=function(thumbPath){
	var pathAr=thumbPath.split("/");
	pathAr.splice(pathAr.length-2, 1); 		
	return pathAr.join("/");
}