var vIDs=new Array()
vIDs[1] = "150755";
vIDs[2] = "150763";
vIDs[3] = "150771";
vIDs[4] = "150779";
vIDs[5] = "150787";
vIDs[6] = "150795";
vIDs[7] = "150803";
vIDs[8] = "150811";
vIDs[9] = "150819";
vIDs[10] = "150827";
vIDs[11] = "150835";
vIDs[12] = "150843";
vIDs[13] = "150851";
vIDs[14] = "150859";
vIDs[15] = "150867";
vIDs[16] = "150875";
vIDs[17] = "150883";
vIDs[18] = "150891";
vIDs[19] = "150899";
vIDs[20] = "150907";
vIDs[21] = "150915";
vIDs[22] = "150923";
vIDs[23] = "150931";
vIDs[24] = "150939";
vIDs[25] = "150947";
vIDs[26] = "150955";
vIDs[27] = "150963";
vIDs[28] = "150971";
vIDs[29] = "150979";
vIDs[30] = "150987";
vIDs[31] = "150995";
vIDs[32] = "151003";
vIDs[33] = "151011";
vIDs[34] = "151019";
vIDs[35] = "151027";
vIDs[36] = "151035";
vIDs[37] = "151043";
vIDs[38] = "151051";
vIDs[39] = "151059";
vIDs[40] = "151067";
vIDs[41] = "151075";
vIDs[42] = "151083";
vIDs[43] = "151091";
vIDs[44] = "151099";
vIDs[45] = "151107";
vIDs[46] = "151115";
vIDs[47] = "151123";
vIDs[48] = "151131";
vIDs[49] = "151139";
vIDs[50] = "151147";
vIDs[51] = "150745";

var DEBUG = false;
var dragObject  = null;
var dragImage = null;
var dropTarget = null;
var mashup = {width:137, height:87};
var open_slot = 0;
var thumbX = 72;
var thumbY = 61;
var dropExclude = 50;   // Eyeball estimate of vspace of "vote now"
var clickPos = null;
var xAdjust = function() { return 0; };
var yAdjust = function() { return 0; };
var instruction = 1;
var votingDone = false;

if (BrowserDetect.browser == 'Explorer') {
    document.onmousemove = ie_mouseMove;
}
else {
    document.onmousemove = std_mouseMove;
}
document.onmouseup = mouseUp;

/*
 * Handy debugging function to show in browser what the heck is going on at event
 */
function show(mess) {
    if (DEBUG) {
        var message = document.getElementById('message');
        message.innerHTML = mess;
    }
}

/*
 * Function that should exist in DOM
 */
function getElementsByTagAndClass(tagName, className) {
    // Can specify tagName='*' for all tags of class
    var nodes = document.getElementsByTagName(tagName);
    var elements = new Array();
    for (var e=0; e < nodes.length; e++) {
        if (nodes[e].className == className) {
            elements[elements.length] = nodes[e];
        }
    }
    return elements;
}

/*
 * So where is the mouse at?
 */
function mouseCoords(ev){
    if (ev.pageX || ev.pageY) {
        return {x:ev.pageX, y:ev.pageY};
    }
    return {
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY + document.body.scrollTop  - document.body.clientTop
    };
}

/*
 * Fiddle with page appearance (other than drag-and-drop)
 */
function toggleClips(N) {
    if (N == 1) {
        document.getElementById('set2').className='noclass';
        document.getElementById('set2a').className='noclass';
        document.getElementById('set1').className='current';
        document.getElementById('set1a').className='current';
        document.getElementById('thumbTable1').style.display = 'block';
        document.getElementById('thumbTable2').style.display = 'none';
    }
    else if (N ==2) {
        document.getElementById('set1').className='noclass';
        document.getElementById('set1a').className='noclass';
        document.getElementById('set2').className='current';
        document.getElementById('set2a').className='current';
        document.getElementById('thumbTable2').style.display = 'block';
        document.getElementById('thumbTable1').style.display = 'none';
    }
    else {
        return null;
    }
}

