var oXML;
var arGroups = new Array();
var arVideos = new Array();
var arPlaylist = new Array();
var sortableActive = false;
var playerInit = false;

function setCurrentlyPlaying() {
    $(".filledQueueItem").addClass("inactiveMovie");
    var cCurrent = $f("moviePlayer").getClip();
    if (cCurrent.index >= 0) {
        $(".filledQueueItem").eq(cCurrent.index).removeClass("inactiveMovie");
    }
}
$(function() {
    $('.whiteFrame').cornerz({ radius: 12,background: '#910000' });

    $.get(sDatafile,null,function(data) {
        oXML = data;
        makeVideoArray();
        makePage();
    });
});
function makeVideoArray() {
    var nGroup = 0;
    var nVideo = 0;
    $(oXML).find('videogroup').each(function() {
        var oGroupNode = $(this);
        var sGroup = oGroupNode.attr('name');
        arGroups[nGroup] = sGroup;
        nVideo = 0;
        arVideos[nGroup] = new Array();
        oGroupNode.find('video').each(function() {
            var node = $(this);
            arVideos[nGroup][nVideo] = {
                id: nGroup + '-' + nVideo,
                group: sGroup,
                groupid: nGroup,
                title: node.find('title').text(),
                description: node.find('description').text(),
                lvl: node.find('level').text(),
                len: node.find('length').text(),
                thumburl: node.find('thumburl').text(),
                videourl: node.find('videourl').text()
            };
            nVideo++;
        });
        nGroup++;
    });
}
function makePage() {
    $("#pageheader").html($(oXML).find('pagetitle').text());
    $("#pagedescription").html($(oXML).find('pagedescription').text());
    var adLink = $(oXML).find('adlink').text();
    var adTitle = $(oXML).find('adtitle').text();
    var adDescr = $(oXML).find('addescription').text();
    var s = '<a href="' + adLink + '">' + adTitle + '</a><br>' + adDescr;
    $("#adsection").html(s);
    $("#adcontainer").click(function() { window.location = adLink });
    makeGroups();
    makePlayer();
}
function checkDropactive() {
    if (!sortableActive) {
        sortableActive = true;
        //alert('making sortable active');
    }
}
function makeDraggables() {
    $("#queueItems").sortable({
        accept: '#vidselector-ul li img',
        helperclass: 'sortHelper',
        tolerance: 'pointer'
    }); //
    $("#vidselector-ul li img").draggable({
        helper: 'clone',
        snap: true,
        start: function(event,ui) {
            checkDropactive();
        }
    });

    $("#queueItems li").droppable({
        accept: '#vidselector-ul li img',
        activeclass: 'dropactive',
        hoverclass: 'drophover',
        tolerance: 'pointer',

        // activeClass: 'droppable-active',
        // hoverClass: 'droppable-hover',
        drop: function(ev,ui) {
            var sId = $(ui.draggable).attr("id");
            var arId = sId.split('-');
            var nGroup = arId[0];
            var nID = arId[1];
            var videoThumb = arVideos[nGroup][nID].thumburl;
            var videoURL = arVideos[nGroup][nID].videourl;
            var oLI = $(this);
            oLI.attr('id','li-' + sId);
            oLI.removeClass("emptyQueueItem");
            oLI.addClass("filledQueueItem");
            oLI.html('<img id="' + sId + '" src="' + videoThumb + '" ondblclick="makePlayer(\'' + videoURL + '\')"><br /><a href="javascript:remMe(\'li-' + sId + '\')">[remove]</a>');
            // if the player doesn't already have a video, then load this into it
            //if ($f("moviePlayer").getState() == -1) makePlayer(videoURL);
        }
    })
}

function synchPlaylist() {
    // iterate through all the LI nodes and create the playlist
    var arVids = new Array();
    var n = 0;
    var sId,arId,nGroup,nID;
    $(".filledQueueItem").find("img").each(function() {
        sId = $(this).attr('id');
        arId = sId.split('-');
        nGroup = arId[0];
        nID = arId[1];
        arVids[n] = arVideos[nGroup][nID].videourl;
        n++;
    });

    var bPlaylistChanged = playlistChanged(arPlaylist,arVids);
    //alert(bPlaylistChanged);
    if (bPlaylistChanged == true) {
        $f("moviePlayer").play(arVids);
        arPlaylist = arVids;
    }
}

function playlistChanged(ar1,ar2) {
    if (ar1.length != ar2.length) return true;
    for (var i = 0;i < ar1.length;i++) {
        if (ar1[i] != ar2[i]) {
            return true;
        }
        return false;
    }
}

function remMe(videoId) {
    var s = '#' + videoId;
    var oRemove = $(s);
    oRemove.html('');
    oRemove.removeClass("filledQueueItem");
    oRemove.addClass("emptyQueueItem");
    oRemove.attr('id','');
}
function makeGroups(selectedGroup) {
    // g is an object holding the various JSON videogroups
    if (!selectedGroup) selectedGroup = 0;
    var sHTML = '';
    for (var x = 0;x < arGroups.length;x++) {
        if (x != selectedGroup) {
            sHTML += '<a href="javascript:makeGroups(' + x + ')">' + arGroups[x] + '</a><br />';
        } else {
            sHTML += arGroups[x] + '<br />';
        }

    }
    $("#groupselector-selector").html(sHTML);
    loadVideoGroup(selectedGroup);
    makeDraggables();
}
function loadVideoGroup(groupid) {
    var sHTML = '';
    for (var x = 0;x < arVideos[groupid].length;x++) {
        sHTML += '<li>' +
                         '  <img id="' + arVideos[groupid][x].id + '" src="' + arVideos[groupid][x].thumburl + '" alt="" />' +
                         '  <div id="vidtext" style="overflow:hidden;">' +
                         '    <h3>' + arVideos[groupid][x].title + '</h3>' +
                         '    <div class="viddescr">' + arVideos[groupid][x].description + '</div>' +
                         '    <div class="vidlevel">Level: ' + arVideos[groupid][x].lvl + '</div>' +
                         '    <div class="vidlength">Length: ' + arVideos[groupid][x].len + '</div>' +
                         '  </div>' +
                         '</li>';
    }
    $("#vidselector-ul").html(sHTML);
}

function linkOnly() {
    alert('This link is for appearances only and to represent a site template. These links are not a part of this video application.');
}

function makePlayer() {
    // we're just setting up the player to take the playlist
    $f("moviePlayer","resources/flowplayer-3.0.7.swf",{
        onLoad: function() {
            synchPlaylist();
        },
        onStart: function() {
            // check playlist ordering; rebuild playlist if necessary;
            setCurrentlyPlaying();
            synchPlaylist();
        },
        onBeforeClick: function() {
            if ($(".filledQueueItem").length == 0) {
                alert('Please add videos to the playlist before clicking play');
                return false;
            }
        },
        plugins: {
            controls: {
                playlist: true
            }
        }
    });
}