/* 2007-02-15
 * user div to show fade in /out effect
 * @auther			:xp wang(xpw365@gmail.com)
 * @date			:2006-09-19
 * @objSelfName	: obj name 
 * @el 			: div of to show image; container with no margin & padding
 * @imgs		: array og image names
 * @img0		: empty image(this is for ie hacking)
 * @speed		: fade in /out speed
 * type			: show type
 * note : for shake image : extend gaps to long second : like 9:100
 */

function xpSlideShow(el,imgs,img0,gaps,speed,step,type,dir)
{
	gaps = !gaps?6000:gaps;		//start every 6 second
	speed = !speed?80:speed;
	step = !step?20:step;		
	type =  !type?0:type;
	dir = !dir?w$.random(0,3):dir
	var id=w$.getId(el); //el.id=el.id?el.id:"xpTDFShow_"+Math.random();
	var load = 0;
	var end=0;
	var length = imgs.length;
	var images = [];
	//only after all image loaded(* may not start if one of pic has problem ! !)
	el.onload=function(){
		load++;
		if(load >= length)  {
			if(end) el.init();
			else setTimeout("$('"+id+"').onload()",10);	
		}
	}
	
	for(var i=0; i<length; i++){
		images[i] = new Image();
		images[i].onload =el.onload;
		images[i].src =imgs[i];
		
	}
	var p=w$.pr(el);
	var s =w$.s(el);
	var ratio=1
	el.data = {images:images,length:length,index:1,last:0,p:p,s:s,sx: (s.w/(step*ratio)) ,sy:(s.h/(step*ratio)),  d:((dir & 1)?1:0),  f :((dir & 2)?1:0), type:type,gaps:gaps,speed:(type?speed/ratio: speed),step:(type?step*ratio: step),opt: parseInt(100/step),type:type,id:id,div:[],stage:0};
	el.next = function(){
		el.data.last = el.data.index++;
		el.data.index = (el.data.index >=el.data.length) ? 0: el.data.index;
	}
	el.init=function(){
		var parent = el.parentNode;
		for(var i=0; i<el.data.length; i++){
			var e = el.data.div[i] = xpWindow.createElement(el.data.id+'_'+i,'img',parent,el.nextSibling);
			e.style.position =  'absolute';
			e.style.display  =  'block';
			e.style.left     =  p.x+'px';
			e.style.top     = p.y+'px';	
			e.style.width    =s.w+'px';
			e.style.height   = s.h+'px';
			w$.opacity(e,0);
			if(!type){
				e.src = el.data.images[i].src;		
			}else{
				e.src=img0;	
				e.style.backgroundImage = 'url('+images[i].src+ ')';
				e.style.backgroundRepeat =  'no-repeat';		
				e.style.backgroundColor  =  '';	
			}
			//w$.opacity(e,100);
		}
		el.run();
		if(el.tagName=='IMG') w$.opacity(el,10)	
	}
	el.run=function(){
		if(el.data.stage > el.data.step){
			el.data.stage=0;
			setTimeout(el.run,el.data.gaps);
			if(el.data.type)
				w$.opacity(el.data.div[el.data.last],0);
			el.next();
			if(el.data.type){
				w$.opacity(el.data.div[el.data.index],100);
				w$.opacity(el.data.div[el.data.last],100);
			}
			return;
		}
		if(el.data.type){
			el.data.div[el.data.last].style.backgroundPosition=el.data.d* (0 +(2*el.data.f-1)* el.data.sx*el.data.stage) +'px ' +(1-el.data.d)* (0 +(2*el.data.f-1)* el.data.sy*el.data.stage)+ 'px';	
			el.data.div[el.data.index].style.backgroundPosition=el.data.d*(1- 2*el.data.f)*(el.data.s.w - el.data.sx*el.data.stage) +'px ' +(1-el.data.d)*(1- 2*el.data.f)*(el.data.s.h - el.data.sy*el.data.stage)+ 'px';	
		}else{	
			w$.opacity(el.data.div[el.data.index],el.data.opt*el.data.stage);		
			w$.opacity(el.data.div[el.data.last],100 - el.data.opt*el.data.stage);		
		}
		setTimeout(el.run,el.data.speed);
		el.data.stage++;
	}
	end = 1;
	return el;
}





