var Gallery = function(){
	var dialog,pics,galleryId,dir,curr,pages,pageLinks,loading,ret,conn;
    return {
        init : function(){
			loading=Ext.get("loading").hide();
			dir="r";
			pics = Ext.get('event-pics');//.hide();
			//pics.slideIn(dir, {duration:2});
			//pics.fadeIn({duration:2});
			galleryId = Ext.get('galleryId').dom.value;
			ret=document.getElementById("retUrl").value;
			curr=0;
			pages = parseInt(document.getElementById("pageCount").value);
			if(pages > 1) {
				pageLinks = Ext.select("span.gPage");
				pageLinks.on("click", this.changePage, this);
				pageLinks.each(function(el, scope, index) {el.addClassOnOver("gPageHov", true);});
				pageLinks.item(0).removeClass("gPage").addClass("gPageCurrent");

				Ext.get("gPrev").addClass("gPage").addClassOnOver("gPageHov",true).on("click",this.prevPage,this);
				Ext.get("gNext").addClass("gPage").addClassOnOver("gPageHov",true).on("click",this.nextPage,this);
			}
			Ext.select("img.g-tn",true,pics).on('click', this.showDialog, this);
			conn = new Ext.data.Connection();
        },
        updateGallery : function() {
			loading.show();
			if(conn.isLoading())conn.abort();
			conn.request({
				url: "/ajax/gallery/view.aspx?gid=" + galleryId + "&rand=" + Math.random() + "&p=" + curr + "&ret=" + ret, 
				method: "get", scope: this,
				callback: function(options, bSuccess, response) {
					try {
						pics.update(response.responseText);
						Ext.select("img.g-tn",true,pics).on('click', this.showDialog, this);
						pics.slideIn(dir, {duration:0.25,easing:'easeOut'});
						//pics.fadeIn({});
						//pics.fadeIn({duration:2});
						loading.hide();
					}
					catch(e) {alert("Invalid Server Response: " + e);}
				}
			});
        },
        changePage : function(e) {
			var old=curr;
			curr = parseInt(e.target.innerHTML)-1;
			if(old>curr)dir="l";
			else if(old<curr)dir="r";
			else return;
			
			this.updateGallery();
			pageLinks.each(function(el, scope, index) {
				el.addClass("gPage").removeClass("gPageCurrent");
            });
            Ext.get(e.target).removeClass("gPage").addClass("gPageCurrent");
        },
        prevPage : function(e) {
			dir="l";
			if(curr > 0)
			{
				--curr;
				this.updateGallery();
				this.updatePage();
			}
        },
        nextPage : function(e) {
			dir="r";
			if(curr < pages - 1)
			{
				++curr;
				this.updateGallery();
				this.updatePage();
			}
        },
        updatePage : function() {
			pageLinks.each(function(el,scope,index){
				if(parseInt(el.dom.innerHTML)==curr+1)el.removeClass("gPage").addClass("gPageCurrent");
				else el.removeClass("gPageCurrent").addClass("gPage");
			});
        }
        ,showDialog : function(e) {
			if(!dialog){
                dialog = new Ext.BasicDialog(Ext.DomHelper.append(document.body, {tag: "div"}), {
                        autoTabs:false,
                        modal:true,
                        shadow:false,
                        proxyDrag: false,
                        draggable: false,
                        resizable: false,
                        collapsible:false,
                        buttonAlign:'center',
                        autoScroll:false
                });
                dialog.addKeyListener(27, dialog.hide, dialog);
                dialog.addButton('Close', dialog.hide, dialog);
            }
            var args = e.target.id.split('-');
            var w=parseInt(args[2]);
            var h=parseInt(args[3]);
            var factor = 1.0;
			if(w > 600 || h > 600) {
				if(w > h) factor = 600/w;
				else factor = 600/h;
				w=Math.round(w*factor);
				h=Math.round(h*factor);
			}
            dialog.setContentSize(w,h);
            dialog.setTitle("Click to view full size (" + args[2] + "x" + args[3] + "), Hit ESC to close dialog");
            //dialog.setContentSize(parseInt(args[2]),parseInt(args[3]));
            dialog.center();
            dialog.show(e.target);
            dialog.body.update("<a title='Click to view full size (" + + args[2] + "x" + args[3] + ")' target='_blank' href='/image/pic.aspx?r=g&id=" + args[1] + "'><img border='0' width='" + w + "' height='" + h + "' src='/image/pic.aspx?id=" + args[1] + "&r=g&resize=600'></a>");
            //dialog.body.update("<img src='/image/pic.aspx?id=" + args[1] + "&r=e'>");
        }
    };
}();
Ext.onReady(Gallery.init,Gallery,true);