$(document).ready(function() {
    
    var el = document.getElementById("canvas");
    var el2 = document.getElementById("canvas2");
    var viewportWidth = window.innerWidth;
    var viewportHeight = window.innerHeight;
    var canvasWidth = viewportWidth;
    var canvasHeight = viewportHeight;
    var scaleTime = 15;
    var intval = "";
    var ogWidth = 108;
    var ogHeight = 150;
    var imWidth = 108;
    var imHeight = 150;
    var amount = 2;
    var inc = 1;
    var rep = 0;
    var displayInt = 0;
    
    var img1 = new Image();
    var img2 = new Image();
    var img3 = new Image();
    var img4 = new Image();
    var img5 = new Image();
    var img6 = new Image();
    var img7 = new Image();
    var img8 = new Image();
    var img9 = new Image();
    var img10 = new Image();
    var largeImage = new Image();
    
    var imageArray = [img1,
                      img2,
                      img3,
                      img4,
                      img5,
                      img6,
                      img7,
                      img8,
                      img9,
                      img10];
    
    var xPosArray = [viewportWidth/2 - 240,
                    viewportWidth/2 + 252,
                    viewportWidth/2 + 92,
                    viewportWidth/2 - 194,
                    viewportWidth/2 + 68,
                    viewportWidth/2 - 347,
                    viewportWidth/2 - 259,
                    viewportWidth/2 - 84,
                    viewportWidth/2 - 69,
                    viewportWidth/2 - 54];
    
    var yPosArray = [viewportHeight/2 + 66,
                     viewportHeight/2 - 75,
                     viewportHeight/2 - 187,
                     viewportHeight/2 - 136,
                     viewportHeight/2 + 89,
                     viewportHeight/2 - 100,
                     viewportHeight/2 - 295,
                     viewportHeight/2 + 119,
                     viewportHeight/2 - 302,
                     viewportHeight/2 - 75];
    
    //preload images into cache
    urls = ['wp-content/uploads/intro_thumb_1.jpg',
            'wp-content/uploads/intro_thumb_2.jpg',
            'wp-content/uploads/intro_thumb_3.jpg',
            'wp-content/uploads/intro_thumb_4.jpg',
            'wp-content/uploads/intro_thumb_5.jpg',
            'wp-content/uploads/intro_thumb_6.jpg',
            'wp-content/uploads/intro_thumb_7.jpg',
            'wp-content/uploads/intro_thumb_8.jpg',
            'wp-content/uploads/intro_thumb_9.jpg',
            'wp-content/uploads/intro_thumb_main.jpg',
            'wp-content/themes/glenfriedman/images/backgroundTile.jpg'];
    
    $.preload( urls, {
      onFinish:placeImages
    });
    
    //setup 2 canvas elements,
    //one for small pics and one for large zooming pic
    el.style.position = "fixed";
    el.setAttribute("width", canvasWidth);
    el.setAttribute("height", canvasHeight);
    el.style.top = (viewportHeight - canvasHeight) / 2;
    el.style.left = (viewportWidth - canvasWidth) / 2;
    
    el2.style.position = "fixed";
    el2.setAttribute("width", canvasWidth);
    el2.setAttribute("height", canvasHeight);
    el2.style.top = (viewportHeight - canvasHeight) / 2;
    el2.style.left = (viewportWidth - canvasWidth) / 2;

    ctx = el.getContext("2d");
    ctx2 = el2.getContext("2d");
    
    //add all images to canvas
    function placeImages(){
      imageArray[displayInt] .onload = function(){  
        
        ctx.drawImage(imageArray[displayInt],
                      xPosArray[displayInt],
                      yPosArray[displayInt]);
        
        $('#fadeCanvases').append('<canvas id="fadeCanvas' + displayInt + '"></canvas>');
        
        var cfc = document.getElementById('fadeCanvas' + displayInt);
        cfc.style.position = "fixed";
        cfc.setAttribute("width", (imageArray[displayInt].width + 10));
        cfc.setAttribute("height", (imageArray[displayInt].height + 10));
        cfc.style.top = (yPosArray[displayInt] - 5) + "px";
        cfc.style.left = (xPosArray[displayInt] - 5) + "px";
        
        var fctx = cfc.getContext('2d');
        fctx.fillStyle   = "#ffffff";   
        fctx.fillRect(0,0,imageArray[displayInt].width + 10,imageArray[displayInt].height + 10);
        
        var delayTime = displayInt/10;
        $('#fadeCanvas' + displayInt).delay(delayTime * 1000).fadeOut(1000);
        
        if(displayInt < urls.length - 2){
          displayInt++;
          placeImages();
        }else{
          setTimeout(loadLargeImage, 1000);
        }
        
      }
      imageArray[displayInt].src = urls[displayInt];
    }
    
    function loadLargeImage(){
      //this image will be loaded and scaled down
      largeImage.onload = function(){  
        ctx.clearRect(viewportWidth/2 - img10.width/2,viewportHeight/2 - img10.height/2, img10.width, img10.height);
        ctx2.drawImage(largeImage,viewportWidth/2 - 108/2,viewportHeight/2 - 150/2, 108, 150);
        setTimeout(startZoom, 1000)
      }
      
      largeImage.src = 'wp-content/uploads/homePagePic.jpg';
      //png is too big but looks better
      //largeImage.src = 'wp-content/uploads/homePagePic_cutout.png';
    }
    
    function startZoom(){
      $('#canvas').animate({
        marginLeft : ((viewportWidth/2) - ($('#canvas').width() * 2)/2) +'px',
        marginTop : ((viewportHeight/2) - ($('#canvas').height() * 2)/2) +'px',
        width : ($('#canvas').width() * 2),
        height : ($('#canvas').height() * 2)},
        7000);
      
      intval = setInterval (scaleImage, scaleTime );
    }
    
    //create "zoom" effect for image
    function scaleImage(){
      rep++;
      
      inc = inc * 1.1;
      imWidth = (imWidth + amount + inc);
      imHeight = ogHeight * (imWidth/ogWidth);
      
      ctx2.clearRect(0, 0, viewportWidth, viewportHeight);
      ctx2.drawImage(largeImage,viewportWidth/2 - (imWidth/2),viewportHeight/2 - (imHeight/2), imWidth, imHeight);
      
      if(rep == 55){
        //fades out zooming pic
        $('body').css("background-image", "url('wp-content/themes/glenfriedman/images/backgroundTile.jpg')");
        ctx.clearRect(0, 0, viewportWidth, viewportHeight);
        $('#canvas2').fadeOut('slow', function() {
            ctx2.clearRect(0, 0, viewportWidth, viewportHeight);
            window.location = "home";
        });
      }
      
      if(rep == 70){
        clearInterval(intval);
      }
    }
    
});