var MAG_TIMER_ALLOWED = true;

$(document).ready(function () {


    $(".leftnav-level2 .nav-left-active").closest(".leftnav-level1").children("a").addClass("nav-left-parent");
    $(".leftnav-level3 .nav-left-active").closest(".leftnav-level1").children("a").addClass("nav-left-parent");
    $(".leftnav-level3 .nav-left-active").closest(".leftnav-level2").children("a").addClass("nav-left-active");

    $('.spotlight-carousel').css('left', '-856px');



    //when user clicks the image for sliding right        
    $('.spotlight-right').click(function () {
        MAG_TIMER_ALLOWED = false;
        MAG_go_right(true);
    });

    //when user clicks the image for sliding left
    $('.spotlight-left').click(function () {
        MAG_TIMER_ALLOWED = false;
        MAG_go_left(true);
    });

    MAG_play_scroll();

    /* DROP DOWN MENU ACTIVATION */
    $('#multiple-dropdownmenu').dropDownMenu({ timer: 1000, parentMO: 'parent-hover', childMO: 'child-hover1' });


    $('.wrapper-homepage .container-hero-right img').hover(
		function () {
		    this.src = this.src.replace("-off", "-on");
		},
		function () {
		    this.src = this.src.replace("-on", "-off");
		}
	);

});

function MAG_go_right(doAnimate) {
    //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
    var item_width = $('.spotlight-carousel li').outerWidth();
    //calculate the new left indent of the unordered list
    var left_indent = parseInt($('.spotlight-carousel').css('left')) - item_width;
    //make the sliding effect using jquery's animate function '
    if (doAnimate) {
        $('.spotlight-carousel:not(:animated)').animate({ 'left': left_indent }, 2000, 'swing', function () {

            //get the first list item and put it after the last list item (that's how the infinite effects is made) '
            $('.spotlight-carousel li:last').after($('.spotlight-carousel li:first'));
            $('.spotlight-carousel').css({ 'left': '-856px' });
        });
    } else {
        $('.spotlight-carousel li:last').after($('.spotlight-carousel li:first'));
    }
}

function MAG_go_left(doAnimate) {
    var item_width = $('.spotlight-carousel li').outerWidth();

    /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
    var left_indent = parseInt($('.spotlight-carousel').css('left')) + item_width;
    if (doAnimate) {
        $('.spotlight-carousel:not(:animated)').animate({ 'left': left_indent }, 2000, 'swing', function () {

            /* when sliding to left we are moving the last item before the first list item */
            $('.spotlight-carousel li:first').before($('.spotlight-carousel li:last'));

            /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
            $('.spotlight-carousel').css({ 'left': '-856px' });
        });
    } else {
        $('.spotlight-carousel li:first').before($('.spotlight-carousel li:last'));
    }
}

function MAG_timer_scroll() {
    var item_width = $('.spotlight-carousel li').outerWidth();
    //calculate the new left indent of the unordered list
    var left_indent = parseInt($('.spotlight-carousel').css('left')) - item_width;

    $('.spotlight-carousel').animate({ 'left': left_indent }, 2000, 'swing', function () {
        //get the first list item and put it after the last list item (that's how the infinite effects is made) '
        $('.spotlight-carousel li:last').after($('.spotlight-carousel li:first'));
        $('.spotlight-carousel').css({ 'left': '-856px' });
    });

}

function MAG_play_scroll() {
    if (MAG_TIMER_ALLOWED) {
        setTimeout(MAG_play_scroll, 8000);
        MAG_timer_scroll();
    }


}