function clearborders() {
    for (var i=1; i<=50; i++) {
        var thumb = document.getElementById('thumb'+i);
        if (thumb) {
            thumb.style.width='72px';
            thumb.style.height='61px';
            thumb.style.border='1px solid #FFFFFF'; //tori 15 nov change thumb border color on on mousing up back to original color, i changed the color to white
        }
    }
}

/*
 * Common functions for dropping a draggable thumbnail
 */
function inTarget(mousePos) {
    if (votingDone) {
        return false;
    }
    // For odd reasons, IE is taking MousePos relative to <div id=mid2>
    mousePos.x += xAdjust();
    mousePos.y += yAdjust();
    // The "vote now" bottom section not drop target (dropExclude)
    if (mousePos.x > dropTarget.offsetLeft &&
        mousePos.x < dropTarget.offsetLeft + dropTarget.clientWidth &&
        mousePos.y > dropTarget.offsetTop &&
        mousePos.y < dropTarget.offsetTop + (dropTarget.clientHeight-dropExclude)) {
        return true;
    }
    return false;
}

function sameCell(mousePos) {
    // IE is taking clickPos (NOT mousePos!) relative to <div id=mid2>
    clickPos.x += xAdjust();
    clickPos.y += yAdjust();
    if (Math.abs(mousePos.x - clickPos.x) < 10 &&
        Math.abs(mousePos.y - clickPos.y) < 10) {
        return true;
    }
    return false;
}

function mashupName(src) {
    return src.replace(/thumbs\/tn/,"thumbs/lg/tn_lg_");
}

function thumbnailName(src) {
    return src.replace("/lg/","/").replace("_lg_","");
}

function thumbTitle(src) {
    for (var i=1; i<=50; i++) {
        var thumb = document.getElementById('thumb'+i);
        if (thumb.src == src) {
            var title = "["+i+"] "+tArtist[i]+": "+tPerformance[i];
            return title;
        }
    }
    return "Unknown title";
}

function idFromTitle(title) {
    return "thumb"+title.split(']')[0].replace('[','')
}

