(function($){

var maxTileH = 0,
    bottomRowPos = 0,
    middleRowPos = 0,
    topRowPos = 0,
    scrollWidth = 0,
    firstTimeVisitOverlayShowed = GetCookie('homevideoshown'),
    dev = false,
    lastFocus = [],
    lastTileFocus = [],
    dialogOpen = false,
    myExperience2 = "",
    myExperience3 = "";

$(document).ready(function () {

	 //supersized
    $.supersized({
       slides: [ {image : 'https://c4-cp-hosting.s3.amazonaws.com/annualreport/sites/all/themes/channel4/assets/images/bg-c4-home-V4.jpg', title : 'Image Credit: Maria Kazvan'} ]
    });

    scrollWidth = parseInt(window.innerWidth-$(window).width());

    //tiles on Home Page
    $('.tile-content').hide();

    //On Click
    $('.three-tile-wrap .tile:not(".video-tile, .awards")').click( function (e) {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;

        if ($('body').hasClass('no-animation')) {
            var windowW = $(window).width();

            $('.three-tile-wrap .tile').removeClass('selected');
            $(this).addClass('selected');

            if ($('.tile-content').hasClass('active')) {
                $('.tile-content.active').hide();
                $('.tile-content').removeClass('active');

                var activeTab = $(this).find('.link-overlay').attr('href');
                $(activeTab).slideDown().addClass('active');

                if (windowW > 767) {
                    $('html, body').animate({
                        scrollTop: $(this).offset().top + $(this).height() - 100 //45 = height of sticky header
                    }, 500);
                } else {
                    $('html, body').animate({
                        scrollTop: $(this).offset().top + $(this).height() - 30
                    }, 500);
                }
                calculateTileContentH();
                $('.tile-content').attr('aria-hidden',"true");
                $('.tile-content.active').attr('aria-hidden','false');
            } else {
                var activeTab = $(this).find('.link-overlay').attr('href');
                $(activeTab).slideDown().addClass('active');
                if (windowW > 767) {
                    $('html, body').animate({
                        scrollTop: $(this).offset().top + $(this).height() - 100 //45 = height of sticky header
                    }, 500);
                } else {
                    $('html, body').animate({
                        scrollTop: $(this).offset().top + $(this).height() - 30
                    }, 500);
                }
                calculateTileContentH();
                $('.tile-content').attr('aria-hidden',"true");
                $('.tile-content.active').attr('aria-hidden','false');
            }
        }
    });

    $('.tile-content .btn-close').click(function (e) {
        $(this).parents('.tile-content').slideUp();
        $('.three-tile-wrap .tile').removeClass('selected');
        $('.tile-content').attr('aria-hidden',"true");
    });

    //flexslider
   /* $('.flexslider').flexslider({
        animation: 'fade',
        slideshowSpeed: '5000'
    });*/

    $('.number-tile.glance .flexslider').flexslider({
        animation: 'fade',
        slideshowSpeed: '5000',
        after: function(slider){
            $('.number-tile.glance a.link-overlay').attr('aria-describedby','at-a-glance-slide-' + slider.currentSlide);
        }
    });

    $('.data.number-tile .flexslider').flexslider({
        animation: 'fade',
        slideshowSpeed: '5000',
        after: function(slider){
            $('.number-tile.data a.link-overlay').attr('aria-describedby','the-data-slide-' + slider.currentSlide);
        }
    });

    // height calculation for equivalent two bottom blocks height
    if ($('.home-page .bottom-section .block.awards').height() >= $('.home-page .bottom-section .block.downloads').height()) {
        $('.home-page .bottom-section .block.downloads').height( $('.home-page <div class=""></div>bottom-section .block.awards').height() );
    }
    else {
        $('.home-page .bottom-section .block.awards').height( $('.home-page .bottom-section .block.downloads').height() );
    }

    var windowW = $(window).width();

   if (windowW < (767 + scrollWidth)) {
        setTimeout(function() {
            $('body').removeClass('animation');
            $('body').addClass('no-animation');
        }, 100);

        initBrightcoveVideo();
    }

    $('.header .bottom-header .menu').click(function() {
        calculateHeight();
    });

    // close button "explore" fpr first time explore message overlay modal
    $('.explore-btn').click(function(){
        $.fancybox.close();
    });
});

$(window).load(function () {
    calculateHeight();

    window.addEventListener('resize', calculateHeight);
    window.addEventListener('resize', calculateTileContentH);

    var browserInfo = detectBrowser();
    var osInfo = detectOS();
    var isiPad = navigator.userAgent.match(/iPad/i) != null;
    var isSafariOnWin = ( osInfo == 'Windows' && browserInfo && browserInfo.browser == 'Safari' && browserInfo.majorVersion == 5 );
    var vid = document.getElementById("video1");
    var animationDelay = 1000;

    if(detectBrowser().browser == "Chrome"){
        animationDelay = 2000;
    }

    if(firstTimeVisitOverlayShowed == null ) { // If it first time on Homepage, just play animation without video
        /*if( isiPad || isSafariOnWin ){
            playAnimation();
        } else {

			function videoOnPlay() {

                setTimeout(function () {
                    playAnimation();
                }, animationDelay);
                //console.log("The current playback position is " + vid.currentTime + " seconds.");
            }

            vid.addEventListener("play", videoOnPlay);

        }*/

        playAnimation();
    } else {
       /* if (!(isiPad || isSafariOnWin)) {
            vid.play();
        }  else {
            $('#video1').hide();
        }
*/
        //setTimeout(function () {
            playAnimation();
        //}, animationDelay);
    }

    // On video ended, hide video
    $("video").bind("ended", function() {
        $('video').hide();
    });

    // Remember last focused element
    $('a:not(#fancybox-close, #closePopupCEO, #closePopup)').focus(function() {
        if(dev){
            console.log('Last focus:');
            console.log($(this).text() + '|' + $(this).attr('class'));
        }

        lastFocus = $(this);
    });

    // Remember last focused tile
    $('a.link-overlay, .view-home-tile-video a.link-overlay-video').focus(function(){
        if(dev) {
            console.log('Last Tile Focus:');
            console.log($(this).text());
        }

        lastTileFocus = $(this);
    });

    // On tile click, focus it's content
    $('.tile').on('click', function(e){
        var contentTileId = $(this).find('.link-overlay:eq(0)').attr('href');
        $(contentTileId).find('a:eq(0)').focus();
    });

    // On close button click, get focus back to tile
    $('.btn-close').on('click', function(e){
        lastTileFocus.focus();
    });

    // Add dialog role, aria-label and tabindex to Fancybox
    $('#fancybox-content').attr('role','dialog').attr('aria-label',"Video pop up").attr('tabindex','-1');

    // Catching all focus event. If dialog is open, trap focus inside of dialog.
    document.addEventListener("focus", trapFocusOnFancyboxPopup, true);
});

// Function used for trapping focus on fancybox.
function trapFocusOnFancyboxPopup(event){
    var dialog = document.getElementById("fancybox-content");

    if (dialogOpen && !dialog.contains(event.target)) {
        event.stopPropagation();
        dialog.focus();
    }
}

// Function used for trapping focus on fancybox for explore now dialog box.
function trapFocusOnFancyboxPopupExploreNow(event){
    var dialog = document.getElementById("explore-now-button");

    if (dialogOpen && !dialog.contains(event.target)) {
        event.stopPropagation();
        dialog.focus();
    }
}

// Inits Brightcove videos
function initBrightcoveVideo(){
    brightcove.createExperiences();

     // Home page video tile Popup video
    $(".link-overlay-video").not('.jsVideoMobilePlayButton').fancybox({
        'width'             : '75%',
        'height'            : '75%',
        'autoScale'         : true,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        //'type'              : 'iframe'
        onComplete: function () {
            // Close popup CEO focus handler
            $('#fancybox-content').on('focus', '#closePopup', function(e){
                if(dev){
                    console.log('Focus ClosePopup')
                }
            });

            // Close popup CEO click handler
            $('#fancybox-content').on('click', '#closePopup', function(e){
                if(dev){
                    console.log('Click ClosePopup');
                }

                $('#fancybox-close').click();
                lastFocus.focus();
            });

            $('#fancybox-content #closePopup').focus();
        },
        onStart:function (){
            // Set flag for dialog open (Used by focus trapper)
            dialogOpen = true;
        },
        onCleanup:function (){
            // Remove handlers from close link
            $('#closePopup').off();
            $('#closePopup').unbind();
        },
        onClosed: function(){
            // Set flag for dialog open (Used by focus trapper)
            dialogOpen = false;

            // Revert focus to tile
            if(lastTileFocus.length) {
                // Revert focus to tile
                lastTileFocus.focus();
            }

            if(myExperience3 != "") {
                $('#myExperience3').attr('src', myExperience3);
            }
        }
    });

    // For mobile, don't show popup, just redirect to video
    if( $(window).width() > 768) {
        // Video CEO section
        $(".btn.play-video").fancybox({
            'width': '75%',
            'height': '75%',
            'autoScale': true,
            'transitionIn': 'none',
            'transitionOut': 'none',
            //'type'              : 'iframe',
            onComplete: function () {
                // Close popup CEO focus handler
                $('#fancybox-content').on('focus', '#closePopupCEO', function (e) {
                    if (dev) {
                        console.log('Focus ClosePopupCEO')
                    }
                });

                // Close popup CEO click handler
                $('#fancybox-content').on('click', '#closePopupCEO', function (e) {
                    if (dev) {
                        console.log('++++ Click ClosePopupCEO');
                    }

                    $('#fancybox-close').click();
                    lastFocus.focus();
                });

                $('#fancybox-content #closePopupCEO').focus();
            },
            onStart: function () {
                // Set flag for dialog open (Used by focus trapper)
                dialogOpen = true;
            },
            onCleanup: function () {
                // Remove handlers from close link
                $('#closePopupCEO').off();
                $('#closePopupCEO').unbind();
            },
            onClosed: function () {
                // Set flag for dialog open (Used by focus trapper)
                dialogOpen = false;
                // Revert focus to tile
                lastFocus.focus();

                if (myExperience2 != "") {
                    $('#myExperience2').attr('src', myExperience2);
                }
            }
        });
    } else {
        if($('.mobile .btn.play-video').length){
            var ceoVideoId = $('.mobile .btn.play-video:eq(0)').attr('data')
            var ceoVideoLink = 'http://c.brightcove.com/services/viewer/htmlFederated?&flashID=myExperience3&bgcolor=%23FFFFFF&playerID=2336158673001&playerKey=AQ~~%2CAAACGWewvVE~%2C-r7pImjJzCC-geL837iZ_Lp9O8irFA4Q&isVid=true&isUI=true&dynamicStreaming=true&%40videoPlayer=' + ceoVideoId + '&seamlessTabbing=true&flashvars=preventDefault%3Dfalse%26';

            $('.mobile .btn.play-video:eq(0)').attr('href', ceoVideoLink);
        }
    }

    // Remember src link, that is lost by popup destroy.
    $('.tile-content.ceo .btn.play-video').click(function(e){
        myExperience2 = $('#myExperience2').attr('src');
    });

    // Remember src link, that is lost by popup destroy.
    //$('.tile.video-tile .video-iframe.link-overlay-video').click(function(e){
    $('.tile.video-tile .link-overlay-video').click(function(e){
        myExperience3 = $('#myExperience3').attr('src');
    });
}

function playAnimation(){
    if(dev){console.log("playAnimation");}

	var windowW = $(window).width();

	if (windowW > (1279 - scrollWidth)) {
        startAnimationDesktop();
	} else {
        startAnimationTablet();
	}
}

// Cookies Functions
function SetCookie(a) {
	var b = 1;
	var d = new Date();

	d.setFullYear(d.getFullYear() + 1);
	var e = "; expires=" + d.toGMTString();
	document.cookie = a + "=" + b + e + "; path=/";
}

function GetCookie(a) {
	var b = a + "=";
	var c = document.cookie.split(";");
	for (var d = 0; d < c.length; d++) {
		var e = c[d];
		while (e.charAt(0) == " ") {
			e = e.substring(1, e.length);
		}

		if (e.indexOf(b) == 0) {
			return e.substring(b.length, e.length);
		}
	}
	return null;
}

function calculateInnerWrapWidth() {
    var wrapperW = $('.wrapper').width(),
        windowW = $(window).width();

    if (windowW > (1279 - scrollWidth)) {
        if ($('html').hasClass('js-nav')) {
            $('.inner-wrap').width(wrapperW - 300);
            $('.header-links').width(windowW - 300);
        } else {
            $('.inner-wrap').width(wrapperW);
            $('.header-links').width(windowW);
        }
    } else {
        var mainMenuW = $('.main-menu').width();
        if ($('html').hasClass('js-nav')) {
            $('.header-links').width(windowW - mainMenuW);
        } else {
            $('.header-links').width(windowW);
        }
    }
}

function calculateHeight() {
    var $images = $('.three-tile-wrap .tile.image'),
        maxH = 0;

    $images.each(function (index) {
        var $currentImg = $(this).find('img'),
            currentH = 0;

        currentH = $currentImg.outerHeight(true);

        if (maxH < currentH) {
            maxH = currentH
        }

    });

    $('.three-tile-wrap .tile').height(maxH);
    if (maxTileH < maxH) {
        maxTileH = maxH + 2;
    }
}

function calculateTileContentH() {
    var $cols = $('.three-tile-wrap .tile-content .left:visible, .three-tile-wrap .tile-content .right:visible'),
        maxH = 0;

    $cols.each(function (index) {
        var $this = $(this),
            totalH = 0;

        $this.children().each(function () {
            var $self = $(this);
            if (!($self.css('position') == 'absolute')) {
                totalH += $self.outerHeight(true);
            }
        });

        if (maxH < totalH) {
            maxH = totalH
        }
    });

    $('.three-tile-wrap .tile-content .left:visible').height(maxH);
    $('.three-tile-wrap .tile-content .right:visible').height(maxH);
}

// desktop animation
function startAnimationDesktop() {
    if(dev){console.log("startAnimationDesktop");}

    var windowH = $('.wrapper > .inner-wrap').height(),
        bottomSectionH = $('.bottom-section').height(),
        //duration = 300,
        duration = 1200,
        wait = 300;

    calculateHeight();

    bottomRowPos = windowH - bottomSectionH - maxTileH;
    middleRowPos = windowH - bottomSectionH - 2*maxTileH;
    topRowPos = windowH - bottomSectionH - 3*maxTileH;

    jQuery.fx.interval = 1;

    $('.page-title').fadeIn(600);

    setTimeout(function() {
        $('.logo').fadeIn(600);
    }, 100);

    /*setTimeout(function() {
        $('.three-tile-wrap .desktop .tile.video-tile').removeClass('selected');
    }, 1500);*/

    var initHiddenTileTop = -600;
    var initHiddenTileDiff = -300;

    $('.desktop .tile.spotlights').css({top: initHiddenTileTop + (initHiddenTileDiff * 0) });
    $('.desktop .tile.data').css({top: initHiddenTileTop + (initHiddenTileDiff * 1) });
    $('.desktop .tile.financials').css({top: initHiddenTileTop + (initHiddenTileDiff * 2) });
    $('.desktop .tile.programmes').css({top: initHiddenTileTop + (initHiddenTileDiff * 3) });
    $('.desktop .tile.video-tile').css({top: initHiddenTileTop + (initHiddenTileDiff * 4) });
    $('.desktop .tile.forward-look').css({top: initHiddenTileTop + (initHiddenTileDiff * 5) });
    $('.desktop .tile.remit').css({top: initHiddenTileTop + (initHiddenTileDiff * 6) });
    $('.desktop .tile.glance').css({top: initHiddenTileTop + (initHiddenTileDiff * 7) });
    $('.desktop .tile.ceo').css({top: initHiddenTileTop + (initHiddenTileDiff * 8) });

    animateBox('.spotlights', bottomRowPos, duration, 'desktop');
    animateBox('.data', bottomRowPos, duration, 'desktop');
    animateBox('.financials', bottomRowPos, duration, 'desktop');
    animateBox('.programmes', middleRowPos, duration, 'desktop');
    animateBox('.video-tile', middleRowPos, duration, 'desktop');
    animateBox('.forward-look', middleRowPos, duration, 'desktop');
    animateBox('.remit', topRowPos, duration, 'desktop');
    animateBox('.glance', topRowPos, duration, 'desktop');
    animateBox('.ceo', topRowPos, duration, 'desktop', function(){
        $('body').removeClass('animation').addClass('no-animation');
        calculateInnerWrapWidth();
        maxTileH = 0;
        calculateHeight();
        $('video').remove();

        if(firstTimeVisitOverlayShowed == null ) {
            SetCookie('homevideoshown');
            $(".hidden-link").fancybox({
                'modal': true,
                padding: 0,
                'onStart': function () {
                    $("#fancybox-overlay").addClass("intro-message");
                    dialogOpen = true;
                },
                'onComplete': function (){
                    $('a.explore-btn:eq(0)').focus();
                    document.addEventListener("focus", trapFocusOnFancyboxPopupExploreNow, true);
                    $('#fancybox-content > div:eq(0)').css('overflow','hidden !important');
                },
                'onClosed': function(){
                    dialogOpen = false;
                    document.removeEventListener("focus", trapFocusOnFancyboxPopupExploreNow, true);
                }
            }).trigger('click');
        }

        initBrightcoveVideo();
    });
}

// tablet animation
function startAnimationTablet() {
    if(dev){console.log("startAnimationTablet");}

    var windowH = $('.wrapper > .inner-wrap').height(),
        bottomSectionH = $('.bottom-section').height(),
        cookieH = $('#all4nav-cookie-policy-notification').height(),
        additionalHeaderH = $('.all4nav-header-placeholder').height(),
        headerH = $('.header').outerHeight(),
        //duration = 300,
        duration = 800,
        wait = 300;

    calculateHeight();

    if (maxTileH > 250) {
        maxTileH = 250
    }

    var fifthRow = windowH - bottomSectionH - maxTileH;
    var forthRow = windowH - bottomSectionH - 2*maxTileH;
    var thirdRow = windowH - bottomSectionH - 3*maxTileH;
    var secondRow = windowH - bottomSectionH - 4*maxTileH;
    var firstRow = windowH - bottomSectionH - 5*maxTileH;

    $('.page-title').fadeIn(600);

    setTimeout(function() {
        $('.logo').fadeIn(600);
    }, 300);

    var initHiddenTileTop = -600;
    var initHiddenTileDiff = -400;

    // Order tiles before animation
    $('.tablet .tile.financials').css({top: initHiddenTileTop + (initHiddenTileDiff * 0) });
    $('.tablet .tile.awards').css({top: initHiddenTileTop + (initHiddenTileDiff * 1) });
    $('.tablet .tile.spotlights').css({top: initHiddenTileTop + (initHiddenTileDiff * 2) });
    $('.tablet .tile.data').css({top: initHiddenTileTop + (initHiddenTileDiff * 3) });
    $('.tablet .tile.video-tile').css({top: initHiddenTileTop + (initHiddenTileDiff * 4) });
    $('.tablet .tile.forward-look').css({top: initHiddenTileTop + (initHiddenTileDiff * 5) });
    $('.tablet .tile.ceo').css({top: initHiddenTileTop + (initHiddenTileDiff * 6) });
    $('.tablet .tile.programmes').css({top: initHiddenTileTop + (initHiddenTileDiff * 7) });
    $('.tablet .tile.remit').css({top: initHiddenTileTop + (initHiddenTileDiff * 8) });
    $('.tablet .tile.glance').css({top: initHiddenTileTop + (initHiddenTileDiff * 9) });

    animateBox('.financials', fifthRow, duration, 'tablet');
    animateBox('.awards', fifthRow, duration, 'tablet');
    animateBox('.spotlights', forthRow, duration, 'tablet');
    animateBox('.data', forthRow, duration, 'tablet');
    animateBox('.video-tile', thirdRow, duration, 'tablet');
    animateBox('.forward-look', thirdRow, duration, 'tablet');
    animateBox('.ceo', secondRow, duration, 'tablet');
    animateBox('.programmes', secondRow, 'tablet');
    animateBox('.remit', firstRow, duration, 'tablet');
    animateBox('.glance', firstRow, duration, 'tablet', function(){
        $('body').removeClass('animation').addClass('no-animation');

        if(firstTimeVisitOverlayShowed == null ) {
            SetCookie('homevideoshown');

            $(".hidden-link").fancybox({
                'modal': true,
                padding: 0,
                'onStart': function () {
                    $("#fancybox-overlay").addClass("intro-message");
                }
            }).trigger('click');
        }

        initBrightcoveVideo();
    });
}

// Main animation function
function animateBox(className, position, duration, version, callback) {
    $('.three-tile-wrap .' + version + ' .tile' + className).velocity({
        top: position
    }, {
        duration: duration,
        easing: 'easeOutCubic',
        complete: callback
    });
}

function detectBrowser (){
	var nVer = navigator.appVersion;
	var nAgt = navigator.userAgent;
	var browserName  = navigator.appName;
	var fullVersion  = ''+parseFloat(navigator.appVersion);
	var majorVersion = parseInt(navigator.appVersion,10);
	var nameOffset,verOffset,ix;

	// In Opera, the true version is after "Opera" or after "Version"
	if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
	 browserName = "Opera";
	 fullVersion = nAgt.substring(verOffset+6);
	 if ((verOffset=nAgt.indexOf("Version"))!=-1)
	   fullVersion = nAgt.substring(verOffset+8);
	}
	// In MSIE, the true version is after "MSIE" in userAgent
	else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
	 browserName = "Microsoft Internet Explorer";
	 fullVersion = nAgt.substring(verOffset+5);
	}
	// In Chrome, the true version is after "Chrome"
	else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
	 browserName = "Chrome";
	 fullVersion = nAgt.substring(verOffset+7);
	}
	// In Safari, the true version is after "Safari" or after "Version"
	else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
	 browserName = "Safari";
	 fullVersion = nAgt.substring(verOffset+7);
	 if ((verOffset=nAgt.indexOf("Version"))!=-1)
	   fullVersion = nAgt.substring(verOffset+8);
	}
	// In Firefox, the true version is after "Firefox"
	else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
	 browserName = "Firefox";
	 fullVersion = nAgt.substring(verOffset+8);
	}
	// In most other browsers, "name/version" is at the end of userAgent
	else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) <
			  (verOffset=nAgt.lastIndexOf('/')) )
	{
	 browserName = nAgt.substring(nameOffset,verOffset);
	 fullVersion = nAgt.substring(verOffset+1);
	 if (browserName.toLowerCase()==browserName.toUpperCase()) {
	  browserName = navigator.appName;
	 }
	}
	// trim the fullVersion string at semicolon/space if present
	if ((ix=fullVersion.indexOf(";"))!=-1)
	   fullVersion=fullVersion.substring(0,ix);
	if ((ix=fullVersion.indexOf(" "))!=-1)
	   fullVersion=fullVersion.substring(0,ix);

	majorVersion = parseInt(''+fullVersion,10);
	if (isNaN(majorVersion)) {
	 fullVersion  = ''+parseFloat(navigator.appVersion);
	 majorVersion = parseInt(navigator.appVersion,10);
	}

	/*console.log(''
	 +'Browser name  = '+browserName+'<br>'
	 +'Full version  = '+fullVersion+'<br>'
	 +'Major version = '+majorVersion+'<br>'
	 +'navigator.appName = '+navigator.appName+'<br>'
	 +'navigator.userAgent = '+navigator.userAgent+'<br>'
	);*/

	return { browser: browserName,
				fullVersion: fullVersion,
				majorVersion: majorVersion
				};
}

function detectOS () {
	var OSName="Unknown OS";
	if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
	if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
	if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
	if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

	//console.log('Your OS: '+OSName);
	return OSName;
}

})(jQuery);