var StopInformationGuideContainer_init = "";
var InfoChoose_init = "";
var hasReqestedVersion = DetectFlashVer(9, 0, 115);

$(document).ready(function() {
    //binds the mouse hover and mouse out events of the large and small icons on the map
    for (var x = 1; x < 11; x++) {
        $("#Small" + x).bind("mouseover", mouseOverStop);
        $("#Large" + x).bind("mouseout", mouseOutStop);
    }
    //binds the mouse click event of the large icons on map
    for (var Stop in Stops) {
        $("#Large" + Stops[Stop].id).bind("click", { stopId: Stops[Stop].id }, function(e) { SelectStop(e.data.stopId); });
    }
    //binds the mouse click and hover events of the guides
    for (var Guide in Guides) {
        $("#Guide" + Guides[Guide].id).bind("mouseover mouseout", function() { $(this).toggleClass("guideHovered"); });
        $("#Guide" + Guides[Guide].id).bind("mouseover", { guideId: Guides[Guide].id }, function(e) { $("#Guide" + Guides[e.data.guideId].id).attr('src', "images/" + Guides[e.data.guideId].picurl); });
        $("#Guide" + Guides[Guide].id).bind("mouseout", { guideId: Guides[Guide].id }, function(e) {
            if (currentGuide != null) {
                if (e.data.guideId != currentGuide)
                    $("#Guide" + Guides[e.data.guideId].id).attr('src', "images/" + Guides[e.data.guideId].picurl.substring(0, Guides[e.data.guideId].picurl.length - 4) + "_blur.png");
            }
            else if (currentStop != null) {
                if (e.data.guideId != Stops[currentStop].guides[0] && e.data.guideId != Stops[currentStop].guides[1])
                    $("#Guide" + Guides[e.data.guideId].id).attr('src', "images/" + Guides[e.data.guideId].picurl.substring(0, Guides[e.data.guideId].picurl.length - 4) + "_blur.png");
            }
        });
        $("#Guide" + Guides[Guide].id).bind("click", { guideId: Guides[Guide].id }, function(e) { SelectGuide(e.data.guideId); });

    }
    $("#MapImg").bind("mousemove", mouseOverMap);
    $("#VideoPanel").hide();
    $("#ExitButton").hide();
    
    StopInformationGuideContainer_init = $("#StopInformationGuideContainer").html();
    InfoChoose_init = $("#InfoChoose").html();

    if (!hasReqestedVersion)
        document.getElementById('OutdatedFlashDiv').style.display = 'block'        
});
function mouseOverMap() {
    var stayBig = false;
    for (var i = 0; i < 11; i++) {
        stayBig = false;
        if (currentStop == i)
            stayBig = true;
        if (currentGuide != null) {
            for (var j in Guides[currentGuide].stops) {
                if (i == j)
                    stayBig = true;
            }
        }
        if (!stayBig)
            $("#Large" + i).css("display", "none");
    }
}
function startPlayStop(vidUrl, guideId) {
    $("#InfoPanel").hide();
    $("#VideoPanel").show();

    var StopPlaylist = new Array();
    if (!Guides[guideId].viewedOnce)
        StopPlaylist.push({ url: Guides[guideId].vidurl, autoPlay: true, autoBuffering: true });
    StopPlaylist.push({ url: vidUrl, autoPlay: true, autoBuffering: true, onFinish: function() { SelectStop(currentStop); } });

    Guides[guideId].viewedOnce = true;

    flowplayer("player", { src: "scripts/flowplayer.commercial-3.0.5.swf", wmode: 'transparent' },
    {
        key: '#@031a8772c15c34be716',

        playlist: StopPlaylist,

        plugins:
        {
            controls:
            {
                bufferGradient: 'none',
                backgroundColor: '#333333',
                progressColor: '#4a0100',
                backgroundGradient: 'low',
                timeColor: '#4a0100',
                bufferColor: '#000000',
                durationColor: '#343434',
                buttonColor: '#a2a2a2',
                progressGradient: 'medium',
                sliderColor: '#a2a2a2',
                buttonOverColor: '#4a0100',
                borderRadius: '0px',
                sliderGradient: 'none',
                opacity: 1.0
            }
        }
    });
}
function startPlayGuide(vidurl) {
    $("#InfoPanel").hide();
    $("#VideoPanel").show();
    flowplayer("player", { src: "scripts/flowplayer.commercial-3.0.5.swf", wmode: 'transparent' },
    {
        key: '#@031a8772c15c34be716',

        playlist:
        [
            {
                url: vidurl,
                autoPlay: true,
                autoBuffering: true,
                onFinish: function() { SelectGuide(currentGuide); }
            }
        ],

        plugins:
        {
            controls:
            {
                bufferGradient: 'none',
                backgroundColor: '#333333',
                progressColor: '#4a0100',
                backgroundGradient: 'low',
                timeColor: '#4a0100',
                bufferColor: '#000000',
                durationColor: '#343434',
                buttonColor: '#a2a2a2',
                progressGradient: 'medium',
                sliderColor: '#a2a2a2',
                buttonOverColor: '#4a0100',
                borderRadius: '0px',
                sliderGradient: 'none',
                opacity: 1.0
            }
        }
    });
}
function mouseOverStop() {
    var num = 0;
    if (this.id.length == 6)
        num = this.id.slice(length - 1);
    else
        num = this.id.slice(length - 2);
        
    $("#Large" + num).css("display", "block");
}

