window.addEventListener('load', function () {

  // Get the canvas element.
  var elem = document.getElementById('myCanvas');
  if (!elem || !elem.getContext) {
    return;
  }

  // Get the canvas 2d context.
  var context = elem.getContext('2d');
  if (!context) {
    return;
  }
  
  // Start Multitext Function
  // Thank you Jeff Chan - http://jsfiddle.net/jeffchan/WHgaY/76/
  
	//var cutOff = 190,
	DEBUG = true;

var multiFillText = function(text, x, y, lineHeight, fitWidth) {
    var draw = x !== null && y !== null;

    text = text.replace(/(\r\n|\n\r|\r|\n)/g, "\n");
    sections = text.split("\n");

    var i, str, wordWidth, words, currentLine = 0,
        maxHeight = 0,
        maxWidth = 0;

    var printNextLine = function(str) {
        if (draw) {
            context.fillText(str, x, y + (lineHeight * currentLine));
        }

        currentLine++;
        wordWidth = context.measureText(str).width;
        if (wordWidth > maxWidth) {
            maxWidth = wordWidth;
        }
    };

    for (i = 0; i < sections.length; i++) {
        words = sections[i].split(' ');
        index = 1;

        while (words.length > 0 && index <= words.length) {

            str = words.slice(0, index).join(' ');
            wordWidth = context.measureText(str).width;

            if (wordWidth > fitWidth) {
                if (index === 1) {
                    // Falls to this case if the first word in words[] is bigger than fitWidth
                    // so we print this word on its own line; index = 2 because slice is
                    str = words.slice(0, 1).join(' ');
                    words = words.splice(1);
                } else {
                    str = words.slice(0, index - 1).join(' ');
                    words = words.splice(index - 1);
                }

                printNextLine(str);

                index = 1;
            } else {
                index++;
            }
        }

        // The left over words on the last line
        if (index > 0) {
            printNextLine(words.join(' '));
        }


    }

    maxHeight = lineHeight * (currentLine);


    if (!draw) {
        return {
            height: maxHeight,
            width: maxWidth
        };
    }
};

var multiMeasureText = function(text, lineHeight, fitWidth) {
    return multiFillText(text, null,null, lineHeight, fitWidth);
}
  // End Multitext Function
  
  // Start rounded rect function
  
  function roundRect(context, x, y, width, height, radius, fill, stroke) {
  if (typeof stroke == "undefined" ) {
    stroke = true;
  }
  if (typeof radius === "undefined") {
    radius = 5;
  }
    context.beginPath();
  context.moveTo(x + radius, y);
  context.lineTo(x + width - radius, y);
  context.quadraticCurveTo(x + width, y, x + width, y + radius);
  context.lineTo(x + width, y + height - radius);
  context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  context.lineTo(x + radius, y + height);
  context.quadraticCurveTo(x, y + height, x, y + height - radius);
  context.lineTo(x, y + radius);
  context.quadraticCurveTo(x, y, x + radius, y);
  context.closePath();
     	context.lineWidth = 1;
  if (stroke) {
    context.stroke();
  }
  if (fill) {
    context.fill();
  }        

}
  
  // End rounded rect functions
  

  // Draw calendar blocks
  context.fillStyle="#d9d9d9";
context.fillRect(0,160,100,25);
  context.fillStyle="#cccccc";
context.fillRect(100,160,100,25);
  context.fillStyle="#bfbfbf";
context.fillRect(200,160,100,25);
 context.fillStyle="#d9d9d9";
context.fillRect(300,160,100,25);
  context.fillStyle="#cccccc";
context.fillRect(400,160,100,25);
 context.fillStyle="#bfbfbf";
context.fillRect(500,160,100,25);
  context.fillStyle="#d9d9d9";
context.fillRect(600,160,100,25);
 context.fillStyle="#cccccc";
context.fillRect(700,160,100,25);
context.fillStyle="#cccccc";
context.fillRect(0,220,100,25);
  context.fillStyle="#bfbfbf";
context.fillRect(100,220,100,25);

      var greyToGreyGradient = context.createLinearGradient(0,0,600,25);  
  	greyToGreyGradient.addColorStop(.5,'#d9d9d9');  
  	greyToGreyGradient.addColorStop(1,'#f3f3f3');

  context.fillStyle= greyToGreyGradient;
context.fillRect(200,220,600,25);

// Draw calendar labels
  context.fillStyle="#b9b9b9";
 context.font ="bold 8pt Helvetica";
context.fillText("MAY 2011", 0, 157);
context.fillText("JUN", 100, 157);
context.fillText("JUL", 200, 157);
context.fillText("AUG", 300, 157);  
context.fillText("SEP", 400, 157);
context.fillText("OCT", 500, 157);
context.fillText("NOV", 600, 157);  
context.fillText("DEC", 700, 157);  

context.fillText("JAN 2012", 0, 217);
context.fillText("FEB", 100, 217);
context.fillText("ONWARDS", 200, 217);  


// Circles & Time Markers
	var circleRadii = 4;

    context.beginPath();    
    context.arc(55, 172, circleRadii, 0, 2 * Math.PI, false);
    context.strokeStyle ="white";
    context.fillStyle ="#23beae";
    context.fill();
    context.lineWidth = 1;
    context.stroke();
    context.closePath();
    
    context.beginPath();  
    context.fillStyle ="#f45b5e";
    roundRect(context, 63, 170, 250, 5, 2.5, "#f45b5e", "white");
    context.closePath();
    
    context.beginPath();  
    context.fillStyle ="#f45b5e";
    roundRect(context, 410, 165, 310, 5, 2.5, "#f45b5e", "white");
    context.closePath();
    
    context.beginPath();  
    context.fillStyle ="#f5811e";
    roundRect(context, 360, 176, 399, 5, 2.5, "#f5811e", "white");
    context.closePath();
    

    var orangeToGreyGradient = context.createLinearGradient(0,0,670,5);  
  	orangeToGreyGradient.addColorStop(0,'#f5811e');  
  	orangeToGreyGradient.addColorStop(1,'#f3f3f3');  
  
  
      var whiteToGreyGradient = context.createLinearGradient(0,0,670,5);  
  	whiteToGreyGradient.addColorStop(0,'#ffffff');  
  	whiteToGreyGradient.addColorStop(1,'#f3f3f3');  
  
  
    
    context.beginPath();  
    context.fillStyle = orangeToGreyGradient;
    context.strokeStyle = whiteToGreyGradient;
    roundRect(context, 130, 231, 670, 5, 2.5, orangeToGreyGradient, whiteToGreyGradient);
    context.closePath();
        
    context.beginPath();    
    context.arc(726, 168, circleRadii, 0, 2 * Math.PI, false);
    context.strokeStyle ="white";
    context.fillStyle ="#23beae";
    context.fill();
    context.lineWidth = 1;
    context.stroke();
    context.closePath();
    
    context.beginPath();    
    context.arc(737, 168, circleRadii, 0, 2 * Math.PI, false);
    context.strokeStyle ="white";
    context.fillStyle ="#b1d655";
    context.fill();
    context.lineWidth = 1;
    context.stroke();
    context.closePath();
    
    context.beginPath();    
    context.arc(100, 233, circleRadii, 0, 2 * Math.PI, false);
    context.strokeStyle ="white";
    context.fillStyle ="#b1d655";
    context.fill();
    context.lineWidth = 1;
    context.stroke();
    context.closePath();

// Text

    context.beginPath();
    context.fillStyle="#333333";
	//context.font ="10pt Helvetica";
	context.font = '14px "Ovo"';
	context.textAlign = 'start';
	context.textBaseline = 'bottom';
   	context.strokeStyle ="#61d4d8";
   	context.lineWidth = .4;
   	
   	// Text: graduated
	multiFillText("Graduated from CMU with a BFA in Communication Design & Human-Computer Interaction", 0, 15, 15, 200);
	context.strokeStyle ="#23beae";
	context.moveTo(55, 172);
	context.lineTo(55, 52);
	context.stroke();
	context.moveTo(0, 52);
	context.lineTo(200, 52);
	context.stroke();
	context.closePath();
	
	// Text: BoA Capstone
	    context.beginPath();
	multiFillText("MHCI Capstone Project with Bank of America", 100, 90, 15, 147);
	context.strokeStyle="#f45b5e";
	context.moveTo(150, 172);
	context.lineTo(150, 112);
	context.stroke();
	context.moveTo(100, 112);
	context.lineTo(247, 112);
	context.stroke();
		context.closePath();
	
	// Text: Weave
	    context.beginPath();
	multiFillText("Contract design work with Intuit’s iPhone app, Weave", 290, 90, 15, 167);
		context.strokeStyle="#f5811e";
	context.moveTo(390, 179);
	context.lineTo(390, 112);
	context.stroke();
	context.moveTo(290, 112);
	context.lineTo(457, 112);
	context.stroke();
		context.closePath();
	

	// Text: ComVibe
	    context.beginPath();
	multiFillText("Research & design work with Pittsburgh startup ComVibe", 500, 90, 15, 178);
	context.strokeStyle="#f45b5e";
	context.moveTo(585, 168);
	context.lineTo(585, 112);
	context.stroke();
	context.moveTo(500, 112);
	context.lineTo(678, 112);
	context.stroke();
		context.closePath();
	
	// Text: Graduated MHCI
	    context.beginPath();
	multiFillText("Graduated from CMU with a Master’s in Human-Computer Interaction", 615, 15, 15, 185);
		context.strokeStyle ="#23beae";
	context.moveTo(726, 168);
	context.lineTo(726, 52);
	context.stroke();
	context.moveTo(615, 52);
	context.lineTo(800, 52);
	context.stroke();
		context.closePath();
	
	// Text: Move Out Of Pittsburgh
	    context.beginPath();
	multiFillText("Moved out of Pittsburgh", 737, 90, 15, 63);
			context.strokeStyle="#b1d655";
	context.moveTo(737, 168);
	context.lineTo(737, 127);
	context.stroke();
	context.moveTo(737, 127);
	context.lineTo(800, 127);
	context.stroke();
	
	context.closePath();
	
	
	// Text: Move To SF
	    context.beginPath();
	multiFillText("Move to San Francisco", 22, 287, 15, 78);
			context.strokeStyle="#b1d655";
	context.moveTo(100, 233);
	context.lineTo(100, 265);
	context.stroke();
	context.moveTo(22, 265);
	context.lineTo(100, 265);
	context.stroke();
	
	context.closePath();
	
	// Text: YouTube
	context.beginPath();
	multiFillText("Start work on the User Experience team at YouTube in San Bruno, CA", 130, 287, 15, 217);
	context.strokeStyle="#f5811e";
	context.moveTo(180, 233);
	context.lineTo(180, 265);
	context.stroke();
	context.moveTo(130, 265);
	context.lineTo(347, 265);
	context.stroke();
		context.closePath();





}, false);