
var mousex=0, mousey=0;
var xOff=0, yOff=0;
var moveXAmount=0;
var moveYAmount=0;
var cardHeight=110;
var cardWidth=75;
var img;
var ctx;
var mouseDown=false;

var activeCard=undefined;
var card = {id: 1, x:10, y: 10, img:undefined};

var cardLoadingIndex=0;
var cardArray = new Array();
var cardNameArray = new Array();

var background = new Image();

var message;

function clearCanvas(x,y,w,h) {
    /*
    var fixedX = x - moveXAmount;
    var fixedY = y - moveYAmount;
    if (fixedX < 0 || fixedY < 0) {
        fixedX = 0; fixedY = 0;
    }
    ctx.clearRect(fixedX,fixedY,w+moveXAmount*2,h+moveYAmount*2);
    */
    
    //ctx.clearRect(0,0,canvas.width,canvas.height);
}

function draw(cardToDraw) {
    ctx.drawImage(background, cardToDraw.x-moveXAmount, cardToDraw.y-moveYAmount, cardWidth+moveXAmount*2, cardHeight+moveYAmount*2, 
        cardToDraw.x-moveXAmount, cardToDraw.y-moveYAmount, cardWidth+moveXAmount*2, cardHeight+moveYAmount*2 );
    
    ctx.drawImage(cardToDraw.img,cardToDraw.x,cardToDraw.y,cardWidth,cardHeight);
}

function drawAll() {
    ctx.drawImage(background,0,0,background.width,background.height);
    for(var i=cardArray.length-1 ; i >= 0 ; i--) {
        var card = cardArray[i];
        ctx.drawImage(card.img,card.x,card.y,cardWidth,cardHeight);
    }
    
    if (activeCard) {
        //draw(activeCard);
        ctx.drawImage(activeCard.img,activeCard.x,activeCard.y,cardWidth,cardHeight);
    }
    
}

function initCards(index) {
    if (cardNameArray.length < index) {
    
        message.style.display='none';

    
        // All loaded
        drawAll();
        return;
    }
    var card = {id: 1, x:10, y: 10, img:undefined};
    card.img = new Image();
    card.img.onload = function(){
        initCards(cardLoadingIndex+1);
    };
    card.img.src = cardNameArray[cardLoadingIndex];
    cardArray.push(card);
    cardLoadingIndex++; 
}

