/* HERO CAROUSEL FUNCTIONS & CALLBACKS */
var heroPos = 0;
var heroLink = 'item0';


/* 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 hand 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();
        //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.
    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;
    });
};

//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');
    //console.log(index);
}

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

    /* 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 h5');
    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();
        }
    }

});

//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) {
            //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);
            }
        }
    };

}