var carousel = new Carousel();
var sldhd;
var sldp;
var sldim;
var pophd;
var pophdsd;
var tltp;
var isLoaded = false;
var sld;
var vid;
var iframe;
var global_videoID = "";
var enable = false;

function setVideoId(vidId){
    global_videoID = vidId;
}

	 window.addEvent('domready', function(){	
	    sld = $("sld");
	    vid = $("vid");
	    carousel.init(args, 60,290,50,4,"slideshow","infomodactive",null, 700);
	    isLoaded = true;
	    enable = true;
		});	

carousel.render = function(index, hide) {
    var self = this;
    var ss_item = document.createElement("span");
    ss_item.className = "item";
    ss_item.id = "slide" + index;

    var ss_img = document.createElement("img");
    ss_img.src = this.loadedImages[index].src;
    ss_img.alt="";

    ss_img.id = "imgid" + index;
    ss_img.style.width = "50px";
    ss_img.style.height = "50px";
    ss_item.title = this.args[index][1];
    ss_item.link = this.args[index][2];
    ss_item.desc = this.args[index][3];

    ss_item.onclick = function() {
        mkclick(args[index][2]);
    };
    ss_item.onmouseover = function() {
        mkrollover(args[index][1], args[index][2], "imgid" + index);
    };
    ss_item.onmouseout = function(){ mkrollout(); };

    ss_item.appendChild(ss_img);
    return ss_item;
};

var args = new Array();
args[0] = ["","","",""];

/* Note : DOM element lookups are not stored in variables because the tabs will probably not be used heavily */
function showInfoModLayer(passedLayer) {
    var self = this;

    /* remove layer that is currently hidden (we are only removing the video node from the dom, as opposed to hiding it */
    if (passedLayer == 'vid' && currLayer == 'sld'){
        /*hide the slideshow layer */
        toggleInfoModLayer(sld);
        toggleInfoModLayer(vid);
        soim.addVariable("titleId", global_videoID);
        soim.write("vid");
        if ($("sldtab") && $("vidtab")) {
            $("sldtab").className = "sldwn";
            $("vidtab").className = "vidup";
            $("sldar").className = "sldwnar";
            $("vidar").className = "vidupar";
            currLayer = "vid";
        }
    } else if (passedLayer == 'sld' && currLayer == 'vid'){
        /*remove the video from the dom */
        toggleInfoModLayer(vid);
        toggleInfoModLayer(sld);
        vid.innerHTML = "";
        if ($("sldtab") && $("vidtab")) {
            $("sldtab").className = "sldup";
            $("vidtab").className = "vidwn";
            $("sldar").className = "sldupar";
            $("vidar").className = "vidwnar";
            currLayer = "sld";
        }
    }
}

function toggleInfoModLayer(element){
    if(element != null){
        if(element.style.display == "none"){
            element.style.display = "block";
        }
        else{
            element.style.display = "none";
        }
    }
}

function initTooltip(){
    if(isLoaded){
        sldhd = $("sldhd");
        sldp =  $("sldp");
        sldim = $("sldim");
        pophd = $("pophd");
        pophdsd = $("pophdsd");
        tltp = $("tltp");
    }
}

function populateTop(_img, _title, _link, _desc) {
    sldhd.innerHTML = "<a href='" + _link + "'>" + _title + "</a>";
    sldp.innerHTML = _desc;
    sldim.src = _img;
}

function populateTooltip(_title, _pos, _contpos) {
    if(tltp == null){
        initTooltip();
    }
    pophd.innerHTML = _title;
    pophdsd.innerHTML = _title;
    tltp.style.visibility = 'visible';
    tltp.style.position = 'relative';
/* This subtracts the position of the image you are on from the position of the info container div and positions the left attribute relatively within that container */
    tltp.style.left =  _pos[0] - _contpos[0] + "px"; 
    tltp.style.top =  -120 + "px";
}

var mkclick = function(_link) {
    var f = function() { window.location.href = _link; };
    return f();
};

var mkrollover = function(_title, _text, _img) {
    if(enable){
        var self = this;
        this.title = _title;
        this.text = _text;
        this.img = _img;
        this.f = function() { populateTooltip(self.title, findPos($(self.img)),findPos($("info"))); };
        var container;
        return this.f();
    } else {
       return false;
    }
};

var mkrollout = function () {
    if(enable){
        tltp.style.visibility = 'hidden';
    }
};