function xpGalleryItem(el,imgs,x,y,border,gap,opacity,speed,step)
{
    this.gap = !gap?10:gaps;        //start every 6second
    this.speed = !speed?20:speed;    //steppint time in ms
    this.step = !step?20:step;        //step needed to move source to target
    this.border = !border?6:border;    //pic border    
    this.opacity = !opacity?80:opacity;//
    this.id=el.id=el.id?el.id:"xpMulitColumnFreakShow_"+Math.random();
    el.obj=this;
    
    this.delay=5
    this.delayCount =this.delay;
    
    //get window position & size
    this.p=w$.findPositionXY(el);
    this.s=w$.findSizeWH(el);
    this.c=w$.findCenterXY(el);

    this.count = imgs.length;
    this.rows=parseInt(Math.sqrt(this.count*this.s.h/this.s.w));
    this.cols=parseInt(this.count/this.rows);

    this.x = !x?(this.s.w-this.border*this.cols*2-this.gap*(this.cols+1))/this.cols :x
    this.y = !y?(this.s.h-this.border*this.rows*2-this.gap*(this.rows+1))/this.rows :y
    
    //total image need to deal with
    this.all = this.cols*this.rows
    this.elementLoad=0;
  
    this.mouse =_xpMice('$("'+this.id+'").obj.run()');
    //this.mouse =_xpMice();
    this.zoomed = false;
    this.tx=this.sx=this.c.x
    this.ty=this.sy=this.c.y
    this.stage=0;
    
    var ni=0;
    this.images =[] ;
    for (var i = 0; i < this.rows; i++){
        var jrr=[];
        for (var j =0; j < this.cols; j++)    {
            var e = document.createElement('img');
            jrr[j]=e;
            e.style.border="#ddd solid "+this.border+'px';
            e.style.position="absolute";
            var idname = this.id+'_'+i+'_'+j
            e.setAttribute('id',idname);

            e.data={
                mum:this.id,    //mum object name
                x:this.x,
                y:this.y,
                col:j,                //element cols
                row:i,                //element rows
                cols:this.cols,
                rows:this.rows,
                opacity:this.opacity,
                p:this.p,
                c:this.c,
                gap:this.gap,
                border:this.border,
                sx:this.c.x,
                sy:this.c.y,
                cxi:(this.cols+1)/2,        //4->2.5 5 ->3
                cyi:(this.rows+1)/2,
                rpx:this.cols==1?1:2/(this.cols-1),
                rpy:this.rows==1?1:2/(this.rows-1)
            }

            e.onload = function(){
                this.data.w = this.width;
                this.data.h = this.height;
                this.data.rx = this.data.x / this.width;
                this.data.ry = this.data.y / this.height;
                eval('$("'+this.data.mum+'").obj.loading()');
            }
            e.onmouseover=function(){
                this.style.borderColor="green";
                eval('var zoom = $("'+this.data.mum +'").obj.zoomed');
                if(zoom)
                    w$.opacity(this,100);
                else
                    w$.opacity(this,90);
            }
            e.onmouseout=function(){
                this.style.borderColor="#eee";
                w$.opacity(this,this.data.opacity);
            }
            e.onclick=function(){
			 		var name =this.mum+'_pop_'+Math.random() 
					var pop= w$.createElement(name,'img');
					
					pop.style.overflow='hidden'
					pop.style.position = 'absolute';
					pop.style.left 		= this.style.left 
					pop.style.top	 	= this.style.top  
					pop.style.width		= this.style.width 
					pop.style.height	= this.style.height
					pop.style.border 	= parseInt(0.03*this.data.w ) +'px #ddd solid';
					pop.style.background= 'url('+this.src+') 50% 50% no-repeat';
	
					pop.style.cursor	=	'pointer'
					pop.style.zIndex	=	this.data.zIndex + 1000
		
					pop.onclick = function(){
						setTimeout('w$.EFC($("'+name+'"),0,1);',1)	//w$.removeElement($("'+name+'"))
					}
					
					var c1 = w$.c(this);
					var c2 = w$.wc();
					w$.move(pop,c2.x-c1.x,c2.y-c1.y,this.data.w,this.data.h )           	
			}
			e.show=function(){
                eval('var rx0 = $("'+this.data.mum +'").obj.rx' );
                eval('var ry0 = $("'+this.data.mum +'").obj.ry' );
                eval('var zoom =$("'+this.data.mum +'").obj.zoomed');
                var sx = this.data.x
                var sy = this.data.y
                //alert(this.data.rx)
                var rx=0
                if(this.data.cols > 1)
                    rx = rx0 * (this.data.col*2/(this.data.cols-1)-1) ;
                var ry=0
                if(this.data.rows > 1)
                    ry = ry0 * (this.data.row*2/(this.data.rows-1)-1) ;
                sx = sx*(1+ (ry+rx)*.2);
                sy = sy*(1+ (rx+ry)*.2);
                this.style.width  = parseInt(this.data.zoom?this.data.w*1.25:sx)+'px';
                this.style.height = parseInt(this.data.zoom?this.data.h*1.25:sy)+'px';        
                //var px = this.data.sx*(1+rx*.05) + (this.data.col-this.data.cxi ) * (this.data.border*2+sx+this.data.gap) +'px'
                var px = this.data.c.x + (this.data.col-this.data.cxi +.5) * (this.data.border*0+sx+this.data.gap)*(1+rx*.2) + 'px'
                var py = this.data.c.y + (this.data.row-this.data.cyi +.5) * (this.data.border*2+sy+this.data.gap)*(1+ry*.2) + 'px'
                this.style.left = parseInt(px) +'px';
                this.style.top  = parseInt(py) +'px';
                this.data.zIndex = this.style.zIndex = parseInt((this.data.zoom?this.data.w*1.25:sx) *10)
                w$.opacity(this,this.data.zoom?100:this.data.opacity);
                this.style.visibility="visible";
            }
            this.images[i] = jrr;
			el.appendChild(e);
            e.src = imgs[(ni++) % this.count]
            e.style.visibility="hidden";	            
        }
        
    }
    

    this.loading=function(){
         this.elementLoad ++;
        if(this.elementLoad ==  this.all )
            this.run();
    }
    
    this.run = function(){
    	if(this.delayCount++ < this.delay) return
    	this.delayCount=0;
        eval('var x='+this.mouse+'.x');
        eval('var y='+this.mouse+'.y');
        if(x!=this.tx || y != this.ty)    //mouse moved
        {
            this.sx = this.stage*(this.tx-this.sx);
            this.sy = this.stage*(this.ty-this.sy);
            this.tx = x;
            this.ty = y;
            //var ws = w$.findWindowSize();
            var wp = w$.findWindowPosition();
            this.rx = (x-this.c.x)/Math.min((wp.x - this.c.x ),this.c.x )
            this.ry = (y-this.c.y)/Math.min((wp.y - this.c.y ),this.c.y )
            this.r = Math.min(this.rx,this.ry);
            this.stage=0;
        }
        for(var i=0; i<this.rows;i++){
            for(var j=0;j<this.cols;j++){
               	 //setTimeout(this.obj+'.images['+i+']['+j+'].show()',100*i*j);
               	 this.images[i][j].show();
            }
        }
        this.stage++
        //setTimeout(this.obj+'.run()',this.speed);            
    }
    
    
}



