testing

by Ian B

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<div id="bodyMapContainer">
</div>

JavaScript

//RAPAEL PAGE
width = 700;
height = 900;
var bodyMapContainer = document.getElementById("bodyMapContainer");
var p = Raphael(20,0,width,height);
//var p = Raphael(bodyMapContainer,"100%","100%");
p.rect(0,0,width,height);
p.setViewBox(0,0,width,height,true); 

var eyeId = 1000;
drawEyes(150,45, 11, "Left Eye");
drawEyes(129,46, 11, "Right Eye");

//ID for the eyes

selectEye();

function drawEyes(xCoordinate,yCoordinate, radius, bodyPartName){
    var eye = p.circle(xCoordinate,yCoordinate, radius);   
    eyeId ++;
    eye.id= eyeId;
    eye.title=bodyPartName;
    eye.attr ("stroke", "#F3F3FE");
    eye.hover(hoverIn, hoverOut);
    eye.click(bodyPartClicked);
    eye.attr('fill', 'red');
}

// Hover in function
function hoverIn() {
    
    this.attr('fill', 'green');
    console.log($(this).attr('id'));
    
}

// Hover out function
function hoverOut() {
    
    this.attr('fill', 'red');
    
    
}

function bodyPartClicked(){
    var selectedBodyPart =   $(this).attr('title');
    console.log($(this).attr('title'));
    console.log($(this).attr('id'));
    
}

function selectEye(){
    var selectedBodyPart = p.getById(1001);
    selectedBodyPart.attr('fill', 'blue');
}