/*
* Meet The Boss Menu
* http://www.MeetTheBoss.tv
*/

var ChannelArray = new Array();

var $jq = jQuery.noConflict();
var staticMenuBarColor = "#595959";
var imagePath = "/Styles/Images/Header/";
var broadcastPath = "/Broadcast/";
var timerMenu;
var timerGallery;
var interval = 4000; // slide interval of gallery 
var imageReelTotalWidth; // Total Reel Width
var imageReelPosition; // Relevent number of Li position
var currentReelPosition = 0; // counter
var imageWidth = 990; // width of images - OLD width 983 - 988
var imagesCountInList; // Image Count
var leftRightScrollerClick = 0; // for use on channel page to enable left/right scrolling
var allowLeftAndRightClick = 1;


var ListItem = null;

var hdnChannelId = $jq("#ctl00_hidChannelId");
var channelId = hdnChannelId.val();

// NOPE
//var channelId = <%=ChannelId%>; // channelid from codebehind
//var channelId = document.getElementById('ctl00_hidChannelId').value;

var channelReelPosition; // Position of channel on the playlist reel.
//channelReelPosition = 1;
// NOTE: CHANNELID MAY HAVE TO CHANGE AS ID's DEPENDANT ON DBASE VALUES
switch (parseInt(channelId)) {
    case 5:
        channelReelPosition = 0 // Leadership
        break
    case 9:
        channelReelPosition = 1 // Innovation
        break
    case 6:
        channelReelPosition = 2 // Sales&Marketing
        break
    case 12:
        channelReelPosition = 3 // HumanCap
        break
    case 7:
        channelReelPosition = 4 // Technology
        break
    case 10:
        channelReelPosition = 5 // Goverance
        break
    case -1:
        channelOrder = -1 // Non-Channel Pages
        break
}


$jq(document).ready(function () {

    if (mediaRatingResult == null) {
        var mediaRatingResult = new Array();
    }

    // if Blog / Article / Resources tabs -5 is for grey bar, no menus
    if (channelId == -2 || channelId == -3 || channelId == -4 || channelId == -5) {
        setStaticMenuBar();
    }
    else {
        documentReadyWrapper();
    }
});


