var thumbHeight = 40;
var tackCount = 0;
var tackCoordinatesX = [];
var tackCoordinatesY = [];
var tackCoordinatesType = [];
var tackGraphic="pin-green.gif";
var pinType=1;

function getBaseElement(elem)  
{  
elem = elem + "";  
var len         = elem.length;  
var lPos        = elem.lastIndexOf("_") * 1;  
var baseElem    = elem.substr(0, lPos);  
var index       = elem.substr(lPos+1, len);  

if (checkNumeric(index))  
{  
return {"base": baseElem, "index": index};  
}  
else  
{  
return {"base": null, "index": null};  
}  
}  
	  
function checkNumeric(value)  
{  
var anum = /(^\d+$)|(^\d+\.\d+$)/  
if (anum.test(value))  
return true;  
return false;  
} 

function doHandleClick(XV,YV) {


 id = 'thumbtack_' + tackCount++;
        $('body').append('<img id="' + id + '" onclick="doRemovePin(' + (tackCount-1) + ')" />');
        $('#'+id)
            .attr('src', tackGraphic)
            .css('position','absolute')
            .css('left',XV - 3)
            .css('top',YV - thumbHeight)
        ;

        tackCoordinatesX[tackCoordinatesX.length] = XV - 3;
        tackCoordinatesY[tackCoordinatesY.length] = YV - thumbHeight;
        tackCoordinatesType[tackCoordinatesType.length] = pinType;

};

function doRemovePin(pinNumber) {

		$("#thumbtack_" + pinNumber).remove();
		tackCoordinatesX[pinNumber] = -1;
		tackCoordinatesY[pinNumber] = -1;
		tackCoordinatesType[pinNumber] = -1;
};

$(document).ready(function() {


    $("#map1").click(function(clickEvent){

       doHandleClick(clickEvent.pageX,clickEvent.pageY);

    });

    $("#map2").click(function(clickEvent){

         doHandleClick(clickEvent.pageX,clickEvent.pageY);

    });

    $("#map3").click(function(clickEvent){

         doHandleClick(clickEvent.pageX,clickEvent.pageY);

    });

    $("#map4").click(function(clickEvent){

         doHandleClick(clickEvent.pageX,clickEvent.pageY);

    });

$("#green").click(function(clickEvent){
     tackGraphic="pin-green.gif";
document.greenpin.src="greendotglowing.gif";
document.purplepin.src="purpledot.gif";
document.redpin.src="reddot.gif";
document.blackpin.src="blackdot.gif";
pinType=1;
    });

$("#red").click(function(clickEvent){
     tackGraphic="pin-red.gif";
document.greenpin.src="greendot.gif";
document.purplepin.src="purpledot.gif";
document.redpin.src="reddotglowing.gif";
document.blackpin.src="blackdot.gif";
pinType=3;
    });

$("#purple").click(function(clickEvent){
     tackGraphic="pin-purple.gif";
document.greenpin.src="greendot.gif";
document.purplepin.src="purpledotglowing.gif";
document.redpin.src="reddot.gif";
document.blackpin.src="blackdot.gif";
pinType=2;
    });

$("#black").click(function(clickEvent){
     tackGraphic="pin-black.gif";
document.greenpin.src="greendot.gif";
document.purplepin.src="purpledot.gif";
document.redpin.src="reddot.gif";
document.blackpin.src="blackdotglowing.gif";
pinType=4;
    });

$("#hide").click(function(clickEvent){
$('#toolbar')
            .css('visibility','hidden');
$('#toolbar2')
            .css('visibility','visible');

});

$("#show").click(function(clickEvent){
$('#toolbar')
            .css('visibility','visible');
$('#toolbar2')
            .css('visibility','hidden');


});

});