var runningIdx = 0;
var pixelJump = 1;
var wipePause = 1200;
var timer = 700;

var leftClip = "rect(0px,0px,124px,0px)";
var rightClip = "rect(0px,220px,124px,220px)"
var resetTime = -1;
function resetImage(i) {
    var images = document.getElementById('works').getElementsByTagName("img");
    
    var img_per_work = images.length / 3;
    //alert(img_per_work);
    // idx is the index for images on work3 div
    var idx = img_per_work * 2; 
    if (i == 0)
        resetTime++;
//    console.log(i+idx);
    if ((i+resetTime)%2 == 0) {
        images[i].style.clip = leftClip ;
        images[i+img_per_work].style.clip = rightClip;
        images[i+idx].style.clip = leftClip;
    } else {
        images[i].style.clip = rightClip;
        images[i+img_per_work].style.clip = leftClip;
        images[i+idx].style.clip = rightClip;
    }  
    
}
function resetCss(id) {
    var images = document.getElementById(id).getElementsByTagName("img");
    var images_count = images.length;
    var img_per_work = images_count/3;      
    for (i = 0; i < img_per_work; i++) {
        resetImage(i);
    }
    return images;
}
    
function  wipe_handler(wipe_images) {
    wipe_images[0].style.display = "block";
    wipe_images[1].style.display = "block";
    wipe_images[2].style.display = "block";
    wipe_images[0].style.zIndex = runningIdx;
    wipe_images[1].style.zIndex = runningIdx;
    wipe_images[2].style.zIndex = runningIdx;
    runningIdx++;	
    //var animParams = {queue:false, duration:1000, easing:"cubicEaseIn"};
    var easing = "quartEaseOut";
    //var easing = "quintEaseOut";        
    $(wipe_images[0]).animate({clip: 'rect(0px, 220px, 124px, 0px)'}, {queue:false, duration:timer, easing:easing});
    $(wipe_images[1]).animate({clip: 'rect(0px, 220px, 124px, 0px)'}, {queue:false, duration:timer, easing:easing});
    $(wipe_images[2]).animate({clip: 'rect(0px, 220px, 124px, 0px)'}, {queue:false, duration:timer, easing:easing});
    
//    var animParams = {queue:false, duration:1000, easing:"cubicEaseIn"};
//    $(wipe_images[0]).animate({clip: rightClip}, animParams);
//    $(wipe_images[1]).animate({clip: rightClip}, animParams);
//    $(wipe_images[2]).animate({clip: rightClip}, animParams);
} 



function  wipe_init() {
    var images = resetCss('works');
    var chk = images.length/3;
    var wipe_images = new Array;
    var i =0, counter = 0;
    var stop = setInterval(function (){                
        var idx = i % chk;
        if (counter > 1) {
            var img2reset = (idx -2) % chk;
            if (img2reset < 0)
                img2reset += chk;            
            resetImage(img2reset);            
        } else {
            counter++;
        }
        wipe_images = [images[idx],images[idx+chk],images[idx+chk*2]];        
        wipe_handler(wipe_images)
        
        i = idx +1;
    },wipePause);    
}

$(window).load(function() {
    wipe_init();
})
//var images = resetCss('works');