// Loads all items that need to go in jquery document.ready
function documentReadyWrapper() {

    imagesCountInList = 6; // $jq('#homepagePlayer ul.playerList li').size(); // number of images in list
    imageReelTotalWidth = imageWidth * imagesCountInList; // work out player reel size
    $jq('#playerList').css({ 'width': imageReelTotalWidth }); // total width
    $jq('#playerList > li:first').before($('#playerList > li:last')); 

    //$jq('#playerList li:first').addClass("selected");


    // INITIAL SETTINGS TO DETERINE ROTATION, ACTIVE LIST 
    if (channelId == -1) {
        $jq(function () {
            SetFirstFirstReelItem();
        });

        $jq(function () {
            if (channelId == -1) {
                timerMenu = setInterval(slideSwitchTimedFwd, interval); // start timerMenu function
            }
        });
    }
    else {
        if (channelReelPosition == 0) {
            SetFirstFirstReelItem();
        }
        else {
            $jq('.siteNavigation ul li:first').addClass('active');
            SortListOnChannelNavigation();
            slideSwitchTimedChannel();
        }
    }


    // HOVER FOR SUBMENUS
    $jq('.siteNavigation ul li').hover(
        function () {
            clearInterval(timerMenu); // stop timer
            $jq('ul', this).css('display', 'block'); // Display submenu
        },
        function () {
            if (channelId == -1) {
                clearInterval(timerMenu); // start timer
                timerMenu = setInterval(slideSwitchTimedFwd, interval);
            }
            $jq('ul', this).hide();     // Hide submenu
        });


    // HOVER EVENT TO DISPLAY GALLERY SCROLL LEFT+RIGHT
    $jq("#homepagePlayer").hover(
    function () {
        clearInterval(timerMenu);
        $jq("#homepagePlayer .leftScroll").delay(400).fadeIn(200);
        $jq("#homepagePlayer .rightScroll").delay(400).fadeIn(200);
    },
    // hover out and hide buttons -stops animations if part way through
    function () {
        if (channelId == -1) {
            timerMenu = setInterval(slideSwitchTimedFwd, interval);
        }
        $jq("#homepagePlayer .leftScroll").stop(true, true).hide();
        $jq("#homepagePlayer .rightScroll").stop(true, true).hide();
    });


    // CLICK EVENT FOR GALLERY SCROLL LEFT
    $jq("#homepagePlayer .leftScroll").click(function () {

        if (allowLeftAndRightClick == 1) {
            $jq("#homepagePlayer .rightScroll").show(); // show right always when scrolling left
            slideSwitchTimedPrev(); //nav gallery to previous function
        }
    });


    // CLICK EVENT FOR GALLERY SCROLL RIGHT
    $jq("#homepagePlayer .rightScroll").click(function () {
        if (allowLeftAndRightClick == 1) {
            $jq("#homepagePlayer .leftScroll").show(); // show left always when scrolling right
            slideSwitchTimedFwd(); // nav gallery to next function
        }
    });

    // DELAYED HOVER OVER MULTI LIST GALLERY
    $jq('#homepagePlayerProgrammes ul li').hover(function () {
        //DisplayArrows();
        timerGallery = setInterval(hoverOver, 800);
    },
    function () {
        $jq('#homepagePlayerProgrammes ul li .videoTitle').show();
        $jq('#homepagePlayerProgrammes ul li .videoDescription').hide();
        $jq('#homepagePlayerProgrammes ul li .rating').hide();
        $jq('#homepagePlayerProgrammes ul li .galleryStar').hide();
        $jq("#homepagePlayerImage .rightScroll").show();


        clearInterval(timerGallery);
    });

    // HOVER TO DISPLAY MULTI GALLERY RATINGS + DESC
    function hoverOver() {
        $jq('#homepagePlayerProgrammes ul li:hover .videoDescription').show();
        $jq('#homepagePlayerProgrammes ul li:hover .videoTitle').hide();
        $jq('#homepagePlayerProgrammes ul li:hover .rating').show();
        $jq('#homepagePlayerProgrammes ul li:hover .galleryStar').show();
        $jq("#homepagePlayerImage .rightScroll").hide();

    }
    /* END: Delayed hover on programmes */


    // CSS ARROW TO POINT TO VIDEO
    if (ListItem != null) {
        $jq.each(ListItem, function (i, val) {
            $jq('#ListItem' + mediaRatingVotes[i]).hover(
        function () {
            // add this to remove arrows before making hovered list arrow
            $jq.each(MediaItemArrow, function (i, val) {
                $jq('#MediaItemArrow' + mediaRatingVotes[i]).removeClass('arrow-w_Off');
                $jq('#MediaItemArrow' + mediaRatingVotes[i]).addClass('arrow-w');
                $jq('#MediaItemArrow' + mediaRatingVotes[i]).removeClass('arrowVisible');
                $jq('#MediaItemArrow' + mediaRatingVotes[i]).addClass('arrowHidden');
            });
            $jq('#MediaItemArrow' + mediaRatingVotes[i]).addClass('arrowVisible');
            $jq('#MediaItemArrow' + mediaRatingVotes[i]).removeClass('arrowHidden');

            // Change url on on the main player button as hover over media items in multi item gallery
            var link = $jq('#HyperlinkItem' + mediaRatingVotes[i]).attr("href");

            $jq("[id$='_hypPlayerPlayButton']").attr("href", link);

        },
        function () {
            $jq('#MediaItemArrow' + mediaRatingVotes[i]).removeClass('arrow-w');
            $jq('#MediaItemArrow' + mediaRatingVotes[i]).addClass('arrow-w_Off');
        })
        });
    

        // RATING and VIEWS POPUP
        $jq.each(mediaRatingVotes, function (i, val) {
            $jq('#rateAndViews' + mediaRatingVotes[i]).hover(
                function () {
                    $jq('#rateAndViewsHover' + mediaRatingVotes[i]).show();
                },
                function () {
                    $jq.data(this, 'timerMenu', setTimeout($jq.proxy(function () {
                        $jq('#rateAndViewsHover' + mediaRatingVotes[i]).hide();
                    }, this), 200));
                });
        });
    }
}


