if(typeof(PX) == "undefined") { PX={}; }
PX.gallery = {

    // the current page
    p: 0,

    // number of pages
    np: 0,

    // the current image
    i: 0,

    // number of images
    ni: 0,

    // number of images per page
    ipp: 0,

    // width of slider area
    w: 730,

    // width of a single thumbnail
    t: 175,
    
	// space between thumbnails
	xp: 10,
	
    // image data
    imagedata: new Array(),

    // prepare for use
    init: function() {
        this.ni = $("#gallery-thumbs ul li").size();

        this.np = Math.ceil( ((this.t * this.ni)  / this.w) )-1;
        
        this.ipp = Math.floor( this.w / this.t );

        // stretch holding ul
        $("#gallery-thumbs ul").width( ((this.t+this.xp) * $("#gallery-thumbs ul li").size()) + "px");

        // loop all thumbnails
        c = 0;
        $("#gallery-thumbs ul li").each(function(){
            // store all image data
            a = $(this).find("a");
            $(this).data("counter",c).attr("id","thumb"+c);
            PX.gallery.imagedata.push( {image: a.attr("href") , caption: a.attr("title"), page: PX.gallery.getPage(c) }  )

            // remove the anchor tags
            $(this).html(a.html());

            c ++;
        })

        // navigation buttons
        this.setPageNav();
        this.setImgNav();

        // load the first image
        $("#gallery-image-main").attr("src",this.imagedata[0].image);
		$("#gallery-image-main").attr("alt",this.imagedata[0].caption);
        $("#gallery-caption").text(this.imagedata[0].caption);
        $("#gallery-thumbs ul li#thumb0").addClass("current");
    },

    getPage: function(imageNum) {
        return Math.ceil( (imageNum+1) / this.ipp) - 1;
    },

    // advance image back and forth
    imgNav: function(dir) {

        // requested image
        r = this.i + dir;

        // prevent out of range
        if(r < 0 || r > this.ni) {
            return;
        }

        // load the image
        this.imgLoad(r)

    },

    // load an image into the main area
    imgLoad: function(ref) {
        // swap image
        $("#gallery-image-main").fadeOut(200,function(){
            $("#gallery-image-main").attr( {src:PX.gallery.imagedata[ref].image} ).load(function(){$(this).fadeIn();});
			$("#gallery-image-main").attr("alt",PX.gallery.imagedata[ref].caption);
        })

        // swap caption
        $("#gallery-caption").fadeOut(200,function(){
            $("#gallery-caption").text( PX.gallery.imagedata[ref].caption ).fadeIn();
        })

        // log image
        this.i = ref;

        // ensure we're on the correct page
        myPage = this.imagedata[ref].page;
        if(myPage != this.p) {
            this.jumpto(myPage);
        }

        // highlight thumbnail
        $("#gallery-thumbs ul li").removeClass("current");
        $("#gallery-thumbs ul li#thumb"+ref).addClass("current");

        this.setImgNav();
    },

    // animate one page up or down
    animate:function(dir){

        // requested page
        r = this.p + dir;

        // prevent out of range
        if(r < 0 || r > this.np) {
            return;
        }

        // confirm next page
        this.p = r;

        // animate element to new position
        $("#gallery-thumbs ul").animate( {left:(this.p * this.w) * -1+"px"}, 1000, 'swing' );

        this.setPageNav();
    },

    // go directly to a given page
    jumpto:function(page) {

        // reset current page
        this.p = page;

        // jump element into view
        $("#gallery-thumbs ul").animate( {left:(this.p * this.w) * -1+"px"}, 1000, 'swing' );

        this.setPageNav();
    },

    // set appropriate state for page navigation buttons
    setPageNav: function() {

        // next page button
        if(this.np == 0 || this.p == this.np) {
            $("#gallery-np").removeClass("gallery-activepnav");
        } else {
            $("#gallery-np").addClass("gallery-activepnav");
        }

        // previous page button
        if(this.np == 0 || this.p == 0) {
            $("#gallery-pp").removeClass("gallery-activepnav");
        } else {
            $("#gallery-pp").addClass("gallery-activepnav");
        }
    },

    // set appropriate state for image navigation buttons
    setImgNav: function() {

        // next image button
        if(this.ni < 2 || this.i == this.ni) {
            $("#gallery-ni").removeClass("gallery-activeinav");
        } else {
            $("#gallery-ni").addClass("gallery-activeinav");
        }

        // previous image button
        if(this.ni < 2 || this.i == 0) {
            $("#gallery-pi").removeClass("gallery-activeinav");
        } else {
            $("#gallery-pi").addClass("gallery-activeinav");
        }
    }

};

$(function(){
    PX.gallery.init();

    // event handlers

        // page navigation
        $("#gallery-np.gallery-activepnav").live("click",function(){    PX.gallery.animate(1) })
        $("#gallery-pp.gallery-activepnav").live("click",function(){    PX.gallery.animate(-1) })

        // thubnail clicks
        $("#gallery-thumbs ul li").click(function(){ PX.gallery.imgLoad($(this).data("counter")) }).hover(
            function(){$(this).addClass("over")},
            function(){$(this).removeClass("over")}
        )

        // image navigation
        $("#gallery-ni.gallery-activeinav").live("click",function(){    PX.gallery.imgNav(1) })
        $("#gallery-pi.gallery-activeinav").live("click",function(){    PX.gallery.imgNav(-1) })

});