// JavaScript Document


$(document).ready(function() {
	    $("#Subnav1,#Subnav2,#Subnav3,#Subnav4,#Subnav5,#Subnav6,#Subnav7").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);
                    });
                });
            });
            $("#Nav07 a").append("<span class='hot'></span>").each(function () {
	 	        var rollon = $('#Nav07 span.hot').css('opacity', 0);
                $("#Nav07 a,#Subnav7").hover(function () {
                    $("#Subnav7").css('display', 'block');
                    rollon.stop().fadeTo(500, 1);
                    $("#Subnav7").stop().fadeTo(500, 1);
                }, function () {
                    rollon.stop().fadeTo(500, 0);
                    $("#Subnav7").stop().fadeOut(500, function () {
                        $(this).css('display', 'none');
                        $(this).css('opacity', 0);
                    });
                });
            });
            //Main Nav Controls END
            
            					 	
initModalIFrameFromUrl();

	        //DO NOT MOVE ABOVE TABBED SLIDER OR WEIRD BUG
	        if ($('a[class^=modalLink]').length) {
	            initModalBox();
	        }
	        initModalCallbackShow(); //Needed here for close links within iframe
        	
	        function toggleChildShowAll() {
                $('.toggleChild').show();
            }
            $('.toggleChild').hide();    
            $('.toggleParent').click(function(event){
                $(this).next('.toggleChild').slideToggle(200);
            });
            
function initModalIFrameFromUrl() {

    var location = window.location.href; //?modal=/dna/omni&modalsize=800x600
    
    var i = location.indexOf('modal=');
    var j = location.indexOf('?modalsize=');
    
    if (i > -1) {
        var iframeUrl = (j > -1) ? location.substring(i+6,j) : location.substring(i+6);
        var size = (j > -1) ? location.substring(j + 11) : '800x600';

        var dimensions = size.split('x');
        var w = parseInt(dimensions[0]);
        var h = parseInt(dimensions[1]);

        if (!w || !h ) { //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 "]"
                    }
                }
                
                var modalLinks = $('a[class^=modalLink]');
                modalLinks.each(function() {

                    modalLinkGetSize.call(this);
                    
                    $(this).fancybox({ 
                        'hideOnContentClick': 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');  
                }
            }
            function initModalCallbackShow() {
            $(".modalClose").click(function (){ 
                //$.fn.fancybox.close();
                parent.top.$('#fancy_close').trigger('click');
                return false;
            }); 
        }
        function initModalCallbackClose() {
            $("#fancy_content").empty(); //stop flash
            //initFloatNFollow(); 
        }

        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();
	            }
	        }
        }
		
		var agent = navigator.userAgent.toLowerCase();
		// var isIOS = ((agent.indexOf('iphone') != -1 || agent.indexOf('ipad') != -1) ? true : false); // correct version
		var isIOS = ((agent.indexOf('iphone') != -1 || agent.indexOf('ipad') != -1) ? true : false);

		if (isIOS) 
		{
			
			// Get alternate content for non-flash devices
			var alternateContent = $("#alternateContent").html();
			
			// Replace flash content with the alternate content
			$("#flashContent").html(alternateContent);
			
			// alert("Nice iPad, Amy.");
		}
		else 
		{
			// This is not an iOS device, keep the default flash content
			// alert("This is not an iOS device. Move along.");
		}
});