var canvas;
	  var imgPanel;
	  var strokeColor = "#000000";
	  var bgColor;
	  
	  function init() {
		  DemoCanvas.init();
	  }	  
	  
      var DemoCanvas = {
         init : function() {
			this.activeTool = null;
			
         canvas = new Paint ("canvas", 300, 300, 300, 300,"#FFF");			
         canvas.init(); 
      
         if (document.all || window.opera) {
            document.body.onkeydown = DemoCanvas.handleKeyDown;
         } else {
            document.addEventListener("keydown", DemoCanvas.handleKeyDown, false);
         }
			
			var container = document.getElementById("panel_container");
			
         var panel = new YAHOO.widget.Panel("panel", { width:"320px", close:false, visible:false, constraintoviewport:true });
         panel.render();

      //-- attach events
         panel.dragEvent.subscribe(function(scope, param, obj) {
            if(param[0] == "endDrag") {
               canvas.recalcPosition();
            }
         });

         panel.showEvent.subscribe(function(scope, param, obj) {
         canvas.recalcPosition();
         });            
      //--
      
         imgPanel = new YAHOO.widget.Panel("imgPanel", { x:350, y:200, width:"320px", visible:false, constraintoviewport:true });            
         imgPanel.render();
			
			//tools
			this.addListener('arrowTool',	DemoCanvas.toggleArrowMode);
			this.addListener('penTool',		DemoCanvas.togglePenMode);
			this.addListener('bezierTool',	DemoCanvas.toggleBezierMode);
			this.addListener('lineTool',	DemoCanvas.toggleLineMode);
			this.addListener('ellipseTool', DemoCanvas.toggleEllipseMode);
			this.addListener('rectangleTool', DemoCanvas.toggleRectangleMode);
			this.addListener('exportTool',	DemoCanvas.actionExport);
			this.addListener('eraseTool',	DemoCanvas.eraseMode);
			
			//colors
			this.addListener('black_color', DemoCanvas.setColor, {value : "#000000"});
			this.addListener('white_color', DemoCanvas.setColor, {value : "#FFFFFF"});
			this.addListener('red_color',   DemoCanvas.setColor, {value : "#FF0000"});
			this.addListener('or_color',    DemoCanvas.setColor, {value : "#FF9900"});
			this.addListener('y_color',     DemoCanvas.setColor, {value : "#FFFF00"});
			this.addListener('g_color',     DemoCanvas.setColor, {value : "#00CC00"});
			this.addListener('b_color',     DemoCanvas.setColor, {value : "#33FFFF"});
			this.addListener('bb_color',    DemoCanvas.setColor, {value : "#0099CC"});
			this.addListener('f_color',     DemoCanvas.setColor, {value : "#6600FF"});
			
			// set bgcolor
			this.addListener('bg_color',    DemoCanvas.setBgColor);			
         panel.show();
         
       },
		 
		 setBgColor : function() {
			 bgColor = strokeColor;
			 canvas.setFillColor(bgColor);
			 canvas.applyFill();
		 },
		 
		 setColor : function(e, color) {
			 canvas.setStrokeColor(color.value);
			 canvas.applyStroke();
			 strokeColor = color.value;
		 },
		 
		 addListener : function(id, callback, color) {
			if(obj = document.getElementById(id)) {
				YAHOO.util.Event.addListener(obj, 'click', callback, color);
			}
		 },
         
      handleKeyDown : function(evt) {
         var keyCode = (evt ? evt.keyCode : event.keyCode);
         
         if (keyCode == 27) {
            canvas.finishBezier();
            canvas.finishPolyline();
         }
      },
		 
		 toggleArrowMode : function() {
            canvas.toggleSelectionMode();		 
		 },
         
      togglePenMode : function() {
         canvas.togglePenMode();
      },
		 
		 toggleEllipseMode : function(){
            canvas.toggleEllipseMode();		 
		 },
		 
		 toggleLineMode : function() {
            canvas.toggleLineMode();
		 },
		 
		 toggleRectangleMode : function() {
            canvas.toggleRectMode();
		 },
		 
		 toggleBezierMode : function() {
            canvas.toggleBezierMode();
		 },
		 
		 eraseMode : function() {
			 canvas.deleteFocusedObject();
		 },
		 
		 actionExport : function() {
		 	canvas.performSave("JPG", DemoCanvas._callbackExport);
		 },
		 
		 _callbackExport : function(result, URL) {
			if (result == 0) {
				if(img = document.getElementById('result_img')) {
					img.src = URL;
					imgPanel.show();
				}
			} else {
				alert("Saving FAILED. Try again.");
			}		 
		 }		 
      };

YAHOO.util.Event.addListener(this, 'load', init);