function mouseOutStop() {
    var stayBig = false;
    if (this.id.length == 6)
        var num = this.id.slice(length - 1);
    else
        var num = this.id.slice(length - 2);
    if (currentStop == num)
        stayBig = true;
    if (currentGuide != null && currentStop == null) {
        for (var i in Guides[currentGuide].stops) {
            if (num == i)
                stayBig = true;
        }
    }
    if (!stayBig)
        $("#Large" + num).css("display", "none");
}

function SelectGuide(id) {
    $("#InfoPanel").show();
    $("#VideoPanel").hide();
    $("#ExitButton").hide();
    if (currentGuide != null) {
        for (var i in Guides[currentGuide].stops) {
            $("#Large" + i).css("display", "none");
        }
        currentGuide = null;
    }
    if (currentStop != null)
        $("#Large" + currentStop).css("display", "none");
    currentStop = null;
    currentGuide = id;
    for (var Guide in Guides) {
        if (Guides[Guide].id != currentGuide) {
            $("#Guide" + Guides[Guide].id).attr('src', "images/" + Guides[Guide].picurl.substring(0, Guides[Guide].picurl.length - 4) + "_blur.png");
            if ($("#Guide" + Guides[Guide].id).hasClass("guideSelected"))
                $("#Guide" + Guides[Guide].id).removeClass("guideSelected");
        }
        else {
            $("#Guide" + Guides[Guide].id).attr('src', "images/" + Guides[Guide].picurl);
            if (!$("#Guide" + Guides[Guide].id).hasClass("guideSelected"))
                $("#Guide" + Guides[Guide].id).addClass("guideSelected");
        }
    }
    for (var i in Guides[id].stops) {
        $("#Large" + i).css("display", "inline");
    }
    if (Guides[id].viewedOnce) {
        var output = "<h3 id='InfoTitle'>" + Guides[id].name + " &mdash; select one of my stops:</h3><div id='StopsDiv'>";
        var stopCount = 0;
        for (var i in Guides[id].stops) {
            stopCount++;
            $("#Large" + i).css("display", "inline");
            if (Guides[id].stopCount == 3 && stopCount == 1)
                output += "<div class='StopDiv' style='margin-left:auto;margin-right:auto;float:none;' id='StopDiv" + i + "'><img class='StopBorder' width='140px' height='80px' id='SmallVid" + i + "' src='images/" + Guides[currentGuide].stops[i].previewImage + "' alt='' /><div class='StopDivInfo' id='StopDivInfo" + i + "'><img src='images/icon" + i + ".png'  class='IconImg' alt='' /><h4>" + Stops[i].name + "</h4></div></div>";
            else
                output += "<div class='StopDiv' id='StopDiv" + i + "'><img class='StopBorder' width='140px' height='80px' id='SmallVid" + i + "' src='images/" + Guides[currentGuide].stops[i].previewImage + "' alt='' /><div class='StopDivInfo' id='StopDivInfo" + i + "'><img src='images/icon" + i + ".png'  class='IconImg' alt='' /><h4>" + Stops[i].name + "</h4></div></div>";
        }
        $("#InfoChoose").html(output);
    }
    else {
        Guides[id].viewedOnce = true;
        startPlayGuide(Guides[id].vidurl);
        $("#ExitButton").show();
    }

    $("#StopInformationGuideContainer").html("<div class='grid_3 alpha'><div class='grid_inner'><h2 id='MeetYourGuideHeading'>Meet your guide</h2><div id='GuideInfo'><h3 style='margin-top:0;'>" + Guides[currentGuide].name + "</h3><p><a href='javascript:startPlayGuide(Guides[currentGuide].vidurl);'>Introduction Video</a></p><p>Major: " + Guides[currentGuide].major + "</p><p>Hometown: " + Guides[currentGuide].hometown + "</p><p>Class: " + Guides[currentGuide].year + "</p></div></div></div><div class='grid_6 omega' style='margin-top: 60px;'><div class='grid_inner'><p style='float:left;width:350px;margin-top:0;'>" + Guides[currentGuide].bio + "</p></div></div></div>");
    for (var i in Guides[id].stops) {
        $("#StopDiv" + i).bind("click", { stopId: i }, function(e) { ChooseStop(e.data.stopId); });
    }
}

