Edit in JSFiddle

var rect;
var i=0;

window.onload = function(){
    var paper = Raphael(0,0,"100%","100%");
    rect = paper.rect(($(window).width()-100)/2,
                      ($(window).height()-100)/2,100,100)
                    　.attr({fill:"90-#804-#202-#305"});
    rect.click(rect_clicked);
}

    function rect_clicked(){
        //削除する
    switch(i){
        case 0:
             alert("クリックされちゃった////");
             break;
        case 1:
             alert("ちょ！やめっ･･/////");
             break;
        case 2:
             alert("おいちょっとカメラ止めろ");
             i=0;
             break;
    }
    i++;       
    }

<script type="text/javascript" src="http://dl.dropbox.com/u/63305355/raphael-min.js"></script>
<div id="canvas">
    <div class="text">
        CLICK
        <div id="result"></div>
    </div>
</div>

body,html
{
    height:100%;
    margin:0;
}

#canvas 
{
    height:99%;
    background:#ccc;
    text-align:center;
}

.text{
    letter-spacing: 20px;
    color:#fff;
    font-size:150%;
    position:absolute;
    width:"100%"
    text-align:center;
    top:40%;
    z-index:1;
    background:#000;
}
#result{
    font-size:60%;
    letter-spacing: 5px;
}
input{
    padding:3px;
}