var DEFAULT_TYPE = 0;
var ROCK_TYPE = 1;

var LILLYPAD = "url('images/lillypad/lp.png')";
var ROCK = "url('images/lillypad/rock.png')";

var lillyPadIdCounter = 0;

function LillyPadSprite(g, t) {

	this.game = g;
	this.id = ++lillyPadIdCounter;
	
	this.counter = 0;
	this.landingsLeft = 3;
	if (t == null) t = DEFAULT_TYPE;
	this.type = t;
	
	var lpg = this.game.getLillyPadGrid();
	
	this.x = getRandomInt(0, ROWS - 1);
    this.y = getRandomInt(0, COLS - 1);
    while (lpg[this.x][this.y]) {
    	this.x = getRandomInt(0, ROWS - 1);
        this.y = getRandomInt(0, COLS - 1);
    }
    
    this.setPosition();

    this.contentDiv = document.createElement("div");
    this.contentDiv.onmousedown = function(event) {
        dragStartLillyPad(event, this.id);
    }
    this.contentDiv.lp = this;
    this.contentDiv.id = "lillyPad" + this.id;
    this.contentDiv.style.width = "40px";
    this.contentDiv.style.height = "40px";
    this.contentDiv.style.position = "absolute";
    this.contentDiv.style.top = this.posX + "px";
    this.contentDiv.style.left = this.posY + "px";
    this.contentDiv.style.zIndex = "1";
    if (this.type == DEFAULT_TYPE) {
    	this.contentDiv.style.backgroundImage = LILLYPAD;
    } else if (this.type == ROCK_TYPE) {
    	this.contentDiv.style.backgroundImage = ROCK;
    }

    this.game.gameElement.appendChild(this.contentDiv);
	
}

LillyPadSprite.prototype.setPosition = function() {
	
    this.posX = (this.x) * 40;
    this.posY = (this.y) * 40;

}

LillyPadSprite.prototype.update = function(elapsed) {
	

}

LillyPadSprite.prototype.landedOn = function() {
	
	if (this.type != ROCK_TYPE) {
		this.landingsLeft--;
	}
	
}

LillyPadSprite.prototype.movedOff = function() {
	
	if (this.type != ROCK_TYPE) {
		var o = this.landingsLeft * 0.34;
		this.contentDiv.style.opacity = o;
		if (this.landingsLeft == 0) {
			this.game.removeLillyPad(this);
		}
	}
	
}

LillyPadSprite.prototype.attemptMove = function(direction) {
	
	var lpg = this.game.getLillyPadGrid();
	var attemptX = this.x;
	var attemptY = this.y;
	
	if (direction == NORTH && attemptX > 0) {
		attemptX--;
	} else if (direction == SOUTH && attemptX < ROWS - 1) {
		attemptX++;
	} else if (direction == EAST && attemptY < COLS - 1) {
		attemptY++;
	} else if (direction == WEST && attemptY > 0) {
		attemptY--;
	}
	
	if (!lpg[attemptX][attemptY]) {
		this.x = attemptX;
		this.y = attemptY;
		this.setPosition();
		this.landedOn();
		this.movedOff();
		popSound.play();
	}

    this.contentDiv.style.top = this.posX + "px";
    this.contentDiv.style.left = this.posY + "px";

}


var lpDragObj = new Object();

function dragStartLillyPad(event, id) {

    var el;
    var x, y;

    // If an element id was given, find it. Otherwise use the element being
    // clicked on.

    if (id) {
    
    	lpDragObj.elNode = document.getElementById(id);
        
    } else {
    
        if (browser.isIE) {
        	lpDragObj.elNode = window.event.srcElement;
        }
        
        if (browser.isNS) {
        	lpDragObj.elNode = event.target;
        }

        // If this is a text node, use its parent element.

        if (lpDragObj.elNode.nodeType == 3) {
        	lpDragObj.elNode = dragObj.elNode.parentNode;
        }
        
    }

    // Get cursor position with respect to the page.

    if (browser.isIE) {
        x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
        y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    }
    
    if (browser.isNS) {
        x = event.clientX + window.scrollX;
        y = event.clientY + window.scrollY;
    }

    // Save starting positions of cursor and element.

    lpDragObj.cursorStartX = x;
    lpDragObj.cursorStartY = y;

    // Capture mousemove and mouseup events on the page.

    if (browser.isIE) {
        document.attachEvent("onmouseup", dragStopLillyPad);
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    }
    
    if (browser.isNS) {
        document.addEventListener("mouseup", dragStopLillyPad, true);
        event.preventDefault();
    }
    
    tapSound.play();
    
}

function dragStopLillyPad(event) {

    var x, y;

    // Get cursor position with respect to the page.

    if (browser.isIE) {
        x = window.event.clientX + document.documentElement.scrollLeft
            + document.body.scrollLeft;
        y = window.event.clientY + document.documentElement.scrollTop
            + document.body.scrollTop;
    }

    if (browser.isNS) {
        x = event.clientX + window.scrollX;
        y = event.clientY + window.scrollY;
    }

    var movedX = x - lpDragObj.cursorStartX;
    var movedY = lpDragObj.cursorStartY - y;
    
    if (Math.abs(movedX) > Math.abs(movedY)) {
    	if (movedX >= 20) {
    		// moved right
    		lpDragObj.elNode.lp.attemptMove(EAST);
    	} else if (movedX <= -20) {
    		// moved left
    		lpDragObj.elNode.lp.attemptMove(WEST);
    	}
    } else {
    	if (movedY >= 20) {
    		// moved up
    		lpDragObj.elNode.lp.attemptMove(NORTH);
    	} else if (movedY <= -20) {
    		// moved down
    		lpDragObj.elNode.lp.attemptMove(SOUTH);
    	}
    }
    
    // Stop capturing mousemove and mouseup events.

    if (browser.isIE) {
        document.detachEvent("onmouseup", dragStopLillyPad);
    }
    
    if (browser.isNS) {
        document.removeEventListener("mouseup", dragStopLillyPad, true);
    }
    
}