function dropIt(mousePos, src, title) {
    var img = "<img src='"+mashupName(src)+
                 "' width='"+mashup.width+
                 "' height='"+mashup.height+
                 "' class='dropped_clip'/>";
    var slotN = parseInt(
        5*(mousePos.x-dropTarget.offsetLeft)/dropTarget.clientWidth);
    var tdslot = dropTarget.getElementsByTagName('td')[slotN];
    var slot = tdslot.getElementsByTagName('div')[0];

    // Cookies are 1-based indexed
    createCookie("vote"+(1+slotN), thumbTitle(src), 0);

    // Safari translates &nbsp; to 0xA0; check "whitespace" aggressively
    var content = slot.innerHTML.replace(/&nbsp;/g,""
                               ).replace(/\s*/,""
                               ).replace(/\xA0*/,"");
    if (content != "" && content != " ") {
        var tail = content.split('src=')[1];
        var src = tail.split(' ')[0];
        src = src.replace(/'/g,"").replace(/"/g,'');
        ungray(thumbnailName(src));
    }
    slot.innerHTML = img;
}

// Re-enable a thumbnail, if src="*", re-enable them all
function ungray(src) {
    var clips = document.getElementsByTagName('div');
    for(var i=0; i < clips.length; i++) {
        var clip = clips[i];
        if (clip.className=="clip" && (src=='*' || clip.src==src)) {
            // FIXME: Ugly browser detection, but helpful for debugging
            if (BrowserDetect.browser != 'Explorer') {
                clip.style.opacity = 1;
                clip.onmousedown = std_onmousedown;
            }
            else {
                var img = clip.getElementsByTagName('img')[0];
                img.style.filter = 'alpha(opacity=100);';
                clip.onmousedown = ie_onmousedown;
            }
        }
    }
}
/*
 * Common mouse-handling functions for IE and W3C
 */
function disabled_onmousedown(ev) {
    show("Disabled dragging");
    return false;
}

function mouseUp(ev) {
    // If nothing is being dragged, just return
    if (dragObject==null) {
        show("Null dragObject");
        return false;
    }

    // Find event across browser, get the image inside the <div>
    ev = ev || window.event;
    var mousePos = mouseCoords(ev);
    show(["Mouseup", mousePos.x, mousePos.y]);
    var img = dragObject.getElementsByTagName('img')[0];

    // What to do: (1) dropped in mashup
    if (inTarget(mousePos)) {
        show(["Dropped", mousePos.x, mousePos.y]);
        // Close the image and put it in a target_slot
        dragObject.style.opacity = .25;
        img.style.filter = "alpha(opacity=25);";
        dropIt(mousePos, img.src);
        dragObject.onmousedown = disabled_onmousedown;
    }
    // (2) Not hardly moved at all (i.e. play video)
    else if (sameCell(mousePos)) {
        show("Dropped in same cell: "+img.tagName);
        clearborders();
        img.style.width='68px'; //tori 15 nov change size on click
        img.style.height='58px'; //tori 15 nov change border on click
        img.style.border='2px solid #D87B1E'; //tori 15 nov change border on click
        window.setTimeout("clearborders()", 1000); //tori 15 novchange time before it goes back to normal size
        dragObject.style.opacity = 1;
        img.style.filter = "alpha(opacity=100);";
		//playVideo(vIDs[vid_id_use]);
    }
    // (3) Dropped elsewhere, just restore the thumbnail
    else {
        img.style.filter = "alpha(opacity=100);";
        dragObject.style.opacity = 1;
    }
    // No active dragObject
    dragObject = null;
    if (BrowserDetect.browser=='Explorer' && BrowserDetect.version < 7) {
        var nada = function() {
            var w=window.open('','',
                'height=1,width=1,status=0,toolbar=0,location=0,menubar=0,scrollbars=0');
            w.close();
            }
        window.setTimeout("nada()", 0);
    }


    // Do no matter what: clear out that temporary dragImage
    //dragImage.removeNode();
    var holder = document.getElementById('holder');
    holder.innerHTML = "";

    // Make sure we display the right instruction
    var i1 = document.getElementById('instruction_1');
    var i2 = document.getElementById('instruction_2');
    var i3 = document.getElementById('instruction_3');
    var i4 = document.getElementById('instruction_4');
    i1.style.display = 'none';
    i2.style.display = 'none';
    i3.style.display = 'none';
    i4.style.display = 'none';
    if (instruction == 1) {     /* Initial state */
        instruction = 2;        /* They've seen it, at least #2 */
    }
    var voteCount = 0;
    for (var i=1; i<=5; i++) {  /* Maybe there's a mashup item */
        if (readCookie('vote'+i)) {
            voteCount++;
            instruction = 3;
            i3.style.display = 'block';
        }
    }
    if (voteCount == 5) {
        instruction = 4;
        i3.style.display = 'none';
        i4.style.display = 'block';
    }
    if (instruction == 2) {
        i2.style.display = 'block';
    }
    return false;
	
	//playVideo(vIDs[vid_id_use]);
	//alert(vIDs[vid_id_use]);

    //return false;
	//}
}

/*
 * Functions for IE mouse handling
 */
function ie_onmousedown(){ //15 nov tori removed drag object code and assigned relevant video firing code to dragObject, ie the actual thumbnail rather than the originally dynamically created dragImage thumb
    var last = dragObject;
    dragObject = this;
    var ev = window.event;
    clickPos = mouseCoords(ev);
    dragObject.style.filter = "alpha(opacity=50);";

    var img = dragObject.getElementsByTagName('img')[0];
    img.style.filter = "alpha(opacity=0);";
    show(["IE Mousedown", last, dragObject.src,
          clickPos.x, clickPos.y]);
		  
	vid_id_string = dragObject.src;
	vid_id_str_len = dragObject.src.length;
	vid_id_use = dragObject.src.substr((vid_id_str_len-6), 2)

if(vid_id_use.substr(0,1) == "n")	{
	vid_id_use = vid_id_use.substr(1,1);
}

if(vIDs[vid_id_use] != 150963)	{
	playVideo(vIDs[vid_id_use]);
}
//alert(vIDs[vid_id_use]);
    return false;
}

function ie_mouseMove(ev){ //tori 15 Nov remove dragImage code and reassigned certain code to dragObject(ie:thumb)
    ev = ev || window.event;
    var mousePos = mouseCoords(ev);
    if (dragObject) {
        dragObject.style.opacity = 0.5;

        show(["IE Dragging", dragObject.src,
                dragObject.style.left, dragObject.style.top]);
        return false;
    }
}

/*
 * Functions for W3C mouse drag handling (enabled and disabled)
 */
function std_onmousedown(ev){ //15 nov tori removed drag object code and assigned relevant video firing code to dragObject, ie the actual thumbnail rather than the originally dynamically created dragImage thumb
    dragObject = this;
    clickPos = mouseCoords(ev);
    var holder = document.getElementById('holder');
	dragObject.style.opacity = 0.5;
	
    show(["Mousedown", dragObject.src,
          clickPos.x, clickPos.y]);

	vid_id_string = dragObject.src;
	vid_id_str_len = dragObject.src.length;
	vid_id_use = dragObject.src.substr((vid_id_str_len-6), 2)

if(vid_id_use.substr(0,1) == "n")	{
	vid_id_use = vid_id_use.substr(1,1);
}

if(vIDs[vid_id_use] != 150963)	{
	playVideo(vIDs[vid_id_use]);
}
//alert(vIDs[vid_id_use]);
    return false;
}

function std_mouseMove(ev){
    ev = ev || window.event;
    var mousePos = mouseCoords(ev);
    if (dragObject) {
        dragObject.style.opacity = 0.5;

        show(["Dragging", dragObject.src,
                dragObject.style.left, dragObject.style.top]);
        return false;
    }
}

/*
 * Initialization functions
 */
function makeDraggable(item){
    // Need a real object to make draggable
    if (!item) {
        return;
    };
    // In fact, need an actual <div> object
    if (!item.tagName != 'div' && item.tagName != 'DIV') {
        return;
    }
    // ...that contains an <img>
    var imgs = item.getElementsByTagName('img');
    if (imgs.length < 1) {
        return;
    }
    var img = imgs[0];   // S.b. exactly 1, but >=1 works
    item.src = img.src;

    // IE handles dragging entirely differently from W3C compliant browsers
    if (BrowserDetect.browser == 'Explorer') {
        item.ondragstart = function() { return false };
        item.onmousedown = ie_onmousedown;
    }
    else {
        item.onmousedown = std_onmousedown;
    }
}

function setup() {
    // Now make the clips draggable
    var clips = getElementsByTagAndClass('div','clip');
    for(var i=0; i < clips.length; i++) {
        var clip = clips[i];
        makeDraggable(clip);
    }

    // And create a drop target
    dropTarget = document.getElementById('drag-clips');

    var main = document.getElementById('main');
    show(BrowserDetect.browser+" "
        +BrowserDetect.version+"; "
        +BrowserDetect.OS );

    if (BrowserDetect.browser == 'Explorer') {
        if (BrowserDetect.version >= 7) {
            xAdjust = function() {
                var mid2 = document.getElementById('mid2');
                var main = document.getElementById('main');
                var leftPad = parseInt((document.body.offsetWidth-main.clientWidth)/2);
                return mid2.offsetLeft - leftPad;
            }
            yAdjust = function() {
                var mid2 = document.getElementById('mid2');
                return mid2.offsetTop - (mid2.offsetTop - document.documentElement.scrollTop);
            }
        }
        else {      // version 6 anyway
            xAdjust = function() {
				var mid2 = document.getElementById('mid2');
				var main = document.getElementById('main');
                var leftPad = parseInt((document.body.offsetWidth-main.clientWidth)/2);
                //alert(mid2.offsetLeft - leftPad);
				return mid2.offsetLeft - leftPad;
				//return document.documentElement.scrollLeft;
            }
            yAdjust = function() {
                return document.documentElement.scrollTop;
            }
        }
    }

    // And populate current votes (from checkvotes.js)
    populateVotes();
}

// Run setup() on startup, but after 1s (so page has rendered)
function startUp() {
    // No selection of content
    document.body.onselectstart = function() { return false };
    window.setTimeout("setup()", 1000);
}