function init() {
    var canvas = document.getElementById('deskCanvas');
    ctx = document.getElementById('deskCanvas').getContext('2d');

    message = document.getElementById('message');


    canvas.addEventListener('mousedown', ev_mousedown, false);
    canvas.addEventListener('mousemove', ev_mousemove, false);
    canvas.addEventListener('mouseup',   ev_mouseup, false);


    //canvas.addEventListener( 'touchstart', ev_mousedown, false);
    //canvas.addEventListener( 'touchmove', ev_mousemove, false);
    //canvas.addEventListener( 'touchend', ev_mouseup, false );    

    cardLoadingIndex = 0;
    cardNameArray.push('gfx/Club_ace.png');
    cardNameArray.push('gfx/Club_2.png');
    cardNameArray.push('gfx/Club_3.png');
    cardNameArray.push('gfx/Club_4.png');
    cardNameArray.push('gfx/Club_5.png');
    cardNameArray.push('gfx/Club_6.png');
    cardNameArray.push('gfx/Club_7.png');
    cardNameArray.push('gfx/Club_8.png');
    cardNameArray.push('gfx/Club_9.png');
    cardNameArray.push('gfx/Club_10.png');
    cardNameArray.push('gfx/Club_jack.png');
    cardNameArray.push('gfx/Club_king.png');
    cardNameArray.push('gfx/Club_queen.png');

    cardNameArray.push('gfx/Diamond_ace.png');
    cardNameArray.push('gfx/Diamond_2.png');
    cardNameArray.push('gfx/Diamond_3.png');
    cardNameArray.push('gfx/Diamond_4.png');
    cardNameArray.push('gfx/Diamond_5.png');
    cardNameArray.push('gfx/Diamond_6.png');
    cardNameArray.push('gfx/Diamond_7.png');
    cardNameArray.push('gfx/Diamond_8.png');
    cardNameArray.push('gfx/Diamond_9.png');
    cardNameArray.push('gfx/Diamond_10.png');
    cardNameArray.push('gfx/Diamond_jack.png');
    cardNameArray.push('gfx/Diamond_king.png');
    cardNameArray.push('gfx/Diamond_queen.png');

    cardNameArray.push('gfx/Heart_ace.png');
    cardNameArray.push('gfx/Heart_2.png');
    cardNameArray.push('gfx/Heart_3.png');
    cardNameArray.push('gfx/Heart_4.png');
    cardNameArray.push('gfx/Heart_5.png');
    cardNameArray.push('gfx/Heart_6.png');
    cardNameArray.push('gfx/Heart_7.png');
    cardNameArray.push('gfx/Heart_8.png');
    cardNameArray.push('gfx/Heart_9.png');
    cardNameArray.push('gfx/Heart_10.png');
    cardNameArray.push('gfx/Heart_jack.png');
    cardNameArray.push('gfx/Heart_king.png');
    cardNameArray.push('gfx/Heart_queen.png');

    cardNameArray.push('gfx/Spade_ace.png');
    cardNameArray.push('gfx/Spade_2.png');
    cardNameArray.push('gfx/Spade_3.png');
    cardNameArray.push('gfx/Spade_4.png');
    cardNameArray.push('gfx/Spade_5.png');
    cardNameArray.push('gfx/Spade_6.png');
    cardNameArray.push('gfx/Spade_7.png');
    cardNameArray.push('gfx/Spade_8.png');
    cardNameArray.push('gfx/Spade_9.png');
    cardNameArray.push('gfx/Spade_10.png');
    cardNameArray.push('gfx/Spade_jack.png');
    cardNameArray.push('gfx/Spade_king.png');
    cardNameArray.push('gfx/Spade_queen.png');
    
    background.onload  = function(){
        initCards(cardLoadingIndex);
    }; 
    background.src = 'gfx/background.png';
}

function cardUnderMouse(x,y) {
    for(var i=0;i<cardArray.length;i++) {
        var card = cardArray[i];
        if (card.x < x && card.y < y && card.x+cardWidth > x && card.y+cardHeight > y) {
            return card;
        }
    }
    return undefined;
}

function ev_mousedown (ev) {
    if (ev.layerX || ev.layerX == 0) { // Firefox
        mousex = ev.layerX;
        mousey = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
        mousex = ev.offsetX;
        mousey = ev.offsetY;
    }
    mouseDown = true;
    activeCard = cardUnderMouse(mousex,mousey);
    if (activeCard) {
        xOff = mousex - activeCard.x;
        yOff = mousey - activeCard.y;
        activeCard.x = mousex - xOff;
        activeCard.y = mousey - yOff;

        //draw(activeCard);
        drawAll();
    }            
}

function ev_mousemove (ev) {
    if (ev.layerX || ev.layerX == 0) { // Firefox
        moveXAmount = Math.abs(mousex - ev.layerX);
        moveYAmount = Math.abs(mousey - ev.layerY);
        mousex = ev.layerX;
        mousey = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
        moveXAmount = Math.abs(mousex - ev.layerX);
        moveYAmount = Math.abs(mousey - ev.layerY);
        mousex = ev.offsetX;
        mousey = ev.offsetY;
    }

    activeCard.x = mousex - xOff;
    activeCard.y = mousey - yOff;
    
    //draw(activeCard);
    drawAll();
}

function ev_mouseup (ev) {
    if (ev.layerX || ev.layerX == 0) { // Firefox
        mousex = ev.layerX;
        mousey = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
        mousex = ev.offsetX;
        mousey = ev.offsetY;
    }

    mouseDown = false;
    //activeCard.x = mousex - xOff;
    //activeCard.y = mousey - yOff;
    drawAll();
    activeCard = undefined;
} 
