var Gallery = new Class({
    initialize: function(){
	this.header = $$(".header");
	if(this.header){
	    this.header.setStyle("visibility","hidden");
	}
	this.showbackground();
	this.createcontent();
	this.imageindex = 0;
	this.currentimage = "";
    },
    showbackground: function(){
	var toppos = window.getScroll().y + 10;
	this.bgdiv = new Element('div', {
	    'class': 'gallery',
	    'styles': {
		"width": "95%",
		"top": toppos+"px"
	    },
	    'events': {
		/*'click': function(){
		    this.exit();
		}.bind(this)*/
	    }
	});
	this.bgdiv.inject(window.document.body);
    },
    createcontent: function(){
	//1. close div
	this.closediv = new Element('div',{
	    'class': 'gallerylink'
	});
	this.closebutton = new Element('a', {
	    'html': 'Close',
	    'href':'javascript:;',
	    "events": {
		'click': function(){
		    this.exit();
		}.bind(this)
	    }
	});
	this.closebutton.inject(this.closediv);
	this.closediv.inject(this.bgdiv);
	//2. image div
	this.imagediv = new Element('div');
	this.image = new Element('img');
	this.image.inject(this.imagediv);
	this.imagediv.inject(this.bgdiv);
	//3. page div
	this.pagediv = new Element('div', {
	    "class": "gallerylink hide"
	});
	this.pagediv.inject(this.bgdiv);
	this.pageprev = new Element("a", {
	    "html": "<<",
	    "href": "javascript:;",
	    "events":{
		"click": function(){
		    this.prev();
		}.bind(this)
	    }
	});
	this.pageprev.inject(this.pagediv);
	this.pagediv.appendText("  ");
	this.pagenext = new Element("a", {
	    "html": ">>",
	    "href": "javascript:;",
	    "events":{
		"click": function(){
		    this.next();
		}.bind(this)
	    }
	});
	this.pagenext.inject(this.pagediv);
	//4. close at bottom
	this.btclosediv = new Element('div',{
	    'class': 'gallerylink'
	});
	this.btclosebutton = new Element('a', {
	    'html': 'Close',
	    'href':'javascript:;',
	    "events": {
		'click': function(){
		    this.exit();
		}.bind(this)
	    }
	});
	this.btclosebutton.inject(this.btclosediv);
	this.btclosediv.inject(this.bgdiv);
    },
    setdata: function(data){
	this.data = data;
	if(this.data.length>1){
	    this.pagediv.removeClass("hide");
	}
    },
    show: function(){
	this.imageindex = this.data.indexOf(this.currentimage);
        if(this.imageindex==-1){
          this.imageindex = 0;
        }
	this.updateimage();
	this.syncpagecontrol();
    },
    prev: function(){
	this.imageindex--;
	if(this.imageindex<0){
	    this.imageindex = 0;
	}
	this.updateimage();
	this.syncpagecontrol();
    },
    next: function(){
	this.imageindex++;
	if(this.imageindex>=this.data.length){
	    this.imageindex = this.data.length - 1;
	}
	this.updateimage();
	this.syncpagecontrol();
    },
    updateimage: function(){
	// cache loader
	cacheimage("/images/loader2.gif");
	var loader = function(){
	    this.image.src = "/images/loader2.gif";
	};
	loader.delay(0, this);
	//cache image
	var imageloader = function(){
	    // load the images
	    this.image.src = this.data[this.imageindex];
	};
	imageloader.delay(1, this);
    },
    syncpagecontrol: function(){
	// prev
	if(this.imageindex==0){
	    this.pageprev.addClass("hide");
	}else{
	    this.pageprev.removeClass("hide");
	}
	// next
	if(this.imageindex==this.data.length-1){
	    this.pagenext.addClass("hide");
	}else{
	    this.pagenext.removeClass("hide");
	}
    },
    exit: function(){
	if(this.header){
	    this.header.setStyle("visibility","");
	}
	this.bgdiv.destroy();
    }


});		

    function cacheimage(src){
	var imageToBeCached = new Image();
	imageToBeCached.src = src;
    }

function showimage(src){
    var g = new Gallery();
    g.setdata([src]);
    g.currentimage = src;
    g.show();
}

function showgallery(id, image){
    var g = new Gallery();
    g.currentimage = image;

    var request = new Request({
	url: "ajaxhandler.php?command=getgallerycontent&id="+id+"&v="+getv(),
	onSuccess: function(text){
	    var imagelist = eval(text);
	    this.setdata(imagelist);
	    this.show();
	}.bind(g)
    });
    request.get();
}
    
function getv(){
    return new Date().getTime();
}

function getselectedvalue(list){
    return list.options[list.selectedIndex].text;
}

function loadcontent(domid, url){
    $(domid).set("html", '<div class="centeralign"><img src="/images/loader2.gif" /></div>');
    $(domid).load(url);
}