// SET FIRST ITEMS - ON LOAD OR FROM CHANNELS
function SetFirstFirstReelItem() {
    var bgColor = $jq('.siteNavigation input[name$=menuBg]').val(); // get color from hidden field
    $jq('#colorBar').css({ "background-color": "#" + bgColor }); // set color of bar

    // Init first menu item -set active & text white
    $jq('.siteNavigation ul li:first').css({ "background-color": "#" + bgColor, "background": "url(" + imagePath + bgColor + ".png) top left" });
    $jq('.siteNavigation ul li:first').addClass('active');
    $jq('.siteNavigation ul li:first a').css({ "color": "#FFF" });

    // Set colors of Subnavigation
    $jq('.siteNavigation ul li:first ul li a').css({ "color": "#999" }); // set active color of hyperlink
    $jq('.siteNavigation ul li ul li a:hover').css({ "color": "#888" });
}

function makeSelected(domid) {
    var item = document.getElementById(domid);
    //item.className = 'topMenuselected';
    $jq('ctl00_mtbMenu_rptTopMenuItems_ctl00_hypMainMenuItem ul li ul').show();
}

// LEFT AND RIGHT

// PREPARE FOR NAVIGATING CHANNELS
function slideSwitchTimedChannel() {
    if (channelId != -1 || currentReelPosition == channelReelPosition) {
        if (currentReelPosition < channelReelPosition) {
            // Loop until channel is found then set as active
            while (currentReelPosition < channelReelPosition) {
                $active = $jq('.siteNavigation ul li.active').next();
                $prev = $jq('.siteNavigation ul li.active'); // previous is current active
                $prev.removeClass('active');
                $active.addClass('active'); // Add active to current selected
                $active = $jq('.siteNavigation ul li.active');
                currentReelPosition++; // Increment reel value
            }
        }
    }
    else {
        $active = $jq('.siteNavigation ul li.active').next(); // Get next in list
        currentReelPosition++; // Increment reel value
    }
    slideSwitch();
}


// PREPARE FOR FORWARD NAVIGATION
function slideSwitchTimedFwd() {

    allowLeftAndRightClick = 0;

    var left_indent = parseInt($jq('#playerList').css('left')) - imageWidth;

    //make the sliding effect using jquery's animate function
    $jq('#playerList:not(:animated)').animate({ 'left': left_indent }, 'slow', function () {
        //get the first list item and put it after the last list item (that's how the infinite effects is made)
        $jq('#playerList > li:last').after($('#playerList > li:first'));
        //and set the left indent to the default -990px
        $jq('#playerList').css({ 'left': '-990px' });
    });
        $active = $jq('.siteNavigation ul li.active').next(); // Get next in list
        currentReelPosition++; // Increment reel value

        // We don't want to include the static li items (blog/articles/resources) so goto reelposition 6 and reset.
        if (currentReelPosition == 6) {
            $active = $jq('.siteNavigation ul li:first');
            currentReelPosition = 0;
        }
        slideSwitch();
}

// PREPARE FOR REVERSE NAVIGATION
function slideSwitchTimedPrev() {

    allowLeftAndRightClick = 0;
    var left_indent = parseInt($jq('#playerList').css('left')) + imageWidth;
    //make the sliding effect using jquery's animate function
    $jq('#playerList:not(:animated)').animate({ 'left': left_indent }, 'slow', function () {
        //get the first list item and put it after the last list item (that's how the infinite effects is made) '
        $jq('#playerList > li:first').before($('#playerList > li:last'));
        //and get the left indent to the default -303px
        $jq('#playerList').css({ 'left': '-990px' });
    });
        $active = $jq('.siteNavigation ul li.active').prev(); // Get prev in list
        currentReelPosition--; // Decrement reel value
        
        if (currentReelPosition == -1) {
            $active = $jq('.siteNavigation ul li:nth-child(6)'); //go to last channel navigation item
            currentReelPosition = 5; // reset reel position
        }
        slideSwitch();
}


