/***
*
*  GalleryHandler:  
*  
*
***/
var Pager = new Class({
        //
		//  initialize
		//
		Implements: [Options,EventManager],
        options: {
             type: "fade", // fade vertical horizontal
             init_index:0,
			 duration:750,
             smoothing:1,   // fade only
			 spacer:10,
			 wrap:false,
			 current:null,
			 normal:null,
			 over:null,
			 inner_id:"inner_box",
			 prev_id:"prev_page",
			 next_id:"next_page",
			 pager_class:"pager_controls",
			 current_class:"controls_current",
			 controls_id_prefix:"page_button",
			 normal_class:"controls_normal",
			 controls_tag: "span"
        },
        initialize: function(pages,options){
                this.setOptions(options)
                this.pages = $$(pages)
				this.numPages = this.pages.length
				this.container = this.pages[0].getParent()
				this.container.setStyle("overflow","hidden")
				this.innerbox = new Element("div",{id:this.options.inner_id})
				this.innerbox.set("tween",{duration:this.options.duration})
				this.innerbox.setStyle("position","relative")
				this.container.grab(this.innerbox)
				this.pages.each(function(pg,idx){
						this.innerbox.grab(pg)
						this.setpage(pg,idx)
				}.bind(this))
				try {  
						var uri = new URI();
						if (uri.getData("page")) this.goTo(uri.getData("page")-1)
						else this.goTo(this.options.init_index)
				} catch (err) {
						this.goTo(this.options.init_index)
				}
		},
		addHeaders: function(headers){
				this.headers = $$(headers)
				this.headers.each(function(hdr){hdr.setStyle("visibility","hidden")})
				this.setHeader(this.index)
		},
		setpage: function(pg,idx){
				switch (this.options.type){
						case "fade":
								pg.setStyles({
										position:"absolute",
										top:0,
										left:0
								})
								pg.set("tween",{duration:this.options.duration})
								pg.fade("hide")
						break;
						case "horizontal":
                                pg.left = (this.container.getStyle("width").toInt() + this.options.spacer) * idx
								pg.setStyles({
										position:"absolute",
										top:0,
										left:pg.left
								})
						break;
						default:
								pg.top = (this.container.getStyle("height").toInt() + this.options.spacer) * idx
								pg.setStyles({
										position:"absolute",
										top:pg.top,
										left:0
								})
						break;
				}
        },
		goTo: function(i){
				i = i.limit(0,this.pages.length - 1)
				if (this.index != i) {
						if (this.headers) this.setHeader(i)
						switch(this.options.type){
								case "fade":
										var fadein = function (){this.pages[i].tween("opacity",1)}.bind(this)
										if (this.pages[this.index]) {
												this.pages[this.index].tween("opacity",0)
												fadein.delay(this.options.smoothing * this.options.duration)
										} else {		
												fadein()
										}
								break;
								case "horizontal":
										this.innerbox.tween("left",-this.pages[i].left)
								break;
								default:
										this.innerbox.tween("top",-this.pages[i].top)
								break;
						}
						if (this.pagerButtons) {
								if (!!(this.index || this.index == 0)){
										this.pagerButtons[this.index].empty()
										if (this.pager_normal) this.pagerButtons[this.index].grab(this.pager_normal.clone())
										else this.pagerButtons[this.index].set("html",this.index.toString())
								}
								this.index = i
								this.pagerButtons[this.index].empty()
								if (this.pager_current) this.pagerButtons[this.index].grab(this.pager_current.clone())
								else this.pagerButtons[this.index].set("html",this.index.toString())
						} else {
								this.index = i
						}
						fireEvent("NEW_PAGE")
				}
		},
		next: function(){
				if (this.index + 1 >= this.pages.length) {
						if (this.options.wrap) this.goTo(0)
				} else {
						this.goTo(this.index + 1)
				}
		},
		prev: function(){
				if (this.index - 1 < 0) {
						if (this.options.wrap) this.goTo(this.pages.length-1)
				} else {
					this.goTo(this.index - 1)
				}	
		},
        addPrevNext: function(prev_path,next_path,container){
                next = new Element('img',{src:next_path,"id":this.options.next_id})
                prev = new Element('img',{src:prev_path,"id":this.options.prev_id})
				next.setStyle("cursor","pointer")
				prev.setStyle("cursor","pointer")
                this.pushEvents(next,'click',function(){
                        this.next()
                }.bind(this))
                this.pushEvents(prev,'click',function(){
                        this.prev()
                }.bind(this))
                if ($chk(this.options.controls_class)){
                        next.set("class",this.options.controls_class)
                        prev.set("class",this.options.controls_class)
                }
                document.id(container).grab(prev)
                document.id(container).grab(next)
        },
        addPager: function(normal,current,container){
				if (normal) this.pager_normal = new Element('img',{src:normal,'class':this.options.pager_class})
				if (current) this.pager_current = new Element('img',{src:current,'class':this.options.pager_class})
				this.pagerButtons = []
				this.pages.each(function(pg,i){
						var elm = new Element("span",{"id":this.options.controls_id_prefix+i})
						if (normal) {
								if (i != this.index) elm.grab(this.pager_normal.clone())
								else elm.grab(this.pager_current.clone())
						} else {
								elm.set("html",i.toString())
						}
						this.pushEvents(elm,"click",function(){this.goTo(i)}.bind(this))
						document.id(container).grab(elm)
						this.pagerButtons.push(elm)
				}.bind(this))
        },
		setHeader: function(i){
				if (this.currentHeader) this.currentHeader.setStyle("visibility","hidden")
				this.currentHeader = this.headers[i]
				this.currentHeader.setStyle("visibility","visible")
		}
});