var swapImage = {

    init: function() {

        // object detection
        if (!document.getElementById) { return; }

        // configure event handling
        swapImage.util.configEvents();

        // define the thumbnail area
        var thumbPics = document.getElementById('thumbPics');

        // add event listener for click on thumbnails
        this.util.addEvent(thumbPics, 'click', this.swap, false);

    },

    swap: function(evt) {
        // stop the default link action
        swapImage.util.stopDefault(evt);

        // find the anchor and swap the anchor href into the img source
        var anchor = swapImage.util.findTarget(evt, 'a', this);
        var imgSrc = anchor.href;
        if (!imgSrc) { return; }
        var swapPic = document.getElementById('swapPic');
        
        // handle the case where the console image ends in 11 instead of 12
        swapPic.onerror = function() {
            swapPic.src = imgSrc.replace(/_12/gi, '_11');
        };
        
        // swap the image
        swapPic.src = imgSrc;

    },

    util: {

        configEvents: function() {
            if (document.addEventListener) {
                this.addEvent = function(el, type, func, capture) { el.addEventListener(type, func, capture); };
                this.stopBubble = function(evt) { evt.stopPropagation(); };
                this.stopDefault = function(evt) { evt.preventDefault(); };
                this.findTarget = function(evt, targetNode, container) {
                    var currentNode = evt.target;
                    while (currentNode && currentNode !== container) {
                        if (currentNode.nodeName.toLowerCase() === targetNode) { return currentNode; break; }
                        else { currentNode = currentNode.parentNode; }
                    };
                    return false;
                };
            }
            else if (document.attachEvent) {
                this.addEvent = function(el, type, func) { el["e" + type + func] = func; el[type + func] = function() { el["e" + type + func](window.event); }; el.attachEvent("on" + type, el[type + func]); };
                this.stopBubble = function(evt) { evt.cancelBubble = true; };
                this.stopDefault = function(evt) { evt.returnValue = false; };
                this.findTarget = function(evt, targetNode, container) {
                    var currentNode = evt.srcElement;
                    while (currentNode && currentNode !== container) {
                        if (currentNode.nodeName.toLowerCase() === targetNode) { return currentNode; break; }
                        else { currentNode = currentNode.parentNode; }
                    };
                    return false;
                };
            }
        }

    }

};

swapImage.init();