$(document).ready( function() {

    var mediaplayer = $("#mediaplayer");
    var mp_gallery = $("#mp_imagegallery"), mp_videoplayer = $("#mp_videoplayer"), mp_map=$("#mp_map");
    var mp_controls = $("#mp_controls");
    var mp_menu = $("#mp_menu");

    var mp_toggleBitrate = $("#mp_toggleBitrate");
    var player;

    // set the initial heights
    mp_gallery.height(mediaConfig.galleryHeight);
    mp_videoplayer.height(mediaConfig.videoHeight);
    mp_map.height(mediaConfig.iframeHeight);

    var activeTab;
    var activeMenuIndex = -1;

    var selectedGalleryIndex = 0, seletedVideoIndex = 0, selectedMapIndex = 0;
    var menuVisible = false, bitrate ="high", animTime = 1500;

    function selectMenuElement(index) {
        if (index == activeMenuIndex ) {
            return;
        }
        var li = mp_menu.find("li");
        li.removeClass("selected");
        $(li[index]).addClass("selected");
        activeMenuIndex = index;

        Cufon.replace(mp_menu, {
            hover: true
        })
    }

    function createVideoPlayer() {
        player = flowplayer("mp_videoplayer", {
            src:"js/flowplayer/flowplayer-3.2.7.swf",
            wmode: "transparent"
        }, {
            playlist: mediaConfig.videos[bitrate],
            // listen to following clip events
            clip: {
                onBegin: function(clip) {
                    selectMenuElement(clip.index );
                }
            },

            // invoked when *player* loads (not a clip specific event)
            onLoad: function() {
                console.log("player loaded");
            },
            // when volume level is altered
            onVolume: function(level) {
                console.log("volume level is: " + parseInt(level) )
            },
            // when playback is finished we are performing unload.
            onFinish: function() {
                console.log('player unloaded upon onFinish()');
                //this.unload();
            }
        });
        player.play();
    }

    function buildMenu(tab) {
        var li = [];
        switch(tab) {
            case "mp_videoplayer":
                $.each(mediaConfig.videos[bitrate], function(i, item) {
                    if (item.title) {
                        li.push("<li><a href=\"#video-" + i + "\">" + item.title + "</a></li>")
                    }
                });
                break;
            case "mp_imagegallery":
                $.each(mediaConfig.galleries, function(i, item) {
                    li.push("<li><a href=\"#gallery-" + i + "\">" + item.title + "</a></li>")
                });
                break;
            case "mp_map":
                $.each(mediaConfig.iframes, function(i, item) {
                    li.push("<li><a href=\"#map-" + i + "\">" + item.title + "</a></li>")
                });
                break;
        }
        activeMenuIndex = -1;
        if (li.length >1) {
            mp_menu.html("<div><span></span></div><ul>" + li.join("") + "</ul>");
            Cufon.replace(mp_menu, {
                hover: true
            })
            if (!menuVisible) {
                mp_menu.fadeIn();
                menuVisibible = true;
            }
        }
        else {
            mp_menu.fadeOut();
            menuVisible = false;
        }
    }

    function changeTab(tab) {
        if (activeTab == tab) {
            return;
        }
        switch(activeTab) {
            case "mp_videoplayer":
                mp_videoplayer.fadeOut(animTime);
                player.stop();
                mp_toggleBitrate.hide();
                break;
            case "mp_imagegallery":
                mp_gallery.cycle("pause");
                mp_gallery.fadeOut(animTime);
                break;
            case "mp_map":
                mp_map.fadeOut();
                break;
        }

        var newHeight;
        switch(tab) {
            case "mp_videoplayer":
                newHeight = mediaConfig.videoHeight;
                mp_videoplayer.fadeIn(animTime);
                if (!player) {
                    createVideoPlayer();
                }
                mp_toggleBitrate.show();
                break;
            case "mp_imagegallery":
                newHeight = mediaConfig.galleryHeight;
                mp_gallery.fadeIn(animTime);
                mp_gallery.cycle("resume");
                break;
            case "mp_map":
                newHeight = mediaConfig.iframeHeight;
                mp_map.html("<iframe src=\"" + mediaConfig.iframes[0].url + "\"></iframe>");
                mp_map.fadeIn(animTime);
                break;
        }
        buildMenu(tab);
        selectMenuElement(0);
        activeTab = tab;

        var li = mp_controls.find("li");
        li.removeClass("selected");
        mp_controls.find("li." + tab).addClass("selected");
        mediaplayer.animate({
            height: (newHeight + 29) + "px"
        }, 1500);
    }

    // set up the primary controls
    mp_controls.bind("click", function(e) {
        var element = e.target.nodeName=="A" ? $(e.target) : $(e.target).parents("#mp_controls a");
        var href = element.attr("href").match(/#.+/);
        if (href) {
            href = href[0];
            if (href == "#toggle_bitrate") {
                bitrate = bitrate =="high" ?"low":"high"
                element.html(bitrate =="high" ? "Play in low resolution": "Play in high resolution");
                Cufon.replace(element);
                buildMenu(activeTab);
                var time = player.getTime();
                player.stop();
                player.setPlaylist(mediaConfig.videos[bitrate]);
                player.play(activeMenuIndex);
            }
            else {
                changeTab(href.substring(1));
            }
        }
        e.preventDefault();
    });
    function loadGallery(gallery) {
        mp_gallery.cycle("destroy");

        $.each(gallery.images, function(i,url) {
            mp_gallery.append("<img class=\"slide\" src=\"" + url + "\"/>");
        });
        mp_gallery.cycle({
            fx:     'fade',
            speed:  700,
            timeout: 5000,
            next:   '.next',
            prev:   '.prev',
            slideExpr: ".slide"
        });

    }

    function changeMenuElement(element) {
        var atoms = element.split("-"), index = parseInt(atoms[1],10);
        switch(atoms[0]) {
            case "video":
                player.play(index);
                break;
            case "gallery":
                loadGallery(mediaConfig.galleries[index]);
                break;
            case "mp_map":
                break;
        }
        selectMenuElement(index);
    }

    // set up the menu
    ( function() {
        var mp_menuState = "in";
        mp_menu.bind("click", function(e) {
            var element = e.target.nodeName=="A" ? $(e.target) : $(e.target).parents("#mp_menu a");
            var href = element.attr("href").match(/#.+/);
            if (href) {
                href = href[0];
                changeMenuElement(href.substring(1));
            }
            else {
                mp_menu.stop();
                if (mp_menuState == "in") {
                    mp_menuState = "out";
                    mp_menu.attr("class","menu-out");
                    mp_menu.animate({
                        right:0
                    });
                }
                else {
                    mp_menuState = "in";
                    mp_menu.attr("class","menu-in");
                    mp_menu.animate({
                        right:-255
                    });
                }
            }
            e.preventDefault();
        }
        );
        var timer;
        mp_menu.mouseover( function() {
            if (timer) {
                window.clearTimeout(timer);
                timer = null;
            }
            mp_menu.stop();
            mp_menuState = "out";
            mp_menu.animate({
                right:0
            });
            mp_menu.attr("class","menu-out");
        })
        mp_menu.mouseout( function() {
            timer = window.setTimeout( function() {
                mp_menu.stop();
                mp_menuState = "in";
                mp_menu.animate({
                    right:-255
                });
                mp_menu.attr("class","menu-in");
            }, 1000);
        })
    }());
    function body_onClick(e) {
        changeTab("mp_imagegallery");
        $(document.body).unbind("click", body_onClick);
        bodyListenerAdded = false;
    }

    var bodyListenerAdded = false;
    mediaplayer.bind("click", function(e) {
        e.stopPropagation();
        if (bodyListenerAdded)
            return;
        $(document.body).bind("click", body_onClick);

    })
    // set initial heights

    Cufon.refresh("#mp_controls");
    // load the initial gallery
    loadGallery(mediaConfig.galleries[0]);
    // select the initial tab
    changeTab((/^#mp_/).test(location.hash) && location.hash.substring(1)||"mp_imagegallery");

});