/**
 * Image Box
 */
var ImageBox = {

    init: function()
    {
        // add in event handlers
        $$("#image_box a").each(function(link){
            if (link.readAttribute("app_ref")) {
                Event.observe(link, "mouseover", ImageBox.change_img);
                Event.observe(link, "mouseout", ImageBox.release_img);
            }
        })
    },
        
    /**
     * changes the large image on the page to the specified image
     */
    change_img: function(event)
    {
        var link = Event.findElement(event, "a");
        var app_ref = link.readAttribute("app_ref");
        
        // hide all of the thumbnails
        $$("#image_box .thumbs a img").each(function(img){
            img.setStyle({"display":"none"});
        })
        
        // show the thumnail
        $(app_ref + "_thumb").setStyle({"display":"block"});
        
        // show the large image
        var img = new Element("img", {'src': "http://www.airdye.com/images/image_boxes/" + app_ref + ".jpg"});
        $("large_image").update(img);
        
        // change the style of the links
        $$("div#image_box div.details a").each(function(link) {
           link.removeClassName("active"); 
        });
        
        $(app_ref + "_link").className = "active";
    },
        
    /**
     * when mousing out we change the thumbnail back to blue
     */
    release_img: function(event)
    {
        var link = Event.findElement(event, "a");
        var app_ref = link.readAttribute("app_ref");
        
        // hide the thumbnail
        $(app_ref + "_thumb").setStyle({"display":"none"});
    }

}

Event.observe(window, "load", ImageBox.init);