Yak.Gallery = function(container_id, tag_name) {
    this.container_id = container_id;
    this.tag_name = tag_name;
    this.init();
}

Yak.Gallery.prototype = {

    init: function()
    {

        this._images = [];
        this.container = document.getElementById(this.container_id);
        this.li_elems = this.container.getElementsByTagName(this.tag_name);

        var i,image;

        for (i = 0; i < this.li_elems.length; i++) {
            image = {};
            image.img = this.li_elems[i].getElementsByTagName("IMG")[0].src.replace("thumb","main");
            image.h3 = "";
            image.p = "";
            if (this.li_elems[i].getElementsByTagName("H3")[0]){
                image.h3 = this.li_elems[i].getElementsByTagName("H3")[0].innerHTML;
            }
            if (this.li_elems[i].getElementsByTagName("P")[0]){
                image.p = this.li_elems[i].getElementsByTagName("P")[0].innerHTML;
            }
            this._images.push(image);
        }

        Yak.addEvent(this.container, "click", function(e){ this.click(e); return false;}.bind(this));
    },

    click: function(e)
    {

        // get event and target
        var e = e || window.event;
        var t = e.target || e.srcElement;


        if (e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }

        while (t.tagName != this.tag_name) {
            if (t.tagName == "BODY") {
                return false;
            }
            t = t.parentNode;
        }
        t.getElementsByTagName("IMG")[0];

        var id = t.id.match(/[0-9]+/);
        this._image_id = id;

        this.popup(id);

        return false;

    },


    popup: function(id)
    {
        this._img_event = 0;

        var image = document.createElement("IMG");
        image.src = this._images[id].img;

        // wait till image loads

        // TODO: removed the onload event as it was not firing consistently

        //Yak.addEvent(image, "load", function() {
            // popup code
            var popup_code = "<div id='popup' class='popup'><a id='close' href='#' onclick='Yak.popupHide();return false;' title='Close this image'><em>Close this image</em></a>";

            // only show controls if more than one image
            if (this._images.length > 1){
                popup_code += "<a id='prev' href='#' onclick='return false;' title='View the previous image'><em>View the previous image</em></a>";
            }

            popup_code += "<img style='visibility: visible' src='" + this._images[id].img + "' alt='' />";

            // only show controls if more than one image
            if (this._images.length > 1){
                popup_code += "<a id='next' href='#' onclick='return false;' title='View the next image'><em>View the next image</em></a>";
            }

            popup_code += "<div id='image_details'><h3>" + this._images[id].h3 + "</h3><p>" + this._images[id].p + "</p></div><!-- /#image_details --></div><!-- /#popup -->\n";

            Yak.popupCreate(popup_code,'000000',80);

            if (this._images.length > 1){
                Yak.addEvent(document.getElementById('next'), "click", function(e) { this.next(); }.bind(this));
                Yak.addEvent(document.getElementById('prev'), "click", function(e) { this.prev(); }.bind(this));
            }

        //}.bind(this));

    },

    loadImage: function(id, wrap_id)
    {
        if (this._images[id]) {
            // set image src
            var popup = document.getElementById(wrap_id);

            var popup_img = popup.getElementsByTagName("IMG")[0];
            var popup_h3 = popup.getElementsByTagName("H3")[0];
            var popup_p = popup.getElementsByTagName("P")[0];
            popup_img.src = this._images[id].img;

            // set image title
            popup_h3.innerHTML = this._images[id].h3;

            // set image blurb
            popup_p.innerHTML = this._images[id].p;

            if (!Yak.popupVisible()) {
                this.popup();
            }
        }
    },

    next: function(elem)
    {
        this._image_id++;
        if (this._image_id >= this._images.length) {
            this._image_id = 0;
        }
        this.loadImage(this._image_id, "yk_box");
    },

    prev: function (elem)
    {
        this._image_id--;
        if (this._image_id < 0) {
            this._image_id = this._images.length-1;
        }
        this.loadImage(this._image_id, "yk_box");
    }
}