// ROTATES THE MENU AND GALLERY VIEW
function slideSwitch() {

    $prev = $jq('.siteNavigation ul li.active'); // previous is current active
    $prevHyperlink = $jq('.siteNavigation ul li.active a'); // Previous Link
    $prevHyperlink.removeAttr('style'); // remove styles and active class
    $prev.removeAttr('style');
    $prev.removeClass('active');

    $active.addClass('active'); // Add active to current selected
    $active = $jq('.siteNavigation ul li.active');

    var bgColor = $jq('.siteNavigation ul li.active input[name$=menuBg]').val(); // Get current color
    $active.css({ "background-color": "#" + bgColor }); // update menu bg color
    $active.css({ "background": "url(" + imagePath + bgColor + ".png) top left" }); // Update menu images

    $jq('.siteNavigation ul li.active a').css({ "color": "#fff" }); // set active color of hyperlink
    $jq('.siteNavigation ul li.active ul li a').css({ "color": "#999" }); // set active color of hyperlink
    $jq('.siteNavigation ul li.active ul li a:hover').css({ "color": "#777" }); // set active color of hyperlink

    // Full Width color bar
    $jq('#colorBar').css({ "background-color": "#" + bgColor });

    // using id$ -endswith  | using id* - contains -- hidden control has comma delimited string for mediaId,mediaTitle
    var hidValueMainMediaItem = $jq("#[id$=_hidInitValues" + currentReelPosition + "]").attr('Value').split(',');

    // Change url on on the main player button on each slide
    var initLink = broadcastPath + hidValueMainMediaItem[0] + "/" + hidValueMainMediaItem[1] + "/" + hidValueMainMediaItem[2] + "/";
    $jq("[id$='_hypPlayerPlayButton']").attr("href", initLink);


    // Inactivate links to avoid menu bar scrolling faster than carousel
    window.setTimeout(function () {
        allowLeftAndRightClick = 1;
    }, 700);
}


// SET BAR & MENU BACKGROUNDS TO GREY FOR -BLOG/ARTICLES/RESOURCES
function setStaticMenuBar() {
    $jq('#colorBar').css({ "background-color": staticMenuBarColor });

    if (channelId == -2) {
        $activeStatic = $jq('.siteNavigation ul li#blogStaticLink');
        $activeStatic.css({ "background": "url(" + imagePath + "grey_menu.png) top left" }); // Update menu images
        $activeStatic = $jq('.siteNavigation ul li#blogStaticLink .static');
        $activeStatic.css({ "color": "#EAEAEA" });
    }

    if (channelId == -3) {
        $activeStatic = $jq('.siteNavigation ul li#articleStaticLink');
        $activeStatic.css({ "background": "url(" + imagePath + "grey_menu.png) top left" }); // Update menu images
        $activeStatic = $jq('.siteNavigation ul li#articleStaticLink .static');
        $activeStatic.css({ "color": "#EAEAEA" });
    }

    if (channelId == -4) {
        $activeStatic = $jq('.siteNavigation ul li#resourcesStaticLink');
        $activeStatic.css({ "background": "url(" + imagePath + "grey_menu.png) top left" }); // Update menu images
        $activeStatic = $jq('.siteNavigation ul li#resourcesStaticLink .static');
        $activeStatic.css({ "color": "#EAEAEA" });
    }
}

// FUNCTION TO ORGANISE CAROUSEL LIST WHEN NAVIGATING TO A CHANNEL
function SortListOnChannelNavigation() {
   // var testchannelReelPosition = channelReelPosition +1
   // if (channelReelPosition == 5) {
   //     testchannelReelPosition = 0
   // }
   // var reelPosition1 = testchannelReelPosition * imageWidth

    var itemIndex = 0;
    while (itemIndex < channelReelPosition) {

        $jq('#playerList > li:last').after($('#playerList > li:first'));
        itemIndex++;
    }
}