// JavaScript Document
window.onload = function() {

    var degrees=0;//variable to store amount of rotation
    
    //create a Raphael object in the div. Call it "paper".
    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
    
    //create a shape using the path method. Call it tetris.
    var tetris = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
    
    //create some drawn text to show the value of degrees. Call it degreeslabel.
    var degreeslabel = paper.text(100, 50, 'Current degrees = '+degrees)
    
    //use the attr method to change the font size of degreeslabel
    degreeslabel.attr({ 'font-size': 12});
    
    //use the attr method to style the tetris shape
    tetris.attr(
        {
            gradient: '90-#526c7a-#64a0c1',
            stroke: '#3b4449',
            'stroke-width': 10,
            'stroke-linejoin': 'round',
            rotation: 0
        }
    );

    //declare an event handler for the shape using the anonymous function. Changes the cursor 
    tetris.node.onmouseover = function() {
          this.style.cursor = 'pointer';
        }
    //declare an event handler for the shape using the anonymous function.    
    tetris.node.onclick = function() {
          degrees+=90;
          
          //rotate tetris to value of degrees, take 2000 ms to do it, end with a bounce
          tetris.animate({rotation: degrees}, 2000, 'bounce');
          
          degreeslabel.remove();//remove the degreeslabel
          
          //repaint the degreeslabel to display the new value of degrees. and style it.
          degreeslabel= paper.text(100, 50, 'Current degrees = '+degrees);
          
          degreeslabel.attr({ 'font-size': 12});
        }
}