function xpGallery(el,imgs,auto,fix,button)
{

//	button = {
//		left:'/img/left.gif',
//		right:'/img/right.gif',
////		right:
////		middle:
////		sleft:
////		sright:
//	}
	
	
	el.style.position='relative';
	el.xpGallery ={button:button?button:null,auto:auto,fix:fix,id:el.id,c:w$.c(el),p:w$.p(el),s:w$.s(el),step : 20, speed:60, name: 'xpGallery_'+Math.random(), count:imgs.length,load : 0, obj:el.xpGallery,images:[],index:0}			//# INDEX ON SHOW	
	for(var i=0; i< el.xpGallery.count;i++)
	{
		var e = w$.createElement(el.xpGallery.name+'_'+i,'img',el);
        		e.style.position="absolute";
  		el.xpGallery.images[i] = e;
		e.style.visibility = 'hidden';
		e.onload = function(){
			var w =this.ow=this.width;
			var h = this.oh=this.height;
			while(w > el.xpGallery.s.w ||h>el.xpGallery.s.h){
				if(w > el.xpGallery.s.w ){
					h = parseInt(h* el.xpGallery.s.w/w)
					w = el.xpGallery.s.w						
				}
				if(h>el.xpGallery.s.h){
					w = parseInt(w*el.xpGallery.s.h/h)
					h=el.xpGallery.s.h
				}
			}
			this.style.width =w+'px'
			this.style.height=h+'px'
			this.style.left =  parseInt((el.xpGallery.s.w - w)/2) + 'px'
			this.style.top  = parseInt((el.xpGallery.s.h - h)/2) + 'px'
			el.xpGallery.loading();
		}
		e.src = imgs[i];		
	}

	el.xpGallery.loading=function(){
		el.xpGallery.load++;
		if(el.xpGallery.load ==  el.xpGallery.count )
            	el.xpGallery.show();		
	}	
	el.xpGallery.show=function(x){
		x=!x?el.xpGallery.index:w$.range(el.xpGallery.index+x,0,el.xpGallery.count-1);
		if(x != el.xpGallery.index)
			el.xpGallery.images[el.xpGallery.index].style.display='none';
		w$.EF(el.xpGallery.images[x]);

		el.xpGallery.index = x;
		
	}
	
	//popup window
	el.xpGallery.popup=function(){
		var name =el.xpGallery.name+'_pop'; 
		var img = el.xpGallery.images[el.xpGallery.index];
		if($(name)) w$.removeElement($(name));
		var e = w$.createElement(name,'img');
		var c1 = w$.c(el);
		var c2 = w$.wc();	
		e.style.overflow='hidden'
		e.style.position = 'absolute';
		e.style.left 	=  c1.x +'px';//img.style.left
		e.style.top	=  c1.y+'px';//img.style.top
		e.style.width	= '20px';//img.style.width
		e.style.height	= '20px';//img.style.height
		e.style.border 	= '6px #ddd solid';
		e.src = img.src
		e.style.cursor	= 'pointer'
		e.onclick = function(){
			setTimeout('w$.EFC($("'+name+'",0,1))',1)
		}


		w$.move(e,c2.x -c1.x,c2.y-c1.y,img.ow,img.oh )
	}
	
	//control buttons
	
	el.xpGallery.CB= w$.createElement(el.xpGallery.name+'_CB','div',el);
	el.xpGallery.CB.style.position = 'absolute';

	el.xpGallery.CB.style.width= el.xpGallery.s.w+'px';
	el.xpGallery.CB.style.height = '36px';
	el.xpGallery.CB.style.left = 0;
	el.xpGallery.CB.style.top = parseInt((el.xpGallery.s.h)/2)/*+el.xpGallery.p.y*/ -20 + 'px';
	el.xpGallery.CB.style.background = 'transparent';	
	el.xpGallery.CB.style.textAlign="center";
	el.xpGallery.CB.style.verticalAlign="bottom"
	


	el.xpGallery.left = w$.createElement(el.xpGallery.name+'_left','div',el.xpGallery.CB);
	el.xpGallery.left.style.cssFloat = 'left';
	el.xpGallery.left.style.styleFloat = 'left';
	el.xpGallery.left.innerHTML = button && button.left?'<img alt="" src="'+button.left+'" />':'<b>&laquo;</b>';
	el.xpGallery.left.style.margin = '4px';
	el.xpGallery.left.style.color = 'white';
	el.xpGallery.left.style.fontSize= '2em';
	el.xpGallery.left.style.cursor='pointer'
	el.xpGallery.left.onclick=function(){el.xpGallery.show(-1) ; return false; }	
	el.xpGallery.left.onmouseover = function(){ w$.opacity(el.xpGallery.left,100) }
	el.xpGallery.left.onmouseout = function(){ w$.opacity(el.xpGallery.left,50) }
	w$.opacity(el.xpGallery.left,50)

	
	el.xpGallery.right = w$.createElement(el.xpGallery.name+'_right','div',el.xpGallery.CB);
	el.xpGallery.right.style.cssFloat = 'right';
	el.xpGallery.right.style.styleFloat = 'right';
	el.xpGallery.right.innerHTML = button && button.right?'<img alt="" src="'+button.right+'" />': '<b>&raquo;</b>';
	el.xpGallery.right.style.margin = '4px';
	el.xpGallery.right.style.color = 'white';	
	el.xpGallery.right.style.fontSize= '2em';
	el.xpGallery.right.style.cursor='pointer'	
	el.xpGallery.right.onclick=function(){el.xpGallery.show(1)}	
	el.xpGallery.right.onmouseover = function(){ w$.opacity(el.xpGallery.right,100) }
	el.xpGallery.right.onmouseout = function(){ w$.opacity(el.xpGallery.right,50) }	
	w$.opacity(el.xpGallery.right,50)

	if(auto){
		setInterval('$("'+el.xpGallery.name+'_right").onclick()' , 5000);
	}	
	
	el.xpGallery.CT = w$.createElement(el.xpGallery.name+'_CT','div',el)//.xpGallery.CB);
	el.xpGallery.CT.style.margin="0 40px"
	el.xpGallery.CT.innerHTML = '&nbsp;';
	el.xpGallery.CT.style.backgroundColor = '#ddd';	
	el.xpGallery.CT.style.width = el.xpGallery.s.w-80 +'px';	
	el.xpGallery.CT.style.height = el.xpGallery.s.h +'px';	
	el.xpGallery.CT.style.cursor='pointer'	
	el.xpGallery.CT.style.position='absolute'	
	el.xpGallery.CT.onclick=function(){el.xpGallery.popup()}	

	w$.opacity(el.xpGallery.CT,1);


	
	//browser bar
	var title=.2 //30%
	
	el.xpGallery.sub= w$.createElement(el.xpGallery.name+'_sub','div',el);
	el.xpGallery.sub.style.position = 'absolute';
	el.xpGallery.sub.style.background = 'white';	
	w$.opacity(el.xpGallery.sub,80)
	if(fix)	el.xpGallery.sub.style.top= el.xpGallery.s.h +'px';
	else el.xpGallery.sub.style.bottom = '0px';//el.xpGallery.p.y+el.xpGallery.s.h-2 +'px';
	el.xpGallery.sub.style.overflow = 'hidden';
	el.xpGallery.sub.style.width=el.xpGallery.s.w+'px';
	var sub_height = el.xpGallery.sub.sub_height = parseInt(el.xpGallery.s.h*title)-4
	el.xpGallery.sub.style.height = (fix ? sub_height :4) +'px'
	el.xpGallery.sub.open_height = (fix ? sub_height :4);
	el.xpGallery.sub.open=false;
	el.xpGallery.sub.dx=1;
	
	
	el.xpGallery.sub.hs=function(id){
		var e = $(id);
		var s = w$.s(e);
		var dx = e.dx;
		var i=0
		for(var p =s.h; p <= e.sub_height && p >=4 ;p+=dx){
			i++;
			setTimeout('$("'+id+'").style.height="'+p+'px"',20*i)
		}
	}
	
	el.xpGallery.sub.onmouseover = function(){
		var s = w$.s(this);
		if(!this.open && s.h < 5){
			this.dx = 1
			this.open=true; 
			this.hs(this.id);
		} 
		setTimeout('$("'+this.id+'").close("'+this.id+'")',5000);
	}

	el.xpGallery.sub.close = function(e){
		if(el.xpGallery.sub1.move) {
			setTimeout('$("'+this.id+'").close("'+this.id+'")',5000);
			return;
		}
		var s = w$.s(this);
		if(this.open && s.h >= this.open_height) {
			this.open=false;
			this.dx=-1; 
			this.hs(this.id);
		} 
	}
	
	
	el.xpGallery.sub1= w$.createElement(el.xpGallery.name+'_sub1','div',el.xpGallery.sub);
	el.xpGallery.sub1.style.background = 'transparent';	
	el.xpGallery.sub1.style.position = 'absolute';	
	el.xpGallery.sub1.style.left  = '0px';	
	el.xpGallery.sub1.style.cursor='pointer'	
	el.xpGallery.sub1.style.width='0'	
	//el.xpGallery.sub1.style.zIndex='-1'	
	el.xpGallery.sub1.style.height = sub_height+'px'
	el.xpGallery.thumb=[]
	el.xpGallery.index2 = 0;
	for(var i=0; i< el.xpGallery.count;i++)
	{
		var e = w$.createElement(el.xpGallery.name+'_thumb_'+i,'img',el.xpGallery.sub1);
		el.xpGallery.thumb[i] = e;
		e.style.margin = '2px'
		e.onload = function(){
			var w = this.width;
			var h = this.height;
			if(h>sub_height){
					w = parseInt(w*sub_height/h)
					h=sub_height
			}
			this.style.width =w-4+'px'
			this.style.height=h-4+'px'
			this.style.left = el.xpGallery.p.x + parseInt((el.xpGallery.s.w - w)/2) + 'px'
			this.style.top  = parseInt(0.3*(el.xpGallery.p.y + parseInt((el.xpGallery.s.h - h)/2))) + 'px'
			var s1s = w$.s(el.xpGallery.sub1);
			el.xpGallery.sub1.style.width =s1s.w + w +'px' ;
		}
		e.onclick=function(){
			el.xpGallery.show(this.id.split('_')[3] - el.xpGallery.index);
		}
		e.src = imgs[i];
		
	}	
	el.xpGallery.sub1.move=false;	
	
	el.xpGallery.sub_left= w$.createElement(el.xpGallery.name+'_sub_left','div',el.xpGallery.sub);
	el.xpGallery.sub_left.style.background ='transparent';	
	el.xpGallery.sub_left.style.position = 'absolute';
	el.xpGallery.sub_left.style.left = '0';
	el.xpGallery.sub_left.style.top = sub_height/2-10+'px';
	el.xpGallery.sub_left.style.cursor='pointer'	
	el.xpGallery.sub_left.innerHTML = !button ? '<b>&laquo;</b>' :( button.sleft?'<img alt="" src="'+button.sleft+'" />': (button.left? '<img alt="" src="'+button.left+'" />' :'<b>&laquo;</b>')) ;
	el.xpGallery.sub_left.style.fontSize= '1.8em';
	el.xpGallery.sub_left.style.padding= '2px';
	el.xpGallery.sub_left.style.color= '#fff';

	el.xpGallery.sub_left.onmouseover = function(){
		w$.opacity(el.xpGallery.sub_left,99);
		el.xpGallery.sub1.move=true;
		el.xpGallery.sub1.moving(1);
	}
	el.xpGallery.sub_left.onmouseout = function(){
		w$.opacity(el.xpGallery.sub_left,50);
		el.xpGallery.sub1.move=false;
	}
	w$.opacity(el.xpGallery.sub_left,50);
	
	el.xpGallery.sub_right= w$.createElement(el.xpGallery.name+'_sub_right','div',el.xpGallery.sub);

	el.xpGallery.sub_right.style.background = 'transparent';	
	el.xpGallery.sub_right.style.position = 'absolute';
	el.xpGallery.sub_right.style.right = '0';
	el.xpGallery.sub_right.style.top = sub_height/2-10+ 'px';	
	el.xpGallery.sub_right.style.cursor='pointer'	
	el.xpGallery.sub_right.innerHTML = !button ? '<b>&raquo;</b>' :( button.sright?'<img alt="" src="'+button.sright+'" />': (button.right? '<img alt="" src="'+button.right+'" />' :'<b>&raquo;</b>')) ;
	el.xpGallery.sub_right.style.fontSize= '1.8em';
	el.xpGallery.sub_right.style.color= '#fff';
	w$.opacity(el.xpGallery.sub_right,50);	
	el.xpGallery.sub_right.onmouseover = function(){
		w$.opacity(el.xpGallery.sub_right,99);
		el.xpGallery.sub1.move=true;
		el.xpGallery.sub1.moving(-1);
	}
	el.xpGallery.sub_right.onmouseout = function(){
		w$.opacity(el.xpGallery.sub_right,50);
		el.xpGallery.sub1.move=false;
	}
	w$.opacity(el.xpGallery.sub_right,50);
	
	el.xpGallery.sub1.moving=function(dx){

		var pr = w$.pr(this);
		var s = w$.s(this);
		var pos = pr.x+dx*2;

		if(this.move && pos < 0 &&  pos+s.w > el.xpGallery.s.w ){
			this.style.left=pos+'px';
			setTimeout('$("'+this.id+'").moving('+dx+')',5);
		}else{
			this.move = false;
		}
		
	}

}



