/* HERO CAROUSEL FUNCTIONS & CALLBACKS */

var heroPos = 0;
var heroLink = 'item0';
var htmlUrl = '';
var themeName = ''

/* FUNCTION FOR VIDEO STEPS */
function remove2VideoDivs() {
    $('#hero .hero-panel-Sintro, #hero .hero-panel-Svideo').hide();
    $('#hero .hero-panel-Splayed').show();
}

function hero_initCallback(carousel) {       

    //Event when user clicks on the right hang side links
    $('#hero-slider ul.mod-sliderLinks a, #hero-slider ul.mod-sliderLinks a strong, #hero-slider ul.mod-sliderLinks a span').hover(function () {
        carousel.startAuto(0);
        $('#hero-slider ul a').removeClass('active');
        el = $(this);
        if (!$(this).attr('rel')) {
            el = $(this).parent();
        }
        //set current item as active
        $(el).addClass('active');
        //find the clicked item position
        heroPos = '-' + $(el).attr('rel').replace('item', '') + 'px';
        //set the position for clicked item        
        $('#hero').animate({ top: heroPos }, 0);
        //refire step 1 for all videos
        $('.hero-panel-Sintro').show();
        $('.hero-panel-Svideo,.hero-panel-Splayed').hide();        
        sliderLinksHeightFix();
        //disable click event                        
        return false;
    });    


    //When using tab and focusing on any hero element, the autoscroll will be turned off and related link will be active
    $('#hero-slider li.panel a').focus(
       function () {
           carousel.startAuto(0);
           heroLink = $(this).closest('li.panel').attr('id');           
           $('.mod-sliderLinks li a').attr('class', '');
           $('.mod-sliderLinks li a[rel=' + heroLink + ']').attr('class', 'active');
       }
    );
    //When using tab and focusing on FIRST hero element, this element will be displayed
    $('#hero-slider li#item0 a').focus(
       function () {
           $('#hero').css('top','0px');
       }
    )    

    $('.mod-hero #hero-slider .slider-body ul li.panel, .mod-hero #hero-slider .slider-body ul li.panel object').click(
       function () {
          carousel.startAuto(0);
       }
    );

    // Pause autoscrolling if the user moves with the cursor over the clip. Disabled mouseover stop and start, added pause and play buttons
    carousel.clip.hover(function () {
        carousel.stopAuto();
    }, function () {
        carousel.startAuto();
    });



    
    // HERO SHOW HIDE VIDEO
    $('.playVideo').click(function () {        
        carousel.startAuto(0);
        var actualElement = $(this).closest('li.panel').attr('id');
        $('#' + actualElement + ' .hero-panel-Svideo').show('slow', function () {
            $('#' + actualElement + ' .hero-panel-Sintro, #' + actualElement + ' .hero-panel-Splayed').hide();
        });
        return false;
    });

    //Injecting pause button
    /*$('#hero-slider .slider-body').before('<div class="jcarousel-pause-button" style="display:block;"><a href="javascript: void(0)">stop autoplay</a></div>');

    $(".jcarousel-pause-button").live('click', function () {
        $(this).toggle(function () {
            carousel.stopAuto(); //on pause click stopping carousel auto rotation
            $(this).find("a").text("resume autoplay");
        },
        function () {
            carousel.startAuto(); //on play click re-suming carousel auto rotation
            $(this).find("a").text("stop autoplay");
        }
    );
        $(this).trigger('click');
    });*/


};

//Change of the active link status when carousel item becomes visible
function hero_activeLink(carousel, li, index) {
    heroLink = $('#hero').css('top').replace('-', '').replace('px', '');
    heroLink = heroLink.replace(heroLink, 'item' + heroLink + '');
    $('#hero-slider ul a').removeClass('active');
    link = $('a[rel=' + heroLink + ']').attr('class', 'active');
    sliderLinksHeightFix();
}

function sliderLinksHeightFix() {    
    //Fix for mod-sliderLinks height which is 349px - not divideable by 4
    if ($('.mod-sliderLinks li.last a').attr('class') == 'active') {
        $('.mod-hero #hero-slider ul.mod-sliderLinks').css('background-image', 'url("' + htmlUrl + 'themes/' + themeName.replace('theme-cw-','') + '/mod-heroOptBg-last-' + themeName + '-2.png")');
    } else {
        $('.mod-hero #hero-slider ul.mod-sliderLinks').css('background-image', 'url("' + htmlUrl + 'themes/' + themeName.replace('theme-cw-', '') + '/mod-heroOptBg-last-' + themeName + '-1.png")');
    }
}

//Function fired when document is loaded
$(document).ready(function () {

    //detecting page path
    htmlUrl = $('.hidden.blank').attr('src').replace('blank.gif', '');
    //detecting theme
    themeName = $('body').attr('class'); //$('.hidden.blank').attr('alt');    

    sliderLinksHeightFix();

    /* HERO CAROUSEL INITIALISATION */

    var hero = $('#hero').jcarousel({
        auto: 5,
        wrap: 'last',
        animation: 'slow',
        vertical: true,
        initCallback: hero_initCallback,
        itemVisibleInCallback: {
            onAfterAnimation: hero_activeLink
        }
    });

    //Hero title word wrap issue - function callback
    var heroTitles = $('.cp-item-title h3');
    var numberOfTitles = heroTitles.length;
    for (i = 0; i < heroTitles.length; i++) {
        var actualTitle = new TitleObject(heroTitles[i]);
        actualTitle.fix();
        if (i == (heroTitles.length - 1)) {
            $('.cp-heroVideoOverlay').hide();
        } else {
            $('.cp-heroVideoOverlay').show();
        }
    }

    $('#hero li').each(function () { if (!this.id) { $(this).remove(); } });





});

//PHRASE WORD WRAP WORKAROUND

//Header Title object constructor
function TitleObject(phrase) {

    //Object properties
    this.string = $(phrase).text();
    this.numberOfWords = this.string.split(' ').length;
    this.spaceToBrake = Math.ceil(this.numberOfWords / 2);

    //Method that replaces the empty space in the middle with <br />
    this.fix = function () {
        //if (this.string.length > 20) {
        if (40 > this.string.length > 20) {
            //all spaces replaced with hash
            this.string = this.string.replace(/\s/g, '#');
            //checking length of the string
            this.stringLength = this.string.length;
            //string changed into array
            this.string = this.string.split('');
            //checking where is the middle of the string
            this.middlePos = Math.round(this.string.length / 2);
            //<br /> trigger set
            this.brTrigger = 1;
            //new empty string is being created
            this.newString = '';
            if (this.stringLength > 20) {
                for (a = 0; a < this.stringLength; a++) {
                    if (this.string[a] == '#' && a >= (this.middlePos - 1)) {
                        //loop is finding the hash in the middle and changeing it to star
                        this.brTrigger == 1 ? this.newString += '*' : this.newString += '#';
                        //<br /> trigger is being turned off
                        this.brTrigger = 0;
                    } else {
                        //all other characters are simply being added to the new string
                        this.newString += this.string[a];
                    }
                }
                //star should be changed to <br />
                this.string = this.newString.replace("*", "<br />");
                //all hashes should be changed to white spaces
                this.string = this.string.replace(/\#/g, " ");
                //new string is being implemented to phrase container
                $(phrase).html(this.string);
            }
        }
    };

}