var images = new Array();

var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
var is_explorer = navigator.userAgent.indexOf('MSIE') > -1;
var is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
var is_safari = navigator.userAgent.indexOf("Safari") > -1;
var is_opera = navigator.userAgent.toLowerCase().indexOf("op") > -1;
if ((is_chrome)&&(is_safari)) {is_safari=false;}
if ((is_chrome)&&(is_opera)) {is_chrome=false;}

function preload() {
    for (i = 0; i < preload.arguments.length; i++) {
        images[i] = new Image();
        images[i].src = preload.arguments[i];
        console.log("preload file: " + preload.arguments[i]);
    }
}

var bg = 1;

function animateHeader()
{
    if (bg == 5){
        bg = 1;
    }
    $("#isee-conteudo-samsung-cf591 .section-principal").removeClass("bg-1");
    $("#isee-conteudo-samsung-cf591 .section-principal").removeClass("bg-2");
    $("#isee-conteudo-samsung-cf591 .section-principal").removeClass("bg-3");
    $("#isee-conteudo-samsung-cf591 .section-principal").removeClass("bg-4");

    $("#isee-conteudo-samsung-cf591 .section-principal").addClass("bg-" + bg);    

    //console.log(bg);

    bg++;
}


function animateNave(){
    var left = $(document).width();
    $('.isee-nave').animate({ marginTop: '-300px' , marginLeft: left+'px'}, 6000, function() { $('.isee-nave').css("margin-top", "380px");$('.isee-nave').css("margin-left", "-540px"); });    
}
$(function(){
 
    preload(
        "img/isee-cf591-header-1920-1.jpg", "img/isee-cf591-header-1920-2.jpg", "img/isee-cf591-header-1920-3.jpg", "img/isee-cf591-header-1920-4.jpg", "img/isee-cf591-hotspot.png"
    );
    

    
        setInterval(animateHeader, 1200);
    
    setInterval(animateNave, 3000);


    $("#isee-conteudo-samsung-cf591 .section-design .isee-text .bt-hostpot").click(function(e){
        e.preventDefault();
        $("#isee-conteudo-samsung-cf591 .section-design .isee-text .hotspot").toggleClass("on");
    });

});




jQuery(document).ready(function($){
    var dragging = false,
        scrolling = false,
        resizing = false;
        tvsOpen = false;
        remoteOpen = false;
    //cache jQuery objects
    var imageComparisonContainers = $('.cd-image-container');
    
    
    //check if the .cd-image-container is in the viewport 
    //if yes, animate it
    checkPosition(imageComparisonContainers);

    
    //make the .cd-handle element draggable and modify .cd-resize-img width according to its position
    imageComparisonContainers.each(function(){
        var actual = $(this);
        drags(actual.find('.cd-handle'), actual.find('.cd-resize-img'), actual, actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-image-label[data-type="modified"]'));
    });



    function checkPosition(container) {
        //alert("checkPosition");
        container.each(function(){
            var actualContainer = $(this);

            if( $(window).scrollTop() + $(window).height()*0.5 > actualContainer.offset().top) {
                actualContainer.addClass('is-visible');
            }
        });

        scrolling = false;
    }

    //draggable funtionality - credits to http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
    function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) {
        dragElement.on("mousedown vmousedown", function(e) {
            dragElement.addClass('draggable');
            resizeElement.addClass('resizable');

            var dragWidth = dragElement.outerWidth(),
                xPosition = dragElement.offset().left + dragWidth - e.pageX,
                containerOffset = container.offset().left,
                containerWidth = container.outerWidth(),
                minLeft = containerOffset + 10,
                maxLeft = containerOffset + containerWidth - dragWidth - 10;
            
            dragElement.parents().on("mousemove vmousemove", function(e) {
                if( !dragging) {
                    dragging =  true;
                    ( !window.requestAnimationFrame )
                        ? setTimeout(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);}, 100)
                        : requestAnimationFrame(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);});
                }
            }).on("mouseup vmouseup", function(e){
                dragElement.removeClass('draggable');
                resizeElement.removeClass('resizable');
            });
            e.preventDefault();
        }).on("mouseup vmouseup", function(e) {
            dragElement.removeClass('draggable');
            resizeElement.removeClass('resizable');
        });
    }

    function animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement) {
        var leftValue = e.pageX + xPosition - dragWidth;   
        //constrain the draggable element to move inside his container
        if(leftValue < minLeft ) {
            leftValue = minLeft;
        } else if ( leftValue > maxLeft) {
            leftValue = maxLeft;
        }

        var widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%';
        
        $('.draggable').css('left', widthValue).on("mouseup vmouseup", function() {
            $(this).removeClass('draggable');
            resizeElement.removeClass('resizable');
        });

        $('.resizable').css('width', widthValue); 


        dragging =  false;
    }
});