//////////////////////////////////////////////////////////////////////////


function xpGalleryConfuse(vars){

	el=vars.el
	imgs=vars.imgs
	button=vars.button
	auto=vars.auto
	fix=vars.fix	
	titles=vars.titles
	thumbs = vars.thumbs ? vars.thumbs : vars.imgs 
	
	el.style.position='relative';
	el.xpGalleryConfuse ={maxX:vars.maxX ? vars.maxX : 750, maxY:vars.maxY ?vars.maxY :550,thumbs:thumbs,titles:titles,button:button?button:null,auto:auto,fix:fix,id:el.id,c:w$.c(el),p:w$.p(el),s:w$.s(el),step : 20, speed:60, name: 'xpGalleryConfuse_'+Math.random(), count:imgs.length,load : 0,index:0}			//# INDEX ON SHOW	
	//el.style.overflow = 'hidden'
	var el_width = w$.s(el).x

	
	var e = w$.createElement(el.xpGalleryConfuse.name+'_loader','img',el);
	e.style.position="absolute";
	e.style.visibility = 'hidden';
	el.xpGalleryConfuse.loader=e;

	var e = w$.createElement(el.xpGalleryConfuse.name+'_large','img',el)
	e.style.position="absolute";
	e.style.visibility = 'hidden';
	el.xpGalleryConfuse.large = e;
	
	el.xpGalleryConfuse.loadImage=function(i){
		
		el.xpGalleryConfuse.loader.onload=function()
		{
			e = el.xpGalleryConfuse.large;
			e.style.visibility = 'hidden';
			e.onload = function()
			{
			
				var w = el.xpGalleryConfuse.loader.width;
				var h = el.xpGalleryConfuse.loader.height;
				
				while(w > el.xpGalleryConfuse.s.w ||h>el.xpGalleryConfuse.s.h){
					if(w > el.xpGalleryConfuse.s.w ){
						h = parseInt(h* el.xpGalleryConfuse.s.w/w)
						w = el.xpGalleryConfuse.s.w						
					}
					if(h>el.xpGalleryConfuse.s.h){
						w = parseInt(w*el.xpGalleryConfuse.s.h/h)
						h=el.xpGalleryConfuse.s.h
					}
				}
				this.style.width =w+'px'
				this.style.height=h+'px'
				this.style.left =  parseInt((el.xpGalleryConfuse.s.w - w)/2) + 'px'
				this.style.top  = parseInt((el.xpGalleryConfuse.s.h - h)/2) + 'px'
				this.style.visibility = 'visible';
				w$.EF(this)

			}
			e.src = el.xpGalleryConfuse.loader.src ;		
		}
		el.xpGalleryConfuse.loader.src = imgs[i];
		//el.xpGalleryConfuse.loader.src = "/attach/info/4a40ec3cd527b.jpg";
	}

	//########## start point #########################
	el.xpGalleryConfuse.onloading=function(){
		el.xpGalleryConfuse.loadImage(0);
		el.xpGalleryConfuse.loading()
	}
	//################################################
	
	var onload = window.onload ? window.onload : '';
	window.onload = function(){if(onload) onload();el.xpGalleryConfuse.onloading() }

	el.xpGalleryConfuse.loading=function(){
		el.xpGalleryConfuse.CB= w$.createElement(el.xpGalleryConfuse.name+'_CB','div',el);
		el.xpGalleryConfuse.CB.style.position = 'absolute';
		el.xpGalleryConfuse.CB.style.width= el.xpGalleryConfuse.s.w+'px';
		el.xpGalleryConfuse.CB.style.height = '36px';
		el.xpGalleryConfuse.CB.style.left = 0;
		el.xpGalleryConfuse.CB.style.top = parseInt((el.xpGalleryConfuse.s.h)/2)/*+el.xpGalleryConfuse.p.y*/ -20 + 'px';
		el.xpGalleryConfuse.CB.style.background = 'transparent';	
		el.xpGalleryConfuse.CB.style.textAlign="center";
		el.xpGalleryConfuse.CB.style.verticalAlign="bottom"
		el.xpGalleryConfuse.left = w$.createElement(el.xpGalleryConfuse.name+'_left','div',el.xpGalleryConfuse.CB);
		el.xpGalleryConfuse.left.style.cssFloat = 'left';
		el.xpGalleryConfuse.left.style.styleFloat = 'left';
		el.xpGalleryConfuse.left.innerHTML = button && button.left?'<img alt="" src="'+button.left+'" />':'<b>&laquo;</b>';
		el.xpGalleryConfuse.left.style.margin = '4px';
		el.xpGalleryConfuse.left.style.color = 'white';
		el.xpGalleryConfuse.left.style.fontSize= '2em';
		el.xpGalleryConfuse.left.style.cursor='pointer'
		el.xpGalleryConfuse.left.onclick=function(){el.xpGalleryConfuse.show(-1) ; return false; }	
		el.xpGalleryConfuse.left.onmouseover = function(){ w$.opacity(el.xpGalleryConfuse.left,100) }
		el.xpGalleryConfuse.left.onmouseout = function(){ w$.opacity(el.xpGalleryConfuse.left,50) }
		w$.opacity(el.xpGalleryConfuse.left,50)
		
		el.xpGalleryConfuse.right = w$.createElement(el.xpGalleryConfuse.name+'_right','div',el.xpGalleryConfuse.CB);
		el.xpGalleryConfuse.right.style.cssFloat = 'right';
		el.xpGalleryConfuse.right.style.styleFloat = 'right';
		el.xpGalleryConfuse.right.innerHTML = button && button.right?'<img alt="" src="'+button.right+'" />': '<b>&raquo;</b>';
		el.xpGalleryConfuse.right.style.margin = '4px';
		el.xpGalleryConfuse.right.style.color = 'white';	
		el.xpGalleryConfuse.right.style.fontSize= '2em';
		el.xpGalleryConfuse.right.style.cursor='pointer'	
		el.xpGalleryConfuse.right.onclick=function(){el.xpGalleryConfuse.show(1)}	
		el.xpGalleryConfuse.right.onmouseover = function(){ w$.opacity(el.xpGalleryConfuse.right,100) }
		el.xpGalleryConfuse.right.onmouseout = function(){ w$.opacity(el.xpGalleryConfuse.right,50) }	
		w$.opacity(el.xpGalleryConfuse.right,50)
		if(auto){
			setInterval('$("'+el.xpGalleryConfuse.name+'_right").onclick()' , 5000);
		}	
		el.xpGalleryConfuse.CT = w$.createElement(el.xpGalleryConfuse.name+'_CT','div',el)//.xpGalleryConfuse.CB);
		el.xpGalleryConfuse.CT.style.margin="0 40px"
		el.xpGalleryConfuse.CT.innerHTML = '&nbsp;';
		el.xpGalleryConfuse.CT.style.backgroundColor = '#ddd';	
		el.xpGalleryConfuse.CT.style.width = el.xpGalleryConfuse.s.w-80 +'px';	
		el.xpGalleryConfuse.CT.style.height = el.xpGalleryConfuse.s.h +'px';	
		el.xpGalleryConfuse.CT.style.cursor='pointer'	
		el.xpGalleryConfuse.CT.style.position='absolute'	
		el.xpGalleryConfuse.CT.onclick=function(){el.xpGalleryConfuse.popup()}	
		w$.opacity(el.xpGalleryConfuse.CT,1);
		
		//browser bar
		var title=.2 //30%
		el.xpGalleryConfuse.sub= w$.createElement(el.xpGalleryConfuse.name+'_sub','div',el);
		el.xpGalleryConfuse.sub.style.position = 'absolute';
		el.xpGalleryConfuse.sub.style.background = 'white';	
		w$.opacity(el.xpGalleryConfuse.sub,80)
		if(fix)	el.xpGalleryConfuse.sub.style.top= el.xpGalleryConfuse.s.h +'px';
		else el.xpGalleryConfuse.sub.style.bottom = '0px';//el.xpGalleryConfuse.p.y+el.xpGalleryConfuse.s.h-2 +'px';
		el.xpGalleryConfuse.sub.style.overflow = 'hidden';
		el.xpGalleryConfuse.sub.style.width=el.xpGalleryConfuse.s.w+'px';
		var sub_height = el.xpGalleryConfuse.sub.sub_height = parseInt(el.xpGalleryConfuse.s.h*title)-4
		el.xpGalleryConfuse.sub.style.height = (fix ? sub_height :4) +'px'
		el.xpGalleryConfuse.sub.open_height = (fix ? sub_height :4);
		el.xpGalleryConfuse.sub.open=false;
		el.xpGalleryConfuse.sub.dx=1;
		
		
		el.xpGalleryConfuse.sub.hs=function(id){
			var e = $(id);
			var s = w$.s(e);
			var dx = e.dx;
			var i=0
			for(var p =s.h; p <= e.sub_height && p >=4 ;p+=dx){
				i++;
				setTimeout('$("'+id+'").style.height="'+p+'px"',20*i)
			}
		}
		
		el.xpGalleryConfuse.sub.onmouseover = function(){
			var s = w$.s(this);
			if(!this.open && s.h < 5){
				this.dx = 1
				this.open=true; 
				this.hs(this.id);
			} 
			setTimeout('$("'+this.id+'").close("'+this.id+'")',5000);
		}
	
		el.xpGalleryConfuse.sub.close = function(e){
			if(el.xpGalleryConfuse.sub1.move) {
				setTimeout('$("'+this.id+'").close("'+this.id+'")',5000);
				return;
			}
			var s = w$.s(this);
			if(this.open && s.h >= this.open_height) {
				this.open=false;
				this.dx=-1; 
				this.hs(this.id);
			} 
		}
		
		
		el.xpGalleryConfuse.sub1= w$.createElement(el.xpGalleryConfuse.name+'_sub1','div',el.xpGalleryConfuse.sub);
		el.xpGalleryConfuse.sub1.style.background = 'transparent';	
		el.xpGalleryConfuse.sub1.style.position = 'absolute';	
		el.xpGalleryConfuse.sub1.style.left  = '0px';	
		el.xpGalleryConfuse.sub1.style.cursor='pointer'	
		el.xpGalleryConfuse.sub1.style.width='0'	
		el.xpGalleryConfuse.sub1.style.visibility='hidden'	
		//el.xpGalleryConfuse.sub1.style.zIndex='-1'	
		el.xpGalleryConfuse.sub1.style.height = sub_height+'px'
		el.xpGalleryConfuse.thumb=[]
		el.xpGalleryConfuse.index2 = 0;
		for(var i=0; i< el.xpGalleryConfuse.count;i++)
		{
			var e = w$.createElement(el.xpGalleryConfuse.name+'_thumb_'+i,'img',el.xpGalleryConfuse.sub1);
			el.xpGalleryConfuse.thumb[i] = e;
			e.style.margin = '2px'
			e.onload = function(){
				var w = this.width;
				var h = this.height;
				if(h>sub_height){
						w = parseInt(w*sub_height/h)
						h=sub_height
				}
				this.style.width =w-4+'px'
				this.style.height=h-4+'px'
				this.style.left = el.xpGalleryConfuse.p.x + parseInt((el.xpGalleryConfuse.s.w - w)/2) + 'px'
				this.style.top  = parseInt(0.3*(el.xpGalleryConfuse.p.y + parseInt((el.xpGalleryConfuse.s.h - h)/2))) + 'px'
				var s1s = w$.s(el.xpGalleryConfuse.sub1);
				el.xpGalleryConfuse.sub1.style.width =s1s.w + w +'px' ;
				el.xpGalleryConfuse.index2++
				if(el.xpGalleryConfuse.index2 == (el.xpGalleryConfuse.count-1) ) el.xpGalleryConfuse.sub1.style.visibility = 'visible'
			}
			e.onclick=function(){
				el.xpGalleryConfuse.show(this.id.split('_')[3] - el.xpGalleryConfuse.index);
			}
			e.src = el.xpGalleryConfuse.thumbs[i];
			
		}	
		el.xpGalleryConfuse.sub1.move=false;	
		
		el.xpGalleryConfuse.sub_left= w$.createElement(el.xpGalleryConfuse.name+'_sub_left','div',el.xpGalleryConfuse.sub);
		el.xpGalleryConfuse.sub_left.style.background ='transparent';	
		el.xpGalleryConfuse.sub_left.style.position = 'absolute';
		el.xpGalleryConfuse.sub_left.style.left = '0';
		el.xpGalleryConfuse.sub_left.style.top = sub_height/2-10+'px';
		el.xpGalleryConfuse.sub_left.style.cursor='pointer'	
		el.xpGalleryConfuse.sub_left.innerHTML = !button ? '<b>&laquo;</b>' :( button.sleft?'<img alt="" src="'+button.sleft+'" />': (button.left? '<img alt="" src="'+button.left+'" />' :'<b>&laquo;</b>')) ;
		el.xpGalleryConfuse.sub_left.style.fontSize= '1.8em';
		el.xpGalleryConfuse.sub_left.style.padding= '2px';
		el.xpGalleryConfuse.sub_left.style.color= '#fff';
	
		el.xpGalleryConfuse.sub_left.onmouseover = function(){
			w$.opacity(el.xpGalleryConfuse.sub_left,99);
			el.xpGalleryConfuse.sub1.move=true;
			el.xpGalleryConfuse.sub1.moving(3);
		}
		el.xpGalleryConfuse.sub_left.onmouseout = function(){
			w$.opacity(el.xpGalleryConfuse.sub_left,50);
			el.xpGalleryConfuse.sub1.move=false;
		}
		w$.opacity(el.xpGalleryConfuse.sub_left,50);
		
		el.xpGalleryConfuse.sub_right= w$.createElement(el.xpGalleryConfuse.name+'_sub_right','div',el.xpGalleryConfuse.sub);
	
		el.xpGalleryConfuse.sub_right.style.background = 'transparent';	
		el.xpGalleryConfuse.sub_right.style.position = 'absolute';
		el.xpGalleryConfuse.sub_right.style.right = '0';
		el.xpGalleryConfuse.sub_right.style.top = sub_height/2-10+ 'px';	
		el.xpGalleryConfuse.sub_right.style.cursor='pointer'	
		el.xpGalleryConfuse.sub_right.innerHTML = !button ? '<b>&raquo;</b>' :( button.sright?'<img alt="" src="'+button.sright+'" />': (button.right? '<img alt="" src="'+button.right+'" />' :'<b>&raquo;</b>')) ;
		el.xpGalleryConfuse.sub_right.style.fontSize= '1.8em';
		el.xpGalleryConfuse.sub_right.style.color= '#fff';
		w$.opacity(el.xpGalleryConfuse.sub_right,50);	
		el.xpGalleryConfuse.sub_right.onmouseover = function(){
			w$.opacity(el.xpGalleryConfuse.sub_right,99);
			el.xpGalleryConfuse.sub1.move=true;
			el.xpGalleryConfuse.sub1.moving(-3);
		}
		el.xpGalleryConfuse.sub_right.onmouseout = function(){
			w$.opacity(el.xpGalleryConfuse.sub_right,50);
			el.xpGalleryConfuse.sub1.move=false;
		}
		w$.opacity(el.xpGalleryConfuse.sub_right,50);
		
		el.xpGalleryConfuse.sub1.moving=function(dx){
	
			var pr = w$.pr(this);
			var s = w$.s(this);
			var pos = pr.x+dx*2;
	
			if(this.move && pos < 0 &&  pos+s.w > el.xpGalleryConfuse.s.w ){
				this.style.left=pos+'px';
				setTimeout('$("'+this.id+'").moving('+dx+')',5);
			}else{
				this.move = false;
			}
			
		}		
        el.xpGalleryConfuse.show();		
	}	
	el.xpGalleryConfuse.show=function(x){
		x=x?x:0
		el.xpGalleryConfuse.index =w$.range(el.xpGalleryConfuse.index+x,0,el.xpGalleryConfuse.count-1);
		el.xpGalleryConfuse.loadImage(el.xpGalleryConfuse.index);
	}

	
	
	//popup window
	el.xpGalleryConfuse.popup=function(x){
		x = x ? x :0

		var index = el.xpGalleryConfuse.index = w$.range(el.xpGalleryConfuse.index+x,0,el.xpGalleryConfuse.count-1);

		if(el.xpGalleryConfuse.poped){
			var pop = el.xpGalleryConfuse.poped
		}else {
			var pop = el.xpGalleryConfuse.poped = xpLB(null,null,null,null,null,null,button.wait? button.wait :null)
			pop.setContent('<div style="width:200px;height:350px;">&nbsp;</div>')
		}
		var pop_id = w$.getId(pop)	

		if(pop.data.inner.childNodes[0] && pop.data.inner.childNodes[0].tagName.toLowerCase()=='div' )	{
			pop.data.inner.childNodes[0].style.visibility = 'hidden';
		}
		
		el.xpGalleryConfuse.loader.onload=function(){
			var w =el.xpGalleryConfuse.loader.width
			var h =el.xpGalleryConfuse.loader.height
			if(w>el.xpGalleryConfuse.maxX){
				h= h*el.xpGalleryConfuse.maxX/w
				w=el.xpGalleryConfuse.maxX
			}
			if(h >el.xpGalleryConfuse.maxY){
				w = w *el.xpGalleryConfuse.maxY/h
				h=el.xpGalleryConfuse.maxY;
			}
			//el.xpGalleryConfuse.index = index
			var con	= '<div style="position:relative;width:'+(w)+'px"><span style="position:absolute;right:0px;top:0px;font-size:25px;line-height:25px;font-weight:900;color:#555;cursor:pointer" onclick="$(\''+pop_id+'\').stop();$(\''+el.id+'\').xpGalleryConfuse.poped=0;" >'+(!button||!button.cross ?'&times;' :'<img src="'+button.cross+'" alt="close"/>')+'</span><div style="width:'+(w-35)+'px;"><span style="float:left"><b>'+el.xpGalleryConfuse.titles[index]+'</b></span></div><img style="margin:4px 0;width:'+w+'px;height:'+h+'px;border:0" src="'+el.xpGalleryConfuse.loader.src+'" /><div style="width:'+w+'px;text-align:center;"><span style="float:right;cursor:pointer;font-weight:900;font-size:1.2em" onclick="$(\''+el.id+'\').xpGalleryConfuse.popup(1);">'+(!button || !button.right ? '&rarr;' : '<img src="'+button.right+'" alt="next"/>')+'</span><span style="float:left;cursor:pointer;font-weight:900;font-size:1.2em" onclick="$(\''+el.id+'\').xpGalleryConfuse.popup(-1);">'+(!button || !button.left ? '&larr;' : '<img src="'+button.left+'"  alt="previous"/>')+'</span><b>'+(index+1)+' of '+el.xpGalleryConfuse.count+'</b></div></div>'
				pop.setContent(con)
		}

		el.xpGalleryConfuse.loader.src ='';	//add this for safari : cause it can not onload at same img ;
		el.xpGalleryConfuse.loader.src =imgs[index];
	}
	
	
	//control buttons
	

}



//////////////////////////////////////////////////////////////////////////////////////