var imagegallery={
    show:function(ele){
        this.ele=ele;
        if(!this._pagSize) this._pageSize=this.pageSize();
        this._createBg();
        this._createPlaceHolder();
        this._bg.style.display='';
        var _img=this._getImage(ele);
        this._loadImage(_img.name);
    },
    _loadImage:function(src){
        imgPreload = new Image();
        var me=this;    
	    imgPreload.onload=function(){
	        var ele=me.ele;
	        var _width=imgPreload.width,_height=imgPreload.height;
	        var _center=me.center_(_width,_height);
	        me._placeHolder.style.left=_center[0]+'px';
	        me._placeHolder.style.top=_center[1]+'px';
	        me._footer.style.width=_width+'px';
	        me._header.style.width=_width+'px';
            //var _img=me._getImage(ele);	        
	        me.imageHolder.innerHTML='<img src="'+src+'">';
            var _pictext=ele.getAttribute('pictext') || ele.pictext;
            if(typeof _pictext !='undefined') me.textHolder.innerHTML=_pictext;
            else me.textHolder.innerHTML='';            
            me._placeHolder.style.display='';
            var _id=ele.id.split('_');
            var _prev=_id[0]+'_'+(_id[1]-1),_next=_id[0]+'_'+(parseInt(_id[1])+1);
            if(document.getElementById(_prev)==null){me._header.className='imagegallery-prevnext-noprev';}
            else if(document.getElementById(_next)==null){ me._header.className='imagegallery-prevnext-nonext';}
            else me._header.className='imagegallery-prevnext';
            //alert(me._header.className);
            
	        
	    }
	    imgPreload.src = src;    
    },        
    _getImage:function(ele){
        var _src=ele.src;
        var _id=ele.id;
        var _index=_src.lastIndexOf('/');
        var _name=_src.substring(_index+1);
        var _path=ele.getAttribute('path') || ele.path;
        var _hasLightbox=false;
        if(typeof _path=='undefined') _hasLightbox=true;
        var _basepath=document.getElementById('imagegallery.basepath').value;
        var _ids=_id.split('_');
        if(_hasLightbox){            
            return {
                'name':_basepath+'media/imagegallery/'+_ids[0]+'/1/'+_name,
                'cat':_ids[0],
                'id':_ids[1]
            };
        }else{
            return {
                'name':_basepath+'webroot/'+_path+'/'+_name,
                'cat':_ids[0],
                'id':_ids[1]
            };
        }
    },
    _createBg:function(){
        if(!this._bgCreated){
            var _div=document.createElement('div');
            _div.className='imagegallery-bg';
            var _body=document.getElementsByTagName('BODY')[0];
            _body.appendChild(_div);
            this._bg=_div;
            this._bgCreated=true;
            _div.style.width='100%';
            _div.style.height=this._pageSize[1]+'px';
            var me=this;
            _div.onclick=function(){me.hide()}
        }
    },
    _createPlaceHolder:function(){
        if(!this._placeHolderCreated){
            var _div=document.createElement('div');
            _div.className='imagegallery-placeholder';
            var _body=document.getElementsByTagName('BODY')[0];
            _body.appendChild(_div);
            var _nav=document.createElement('div');
            _nav.className='imagegallery-prevnext';
            _div.appendChild(_nav);
            this._header=_nav;
            var _prev_=document.createElement('div');_nav.appendChild(_prev_);
            var _next_=document.createElement('div');_nav.appendChild(_next_);
            /*
            var _table=document.createElement('table');_nav.appendChild(_table);this._header=_table;
            var _tbody=document.createElement('tbody');_table.appendChild(_tbody);            
            var _tr=document.createElement('tr');_tbody.appendChild(_tr);
            var _prev=document.createElement('td');_tr.appendChild(_prev);
            var _next=document.createElement('td');_tr.appendChild(_next);_next.className='imagegallery-nexttd';
            var _prev_=document.createElement('div');_prev.appendChild(_prev_);this._prev=_prev_;
            var _next_=document.createElement('div');_next.appendChild(_next_);this._next=_next_;
            */
            //_prev_.appendChild(document.createTextNode('prev'));_next_.appendChild(document.createTextNode('next'));
            _prev_.className='imagegallery-prev';_next_.className='imagegallery-next';
            var _img=document.createElement('div');
            this.imageHolder=_img;
            _div.appendChild(_img);
            var _footer=document.createElement('div');
            _div.appendChild(_footer);
            var _ftable=document.createElement('table');_footer.appendChild(_ftable);this._footer=_ftable;
            var _ftbody=document.createElement('tbody');_ftable.appendChild(_ftbody);
            var _ftr=document.createElement('tr');_ftbody.appendChild(_ftr);
            var _text=document.createElement('td');_ftr.appendChild(_text);
            var _close=document.createElement('td');_ftr.appendChild(_close);
            _close.style.width='50px';
            var _close_x=document.createElement('div');
            _close_x.innerHTML='<a href="#">Close X</a>';
            //_close_x.appendChild(document.createTextNode('close'));
            _close_x.className='imagegallery-close';
            _close.appendChild(_close_x);
            this.textHolder=_text;                        
            this._placeHolder=_div;
            this._placeHolderCreated=true;
            var me=this;
		    _close_x.onclick=function(e){me.hide();}
	        _prev_.onclick=function(e){me.prev(e)}
	        _next_.onclick=function(e){me.next(e);}      
            /*            
            Event.observe(_close_x,'click',function(e){me.hide();Event.stop(e);});  
            Event.observe(_prev_,'click',function(e){me.prev(e);Event.stop(e);});
            Event.observe(_next_,'click',function(e){me.next(e);Event.stop(e);});       
            */
        }
    },
    prev:function(e){
        var id=this.ele.id.split('_');
        var _prevId=id[0]+'_'+(id[1]-1);
        var _prev=document.getElementById(_prevId);
        if(_prev){
            
            this.show(_prev);
        }
    },
    next:function(e){
        var id=this.ele.id.split('_');
        var _nextId=id[0]+'_'+(parseInt(id[1])+1);        
        var _next=document.getElementById(_nextId);
        if(_next){
            this.show(_next);
        }
    },
    hide:function(){
        if(this._bg) this._bg.style.display='none';
        if(this._placeHolder) this._placeHolder.style.display='none';
    },
    fullHeight:function(){
        if (window.innerHeight!=window.undefined) return window.innerHeight;
        if (document.documentElement && document.documentElement.clientHeight) return document.documentElement.clientHeight;
        if (document.body) return document.body.clientHeight; 
        return window.undefined; 
    },
    fullWidth:function() {
        if (window.innerWidth!=window.undefined) return window.innerWidth; 
        if (document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth; 
        if (document.body) return document.body.clientWidth; 
        return window.undefined; 
    },
    center_:function(width,height){
        var theBody=document.getElementsByTagName('BODY')[0]; 
        var scTop = this.scrollTop();
        var scLeft = this.scrollLeft();
        var fullHeight = this.fullHeight();
        var fullWidth = this.fullWidth();
        var _top=scTop + ((fullHeight - (height+20)) / 2);
        return [
            scLeft + ((fullWidth - width) / 2),
            _top<0?scTop:_top
        ];
    },
    scrollTop:function(){
        if(document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop;
        else return document.body.scrollTop;
    },
    scrollLeft:function(){
        if(document.documentElement && document.documentElement.scrollLeft) return document.documentElement.scrollLeft;
        else return document.body.scrollLeft;
    },
    pageSize:function(){
    	
	    var xScroll, yScroll;
    	
	    if (window.innerHeight && window.scrollMaxY) {	
		    xScroll = document.body.scrollWidth;
		    yScroll = window.innerHeight + window.scrollMaxY;
	    } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		    xScroll = document.body.scrollWidth;
		    yScroll = document.body.scrollHeight;
	    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		    xScroll = document.body.offsetWidth;
		    yScroll = document.body.offsetHeight;
	    }
    	
	    var windowWidth, windowHeight;
	    if (self.innerHeight) {	// all except Explorer
		    windowWidth = self.innerWidth;
		    windowHeight = self.innerHeight;
	    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		    windowWidth = document.documentElement.clientWidth;
		    windowHeight = document.documentElement.clientHeight;
	    } else if (document.body) { // other Explorers
		    windowWidth = document.body.clientWidth;
		    windowHeight = document.body.clientHeight;
	    }	
    	
	    // for small pages with total height less then height of the viewport
	    if(yScroll < windowHeight){
		    pageHeight = windowHeight;
	    } else { 
		    pageHeight = yScroll;
	    }

	    // for small pages with total width less then width of the viewport
	    if(xScroll < windowWidth){	
		    pageWidth = windowWidth;
	    } else {
		    pageWidth = xScroll;
	    }


	    arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	    return arrayPageSize;
    }

             
};