window.onload = function() {
    initShots();
}

function initShots() {
    actionShot = new ActionShot();
}


function ActionShot() {
    this._bigContainer = document.getElementById("action_shot_detail");
    this._bigContainerLink = document.getElementById("action_shot_detail").getElementsByTagName("a")[0];
    this._bigContainerImage = document.getElementById("action_shot_detail").getElementsByTagName("img")[0];
    this._shots = document.getElementById("action_shots").getElementsByTagName("a");
    this._activeImage = null;
    
    if (this._shots.length > 0) this.init();
}


ActionShot.prototype = {
    init: function() {
        var self = this;
                
        for (var i=0; i<this._shots.length; i++) {
            this._shots[i].onmouseover = function() {
                if (this.getElementsByTagName("img")[0] == self._activeImage) return;
                self.setContent(this);
            }
             this._shots[i].onmouseout = function() {
                self.highLight();
            }
        }
        self.setContent(this._shots[0]);
    },
    
    setContent: function(self) {
        this._activeImage = self.getElementsByTagName("img")[0];   
        dimensions = this._activeImage.getAttribute("ref").split("x");
        width = dimensions[0];
        height = dimensions[1];
        
        this._bigContainerImage.width = width;
        this._bigContainerImage.height = height;
        
        rel = self.getAttribute("rel").split("|");
        
        if (rel[0] == "video") {
            this._bigContainer.innerHTML ='<embed height="123" width="150" flashvars="videoPath='+rel[1]+'" salign="t" allowscriptaccess="sameDomain" scale="noscale" wmode="transparent" quality="high" bgcolor="#000000" name="startpageflash" id="startpageflash" src="/flash/actionshotplayer.swf" type="application/x-shockwave-flash"/>';
        } else {
            this._bigContainer.innerHTML = "<img style='border: solid 1px #dfdfdf' src='"+this._activeImage.src+"' width='"+width+"' height='"+height+"'>";
            this._bigContainerImage.src = this._activeImage.src;
            this._bigContainerLink.href = self.href;
        }
        this.highLight();        
    },
    
    highLight: function(imageSrc) {
        var self = this;
        for (var i=0; i<this._shots.length; i++) {
            image = this._shots[i].getElementsByTagName("img")[0];
            image.style.borderColor = (image.src != self._activeImage.src) ? "#dfdfdf" : "#ff5815";
        }
    }
}