var images = new Array();
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]);
    }
}


function animateOndas(){

    var target = parseInt($("#containerIsee #bloco05").attr("data-bg")) == 3 ? 1 : parseInt($("#containerIsee #bloco05").attr("data-bg")) + 1;

    $("#containerIsee #bloco05").removeClass("bg-1");
    $("#containerIsee #bloco05").removeClass("bg-2");
    $("#containerIsee #bloco05").removeClass("bg-3");

    $("#containerIsee #bloco05").addClass("bg-"+target);
    $("#containerIsee #bloco05").attr("data-bg", target);

}



function bindClose(){
    $("#containerIsee > #bloco08 .close-hotspot, #containerIsee > #bloco11 .close-hotspot").unbind();
       $("#containerIsee > #bloco08 .close-hotspot, #containerIsee > #bloco11 .close-hotspot").click(function(e){
        e.preventDefault();
        
        $(this).addClass("bt-hotspot");
        $(this).removeClass("close-hotspot");
        $(this).parent().find(".isee-hotspot").fadeOut();
        bindOpen();
    });
}
function bindOpen(){
    $("#containerIsee > #bloco08 .bt-hotspot, #containerIsee > #bloco11 .bt-hotspot").unbind();
       $("#containerIsee > #bloco08 .bt-hotspot, #containerIsee > #bloco11 .bt-hotspot").click(function(e){
        e.preventDefault();
        
        $(this).addClass("close-hotspot");
        $(this).removeClass("bt-hotspot");
        $(this).parent().find(".isee-hotspot").fadeIn();
        
        bindClose();
    });
}

$(function(){ 

    preload(


        "img/1920/isee-galaxytabs3-ico-feature-1-on.jpg",
        "img/1920/isee-galaxytabs3-ico-feature-2-on.jpg",
        "img/1920/isee-galaxytabs3-ico-feature-3-on.jpg",
        
        "img/1920/isee-galaxytabs3-criatividade-2.jpg",
        "img/1920/isee-galaxytabs3-criatividade-3.jpg",
        "img/1920/tablet-galaxy-s3-hotspot.png",
        "img/1920/tablet-galaxy-s3-hotspot-2.png",
        "img/1920/tablet-galaxy-s3-bt-close-hotspot.png"

    );


   setInterval(function(){ animateOndas(); }, 700);

        bindOpen();

   $("#containerIsee > #bloco02 .bt-hotspot, #containerIsee > #bloco02  .isee-hotspot, #containerIsee > #bloco02 .isee-hotspot").click(function(e){
        e.preventDefault();
        
        $("#containerIsee > #bloco02 .isee-hotspot").toggleClass("on");
        });






    $("#containerIsee > #bloco09 .isee-ico-criatividade div").click(function(e){
        e.preventDefault();
        var active = $(this).attr("data-class");
        $("#containerIsee > #bloco09 .isee-ico-criatividade div").removeClass("on");
        $(this).addClass("on");


        $("#containerIsee #bloco09 .isee-criatividade").removeClass("img-1");
        $("#containerIsee #bloco09  .isee-criatividade").removeClass("img-2");
        $("#containerIsee #bloco09  .isee-criatividade").removeClass("img-3");

        $("#containerIsee #bloco09 .isee-criatividade").addClass(active);
    });


var dragging = false,
        scrolling = false,
        resizing = false;
        tvsOpen = false;
        remoteOpen = false;
    //cache jQuery objects
    var imageComparisonContainers = $('.cd-image-container');
    
    
    //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"]'));
    });



    //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 + 20,
                maxLeft = containerOffset + containerWidth - dragWidth - 20;
            
            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;
    }

	
});