// JavaScript Document

var enableScrollToTabs = true;



$(document).ready(function () {
    $("#Subnav1,#Subnav2,#Subnav3,#Subnav4,#Subnav5,#Subnav6").css('opacity', 0);
    //Main Nav Controls   						  
    $("#Nav01 a").append("<span class='hot'></span>").each(function () {
        var rollon = $('#Nav01 span.hot').css('opacity', 0);
        $("#Nav01 a,#Subnav1").hover(function () {
            $("#Subnav1").css('display', 'block');
            rollon.stop().fadeTo(500, 1);
            $("#Subnav1").stop().fadeTo(500, 1);
        }, function () {
            rollon.stop().fadeTo(500, 0);
            $("#Subnav1").stop().fadeOut(500, function () {
                $(this).css('display', 'none');
                $(this).css('opacity', 0);
            });
        });
    });
    $("#Nav02 a").append("<span class='hot'></span>").each(function () {
        var rollon = $('#Nav02 span.hot').css('opacity', 0);
        $("#Nav02 a,#Subnav2").hover(function () {
            $("#Subnav2").css('display', 'block');
            rollon.stop().fadeTo(500, 1);
            $("#Subnav2").stop().fadeTo(500, 1);
        }, function () {
            rollon.stop().fadeTo(500, 0);
            $("#Subnav2").stop().fadeOut(500, function () {
                $(this).css('display', 'none');
                $(this).css('opacity', 0);
            });
        });
    });
    $("#Nav03 a").append("<span class='hot'></span>").each(function () {
        var rollon = $('#Nav03 span.hot').css('opacity', 0);
        $("#Nav03 a,#Subnav3").hover(function () {
            $("#Subnav3").css('display', 'block');
            rollon.stop().fadeTo(500, 1);
            $("#Subnav3").stop().fadeTo(500, 1);
        }, function () {
            rollon.stop().fadeTo(500, 0);
            $("#Subnav3").stop().fadeOut(500, function () {
                $(this).css('display', 'none');
                $(this).css('opacity', 0);
            });
        });
    });
    $("#Nav04 a").append("<span class='hot'></span>").each(function () {
        var rollon = $('#Nav04 span.hot').css('opacity', 0);
        $("#Nav04 a,#Subnav4").hover(function () {
            $("#Subnav4").css('display', 'block');
            rollon.stop().fadeTo(500, 1);
            $("#Subnav4").stop().fadeTo(500, 1);
        }, function () {
            rollon.stop().fadeTo(500, 0);
            $("#Subnav4").stop().fadeOut(500, function () {
                $(this).css('display', 'none');
                $(this).css('opacity', 0);
            });
        });
    });
    $("#Nav05 a").append("<span class='hot'></span>").each(function () {
        var rollon = $('#Nav05 span.hot').css('opacity', 0);
        $("#Nav05 a,#Subnav5").hover(function () {
            $("#Subnav5").css('display', 'block');
            rollon.stop().fadeTo(500, 1);
            $("#Subnav5").stop().fadeTo(500, 1);
        }, function () {
            rollon.stop().fadeTo(500, 0);
            $("#Subnav5").stop().fadeOut(500, function () {
                $(this).css('display', 'none');
                $(this).css('opacity', 0);
            });
        });
    });
    $("#Nav06 a").append("<span class='hot'></span>").each(function () {
        var rollon = $('#Nav06 span.hot').css('opacity', 0);
        $("#Nav06 a,#Subnav6").hover(function () {
            $("#Subnav6").css('display', 'block');
            rollon.stop().fadeTo(500, 1);
            $("#Subnav6").stop().fadeTo(500, 1);
        }, function () {
            rollon.stop().fadeTo(500, 0);
            $("#Subnav6").stop().fadeOut(500, function () {
                $(this).css('display', 'none');
                $(this).css('opacity', 0);
            });
        });
    });
    //Main Nav Controls END






    function toggleChildShowAll() {
        $('.toggleChild').show();
    }
    $('.toggleChild').hide();
    $('.toggleParent').click(function (event) {
        $(this).next('.toggleChild').slideToggle(200);
    });



    function initTabbedSlider() {

        var $panels = $('[class^=tabbedSlider] .scrollContainer > div.tabsPanel');
        var $container = $('[class^=tabbedSlider] .scrollContainer');
        var $tabs = $('[class^=tabbedSlider] .tabs a');

        // if false, we'll float all the panels left and fix the width of the container
        var horizontal = true;
        if (horizontal) {
            $panels.css({
                'float': 'left',
                'position': 'relative' // IE fix to ensure overflow is hidden
            });

            // calculate a new width for the container (so it holds all panels)
            $container.css('width', $panels[0].offsetWidth * $panels.length);
        }

        // collect the scroll object, at the same time apply the hidden overflow
        var $scroll = $('[class^=tabbedSlider] .scroll').css('overflow', 'hidden');

        // handle nav selection
        function selectNav() {

            $tabs.removeClass('selected');
            $(this).addClass('selected');
        }
        $tabs.click(selectNav);

        // go find the tabs link that has this target and select the nav
        function trigger(data) {
            var el = $('[class^=tabbedSlider] .tabs').find('a[href$="' + data.id + '"]').get(0);
            selectNav.call(el);
        }

        // offset is used to move to *exactly* the right place, since I'm using
        // padding on my example, I need to subtract the amount of padding to
        // the offset.  Try removing this to get a good idea of the effect
        var offset = parseInt((horizontal ?
        $container.css('paddingTop') :
        $container.css('paddingLeft'))
        || 0) * -1;

        var scrollOptions = {
            target: $scroll,    // the element that has the overflow
            items: $panels,     // can be a selector which will be relative to the target
            tabs: $tabs,

            // selectors are NOT relative to document, i.e. make sure they're unique
            prev: 'img.left',
            next: 'img.right',

            axis: 'xy',         // allow the scroll effect to run both directions
            onAfter: trigger,   // our final callback
            offset: offset,
            duration: 500,      // duration of the sliding effect

            // easing - can be used with the easing plugin: 
            // http://gsgd.co.uk/sandbox/jquery/easing/
            easing: 'swing'
        };

        // apply serialScroll to the slider - we chose this plugin because it 
        // supports the indexed next and previous scroll along with hooking 
        // in to our tabs.
        $('.slider').serialScroll(scrollOptions);
        // apply localScroll to hook any other arbitrary links to trigger the effect
        $.localScroll(scrollOptions);
        // if the URL has a hash, move the slider in to position, 
        // setting the duration to 1 to hide scroll effect on the
        // very first page load.  We don't always need this, but it ensures
        // the positioning is absolutely spot on when the pages loads.
        scrollOptions.duration = 1;
        $.localScroll.hash(scrollOptions);

        //adjust tab panel height dynamically
        function animateHeight() {
            // var nextPanelID = $(this).attr('href');
            var urlBits = $(this).attr('href').split('#');
            var nextPanelID = '#' + urlBits[1];
            var nextPanelHeight = $(nextPanelID).height();
            $scroll.animate({
                height: (nextPanelHeight + 40)
            });

            if (enableFloatNFollow) {
                //if changing tab panel height and there is a floated box, make sure to adjust as necessary
                var scrollBottom = $(this).offset().top + $(this).height() + nextPanelHeight;
                var fNf = $('#floatNFollow');
                if (fNf.length) {
                    var fNfBottom = fNf.offset().top + fNf.height();
                    if (scrollBottom < fNfBottom)
                        fNf.animate({ top: $(this).offset().top - 200 }, { duration: 500, queue: false });
                }
            }
        }

        $tabs.click(function () {
            animateHeight.call(this);
        });
        $('[class^=tabbedSlider] .tabsLink').click(function () {
            animateHeight.call(this);
        });

        //SELECT DEFAULT TAB
        //Priority:
        //1. Url hash
        //2. Tab with class="selected"
        //3. Tab panel with id="tabs_panel_default"
        //4. First tab
        if (location.hash.length > 1) {
            trigger({ id: location.hash.substr(1) });
            $.scrollTo('[class^=tabbedSlider] .tabs', { duration: 400 });
        } else {
            var defaultSelected = $('[class^=tabbedSlider] .tabs a.selected');
            if (defaultSelected.length) {
                defaultSelected.click();
            }
            else {
                defaultSelected = $('#tabs_panel_default');
                if (defaultSelected.length == 0) {
                    $('[class^=tabbedSlider] .tabs a:first').click();
                }
                else {
                    $scroll.animate({
                        height: (defaultSelected.height() + 40)
                    });
                }
            }
        }

        if ($('#tabsPartialBorder').length) {
            var partialBorder = $('#tabsPartialBorder');
            var tabs = $('[class^=tabbedSlider] ul.tabs a');
            if (tabs.length < 6) {
                var tabsWidth = 0, leftMargin = 0, rightMargin = 0;
                tabs.each(function () {
                    leftMargin = parseInt($(this).css("margin-left"));
                    rightMargin = parseInt($(this).css("margin-right"));
                    tabsWidth += $(this).width() + leftMargin + rightMargin;
                });

                partialBorder.css('left', tabsWidth + parseInt(partialBorder.css('left')));
                partialBorder.css('width', partialBorder.width() - tabsWidth);
            }
            else {
                partialBorder.hide();
            }
        }
    }

    ////////////////////
    //  Tab controls  //
    ////////////////////

    jQuery('.one').click(function () {
        var clicked = $(this);

        // Select the current tab
        var tabLinks = clicked.parent().parent().children('li').children('a');
        tabLinks.removeClass('selected');
        clicked.addClass('selected');

        // Turn the corresponding tab body on
        var tabsParent = clicked.parent().parent().parent();
        tabsParent.children().removeClass('On');
        tabsParent.children('.tabOne').addClass('On');
    });
    jQuery('.two').click(function () {
        var clicked = $(this);

        // Select the current tab
        var tabLinks = clicked.parent().parent().children('li').children('a');
        tabLinks.removeClass('selected');
        clicked.addClass('selected');

        // Turn the corresponding tab body on
        var tabsParent = clicked.parent().parent().parent();
        tabsParent.children().removeClass('On');
        tabsParent.children('.tabTwo').addClass('On');
    });








    function initModalIFrameFromUrl() {

        var location = window.location.href; //?modal=/dna/omni&modalsize=800x600

        var i = location.indexOf('modal=');
        var j = location.indexOf('%26modalsize=');
        var k = location.indexOf('&modalsize=');
        if (i > -1) {
            var iframeUrl = (j > -1) ? location.substring(i + 6, j) : location.substring(i + 6);


            //new code
            var ampersandExist = iframeUrl.indexOf('&modalsize=');

            if (ampersandExist > -1) {
                var ampersandLocation = iframeUrl.split('&');
                var ampersandPre = ampersandLocation[0];
                var ampersandPost = ampersandLocation[1];
                var iframeUrl = ampersandPre;

            }

            if (j > -1) {
                var size = location.substring(j + 13);
            }

            else if (k > -1) {
                var size = location.substring(k + 11);
                

            }

            else {
                var size = '800x600';
                
            }

            //old code
            //var size = (j > -1) ? location.substring(j + 13) : '800x600';

            var dimensions = size.split('x');
            var w = parseInt(dimensions[0]);
            var h = parseInt(dimensions[1]);
            if (!w || !h || (w > 960) || (h > 760)) { //validate size
                w = 800;
                h = 600;
            }
            var modalClass = "modalLink[" + w + "," + h + "]";

            //validate url is coming from everygenome or else we do not display modal!!!

            if (iframeUrl.length > 1 &&
            (iframeUrl.indexOf('http://www.everygenome.com') == 0
            || iframeUrl.indexOf('https://icom.everygenome.com') == 0)
            || iframeUrl.indexOf('/') == 0) {

                var ch = (iframeUrl.indexOf('?') > -1) ? '&' : '?';
                var modalLink = "<a id='modalIFrameFromUrl' href='http://www.everygenome.com" + iframeUrl + ch + "iframe' class='" + modalClass + "'></a>";

                $('body').append(modalLink);

            }
        }

        /*var location = window.location.href; //?modal=/dna/omni&modalsize=800x600
        var i = location.indexOf('modal=');
        var j = location.indexOf('%26modalsize=');
        if (i > -1) {
        var iframeUrl = (j > -1) ? location.substring(i+6,j) : location.substring(i+6);
        var size = (j > -1) ? location.substring(j+13) : '800x600';
        var dimensions = size.split('x');
        var w = parseInt(dimensions[0]);
        var h = parseInt(dimensions[1]);
        if (!w || !h || (w > 960) || (h > 760)) { //validate size
        w = 800;
        h = 600;
        }
        var modalClass = "modalLink[" + w + "," + h + "]";
        
        //validate url is coming from illumina or else we do not display modal!!!
        if (iframeUrl.length > 1 && 
        (iframeUrl.indexOf('http://www.illumina.com') == 0 
        || iframeUrl.indexOf('https://icom.illumina.com') == 0)
        || iframeUrl.indexOf('/') == 0) {
        
        var ch = (iframeUrl.indexOf('?') > -1) ? '&' : '?';
        var modalLink = "<a id='modalIFrameFromUrl' href='" + iframeUrl + ch + "iframe' class='" + modalClass + "'></a>";
        $('body').append(modalLink); 
        }          
        }*/
    }

    function initModalBox() {
        var speed = 1;
        var showOverlay = true;
        var opacity = 0.30;

        var modalWidth;

        var modalHeight;
        function modalLinkGetSize() {
            var classVal = $(this).attr('class');

            if (classVal.length == 9) { //use default
                modalWidth = 800;
                modalHeight = 600;
            }
            else {
                var widthByHeight = $(this).attr('class').substring(10); //class="modalLink[width,height]"
                var dimensions = widthByHeight.split(',');
                modalWidth = parseInt(dimensions[0]);
                modalHeight = parseInt(dimensions[1].substring(0, dimensions[1].length - 1)); //remove last "]"

            }
        }

        function initModalCallbackShow() {
            $(".modalClose").click(function () {
                //$.fn.fancybox.close();
                parent.top.$('#fancy_close').trigger('click');
                return false;
            });
        }

        function initModalCallbackClose() {
            $("#fancy_content").empty(); //stop flash
            //initFloatNFollow(); 
        }


        var modalLinks = $('a[class^=modalLink]');
        modalLinks.each(function () {

            modalLinkGetSize.call(this);

            //'centerOnScroll': false,
            $(this).fancybox({
                'hideOnContentClick': false,
                'centerOnScroll': false,
                'zoomSpeedIn': speed,
                'zoomSpeedOut': speed,
                'overlayShow': showOverlay,
                'overlayOpacity': opacity,
                'frameWidth': parseInt(modalWidth),
                'frameHeight': parseInt(modalHeight),
                'callbackOnShow': initModalCallbackShow,
                'callbackOnClose': initModalCallbackClose //on modal close, the window scroll listener seems disabled - reenable
            });
        });

        //if "#name" is passed in the url, trigger link with id=name or href=#name
        var modalIFrameFromUrl = $('#modalIFrameFromUrl');
        if (modalIFrameFromUrl.length) {
            $('#modalIFrameFromUrl').trigger('click');
        }
        else if (location.hash.length > 1) { //page.ilmn#shortcut
            var linkID = $('a' + location.hash + '[class^=modalLink]'); //check id
            if (linkID.length == 0)
                linkID = $('a[href$=' + location.hash + '][class^=modalLink]'); //check href (used for hidden divs)
            if (linkID.length)
                linkID.trigger('click');
        }
    }



    initModalIFrameFromUrl();

    if ($('a[class^=modalLink]').length) {
        initModalBox();
    }

    initModalCallbackShow();






});