function ChooseGuide(id) {
    currentGuide = id;
    for (var Guide in Guides) {
        if (Guides[Guide].id != currentGuide) {
            $("#Guide" + Guides[Guide].id).attr('src', "images/" + Guides[Guide].picurl.substring(0, Guides[Guide].picurl.length - 4) + "_blur.png");
            if ($("#Guide" + Guides[Guide].id).hasClass("guideSelected"))
                $("#Guide" + Guides[Guide].id).removeClass("guideSelected");
        }
        else {
            if (!$("#Guide" + Guides[Guide].id).hasClass("guideSelected"))
                $("#Guide" + Guides[Guide].id).addClass("guideSelected");
        }
    }
    startPlayStop(Guides[id].stops[currentStop].url, id);
}

function SelectStop(id) {
    $("#InfoPanel").show();
    $("#VideoPanel").hide();
    $("#ExitButton").hide();
    if (id == 11 || id == 0) {
        if (id == 0) {
            for (var Stop in Stops) {
                $("#Large" + Stops[Stop].id).css("display", "none");
            }
        }
        else
            $("#Large10").css("display", "none");
        currentStop = null;
        currentGuide = null;
        for (var Guide in Guides) {
            $("#Guide" + Guides[Guide].id).attr('src', "images/" + Guides[Guide].picurl);
        }
        if (id == 11) {
            $("#StopInformationGuideContainer").html("");
            var output = "<p>Hopefully you've been able to learn about Missouri State University and have a good idea of why we think it is such a special place.  The links below provide additional information about the university, the application process, information for future students, residence life and services, and how to schedule a live tour.</p><h3>Schedule a live visit</h3><p>Of course, the best way to experience Missouri State University is to schedule a &quot;live&quot; tour of campus.We offer personalized visits of campus year-round. See more information on <a href=\"http://www.missouristate.edu/admissions/visithome.htm\">scheduling a live tour</a>.</p>";
            $("#InfoChoose").html(output);
        }
        else {
            $("#StopInformationGuideContainer").html(StopInformationGuideContainer_init);
            $("#InfoChoose").html(InfoChoose_init);
            if (!hasReqestedVersion)
                document.getElementById('OutdatedFlashDiv').style.display = 'block';
        }
    }
    else {
        $("#Large" + id).css("display", "inline");
        if (currentGuide != null) {
            for (var i in Guides[currentGuide].stops) {
                //var stop = Stops[Guides[currentGuide].stops[i]];
                if (i != currentStop)
                    $("#Large" + i).css("display", "none");
            }
            currentGuide = null;
        }
        if (currentStop != null && currentStop != id)
            $("#Large" + currentStop).css("display", "none");
        currentStop = id;
        var output = "<h3 id='InfoTitle'>" + Stops[id].name + " &mdash; choose a guide:</h3><div id='GuidesDiv'>";
        for (var i = 0; i < Stops[id].guides.length; i++) {
            var guide = Guides[Stops[id].guides[i]];
            output += "<div class='GuideDiv' id='GuideDiv" + guide.id + "'><img src='images/" + guide.picurl + "' alt='" + guide.name + "' /><h4>" + guide.name + "</h4></div>";
        }
        if(id != 10)
            output += "</div><img src='images/Nextstop.png' alt='Next Stop' id='NextStop' />";
        else
            output += "</div><img src='images/Finishtour.png' alt='Finsish Tour' id='NextStop' />";
        $("#InfoChoose").html(output);
        $("#NextStop").bind("click", function() { SelectStop(parseInt(currentStop) + 1); });
        for (var Guide in Guides) {
            if (Stops[id].guides[0] == Guides[Guide].id || Stops[id].guides[1] == Guides[Guide].id) {
                $("#Guide" + Guides[Guide].id).attr('src', "images/" + Guides[Guide].picurl);
                if (!$("#Guide" + Guides[Guide].id).hasClass("guideSelected"))
                    $("#Guide" + Guides[Guide].id).addClass("guideSelected");
            }
            else {
                $("#Guide" + Guides[Guide].id).attr('src', "images/" + Guides[Guide].picurl.substring(0, Guides[Guide].picurl.length - 4) + "_blur.png");
                if ($("#Guide" + Guides[Guide].id).hasClass("guideSelected"))
                    $("#Guide" + Guides[Guide].id).removeClass("guideSelected");
            }
        }
        for (var i = 0; i < Stops[id].guides.length; i++) {
            $("#GuideDiv" + Guides[Stops[id].guides[i]].id).bind("click", { index: i }, function(e) { ChooseGuide(Guides[Stops[id].guides[e.data.index]].id); });
        }
        output = "<h2 id='StopInformationHeading'>More about this stop</h2>";
        for (var loc in Stops[currentStop].buildings) {
            output += "<div class='BuildingDescription '><img src='http://www.missouristate.edu/graphics/buildings/" + Stops[currentStop].buildings[loc].picurl + "' alt='" + Stops[currentStop].buildings[loc].name + "' width='140' height='93' class='SystemBordered'/><h3>" + Stops[currentStop].buildings[loc].name + "</h3><p>" + Stops[currentStop].buildings[loc].shortdescription + "  <a href='http://search.missouristate.edu/map/BldgTemplate.asp?b=" + Stops[currentStop].buildings[loc].id + "' >More</a></p><div class='Clear MozClear'></div></div>";
        }
        $("#StopInformationGuideContainer").html(output);
    }
    document.getElementById("Guide7").setAttribute("class", "guideSelected");
    document.getElementById("Guide7").setAttribute("src", "images/nikkirios.png");
}
function ChooseStop(id) {
    currentStop = id;
    for (var i in Guides[currentGuide].stops) {
        if (id != i)
            $("#Large" + i).css("display", "none");
    }
    startPlayGuide(Guides[currentGuide].stops[id].url);
    output = "<h3 id='StopInformationHeading'>" + Stops[id].name + "</h3>";
    for (var loc in Stops[id].buildings) {
        output += "<div class='BuildingDescription '><img src='http://www.missouristate.edu/graphics/buildings/" + Stops[id].buildings[loc].picurl + "' alt='" + Stops[id].buildings[loc].name + "' width='140' height='93' class='SystemBordered'/><h3>" + Stops[id].buildings[loc].name + "</h3><p>" + Stops[id].buildings[loc].shortdescription + "</p><div class='Clear MozClear'></div></div>";
    }
    $("#StopInformationGuideContainer").html(output);
}