var surface = null;
var surface_size = null;

var gShapes = {};
var gShapeCounter = 0;
var current_shape = null;
var last_position = null;
var gfx_tool = null;
var toolSet = null;
var theEditor = null;
var bg;
var bDev = true;

function img(name) {
	return dojo.uri.dojoUri("http://www.imagechef.com/ic/symeditor/gfx_files/" + name + ".gif").toString();
}


	
function init(e) {
	BrowserDetect.init();

	dojo.debug(BrowserDetect.browser + ' ' + BrowserDetect.version + ' on ' + BrowserDetect.OS);
	
	var goodBrowser = true;
	
	if (BrowserDetect.browser.indexOf("Explorer") != -1) {
		if (BrowserDetect.version < 5.5) {
			goodBrowser = false;
		}
	} else if (BrowserDetect.browser.indexOf("Mozilla") != -1) {
		if (BrowserDetect.version < 1.8) {
			goodBrowser = false;
		}
	} else if (BrowserDetect.browser.indexOf("Firefox") != -1) {
		if (BrowserDetect.version >= 3) {
			goodBrowser = false;
		}
	} else if (BrowserDetect.browser.indexOf("Opera") != -1) {
		if (BrowserDetect.version < 8) {
			goodBrowser = false;
		}
	} else if (BrowserDetect.browser.indexOf("Safari") != -1) {
		if (BrowserDetect.version < 522) {
			goodBrowser = false;
		}
	} else if (BrowserDetect.browser.indexOf("OmniWeb") != -1) {
		goodBrowser = false;
	} else if (BrowserDetect.browser.indexOf("iCab") != -1) {
		goodBrowser = false;
	} else if (BrowserDetect.browser.indexOf("Konqueror") != -1) {
		goodBrowser = false;
	} else if (BrowserDetect.browser.indexOf("Netscape") != -1) {
		goodBrowser = false;
	} else if (BrowserDetect.browser.indexOf("unknown") != -1) {
		goodBrowser = false;
	}
	
	if (goodBrowser) {
		theEditor = new imgchf.editor();
		
	//	createToolbar();
		toolSet = new imgchf.toolSet();
		toolSet.stockTools();
	
		dojo.event.connect(theEditor.container, 'onmousedown', toolSet, 'mouseDown');
		dojo.event.connect(theEditor.container, 'onmousemove', toolSet, 'mouseMove');
		dojo.event.connect(theEditor.container, 'onmouseup', toolSet, 'mouseUp');
		dojo.event.connect(theEditor.container, 'ondblclick', toolSet, 'mouseDblClick');
		dojo.event.connect(window, "onscroll", theEditor, "windowScroll");
		dojo.event.connect(document, 'onkeyup', theEditor, 'onKeyUp');
		dojo.event.connect(document, 'onkeydown', theEditor, 'onKeyDown');
		// cancel text selection and text dragging
		dojo.event.connect(surface.getEventSource(),'ondragstart', dojo.event.browser, 'stopEvent');
		dojo.event.connect(surface.getEventSource(),'onselectstart', dojo.event.browser, 'stopEvent');
	}
	else {
		window.location = "http://www.imagechef.com/ic/checkbrowser.jsp"
	}
}

dojo.declare("imgchf.editor", null, {
 	initializer: function() {
 		this.clickAnywhere = null;
 		this.bgImage = null;
 		this.createToolbar();
 		this.initGfx();
 		this.deleteKeyPressed = false;
 		this.pathKeyPressed = false;
 		this.constrainKeyPressed = false;
 	},
	polyLineClick: function() {
		stopDrawing();
		
    toolSet.setTool("polyLine");
		bg.select("draw");
		if (theEditor.editedshape) {
//			theEditor.editedshape.removeEditHandles();
			theEditor.editedshape.hidePoints();
			theEditor.editedshape.removeHandle();
			theEditor.editedshape.setStroke();
		}
	},
	editClick: function() {
		toolSet.setTool("editTool");
	},
	ellipseClick: function() {
		toolSet.setTool("ellipse");
	},
	freehandClick: function() {
		stopDrawing();
		toolSet.setTool("freehand");
		bg.select("freehand");
		if (theEditor.editedshape) {
//			theEditor.editedshape.removeEditHandles();
			theEditor.editedshape.hidePoints();
			theEditor.editedshape.removeHandle();
			theEditor.editedshape.setStroke();
		}
	},
	lineClick: function() {
		toolSet.setTool("lineTool");
	},
	deleteClick: function() {
		if (toolSet.activeTool == toolSet.gfxToolSet.polyLine) {
			toolSet.activeTool.startOver();
		} else if (theEditor.editedshape != null) {
			theEditor.editedshape.removeShape();
			delete gShapes[theEditor.editedshape.id];
			theEditor.editedshape = null;
		}
	},
	initGfx: function() {

		var grid_size = 450;
		var grid_step = 25;
	
		this.container = dojo.byId("gfx_environment");
		this.container_position = dojo.html.abs(this.container);
		surface = dojo.gfx.createSurface(this.container, grid_size, grid_size);
		surface_size = surface.getDimensions();
		surface_size.width = parseInt(surface_size.width);
		surface_size.height = parseInt(surface_size.height);

//		surface.createImage({width:450, height:450, src: "/ic/symeditor/gfx_files/blank-background.gif"});
//		im1 = surface.createImage({width:250, height:30, src: "http://www.imagechef.com/ic/symeditor/gfx_files/clickanywhere-24.png"});
    this.mRect = surface.createRect({x: 0, y: 0, width: 450, height: 450}).setFill([255, 255, 255, 1.0]);
		this.mRect.getEventSource().setAttribute('shapeid', 0);

		surface.createLine({x1: 0, x2: grid_size, y1: 0, y2: 0}).setStroke({color: [10, 10, 10, 0.7], width: 1});
		surface.createLine({y1: 0, y2: grid_size, x1: 0, x2: 0}).setStroke({color: [10, 10, 10, 0.7], width: 1});
		surface.createLine({x1: 0, x2: grid_size, y1: grid_size, y2: grid_size}).setStroke({color: [10, 10, 10, 0.7], width: 1});
		surface.createLine({y1: 0, y2: grid_size, x1: grid_size, x2: grid_size}).setStroke({color: [10, 10, 10, 0.7], width: 1});
		
		for(var i = grid_step; i < grid_size; i += grid_step){
			surface.createLine({x1: 0, x2: grid_size, y1: i, y2: i}).setStroke({color: [10, 10, 10, 0.1], width: 1});
			surface.createLine({y1: 0, y2: grid_size, x1: i, x2: i}).setStroke({color: [10, 10, 10, 0.1], width: 1});
		}
		
		this.createClickText();
	//	makeShapes();

		var symForm = dojo.byId("symbolURL");
		var symPath = "";
		
		if (symForm != null) {
			symPath = symForm.value;
		}
//        dojo.byId("statusfield").innerHTML = "foo";
		
		if (symPath != "") {
			loadSVG(symPath);
//            dojo.byId("statusfield").innerHTML = symPath;
		}
	
	    dojo.debug('=======================================');
	    dojo.debug('Initialized Graphics');
	    dojo.debug('=======================================');
	},
	createBGImage: function(bgimg) {
		this.removeClickText();
		if (this.bgImage != null) {
			surface.remove(this.bgImage);
		}
		
		this.bgImage = surface.createImage({width:450, height:450, src: bgimg});
		this.bgImage.moveToBack();
		this.mRect.moveToBack();
	},
	
	createClickText: function() {
		if (this.clickAnywhere == null) {
			if (!dojo.render.html.ie) {
				this.clickAnywhere = surface.createImage({width:250, height:30, src: "http://www.imagechef.com/ic/symeditor/gfx_files/clickanywhere-24.png"});
				this.clickAnywhere.setTransform(dojo.gfx.matrix.translate(100,215));
			}
		}
	},
	removeClickText: function() {
		if (this.clickAnywhere != null) {
			surface.remove(this.clickAnywhere);
			this.clickAnywhere = null;
		}
	},
	createToolbar: function() {
	
		var buttonNode = null;
		
		tc = dojo.widget.createWidget("ToolbarContainer");
		dojo.byId("gfxtc").appendChild(tc.domNode);
		tb = dojo.widget.createWidget("Toolbar");
		tc.addChild(tb);
		bg = dojo.widget.createWidget("ToolbarButtonGroup", {
			name: "toolset",
			defaultButton: "freehand",
			preventDeselect: true
			});
	
		buttonNode = dojo.widget.ToolbarItem.make(img("mode-draw-rounded"),null, {toggleItem:true, name:"freehand"});
		dojo.event.connect(buttonNode.domNode, "onclick", this, "freehandClick");
		bg.addChild(buttonNode);

		buttonNode = dojo.widget.ToolbarItem.make(img("mode-draw-box"),null, {toggleItem:true, name:"draw"});
		dojo.event.connect(buttonNode.domNode, "onclick", this, "polyLineClick");
		bg.addChild(buttonNode);

		if (bDev) {
			buttonNode = dojo.widget.ToolbarItem.make(img("mode-draw-line"),null, {toggleItem:true, name:"line"});
			dojo.event.connect(buttonNode.domNode, "onclick", this, "lineClick");
	//	  dojo.event.connect(buttonNode.domNode, "onclick", this, "ellipseClick");
			bg.addChild(buttonNode);
		}
		
		buttonNode = dojo.widget.ToolbarItem.make(img("mode-move"), null, {toggleItem:true, name:"move"});
		dojo.event.connect(buttonNode.domNode, "onclick", this, "editClick");
		bg.addChild(buttonNode);
	
//	    buttonNode = dojo.widget.ToolbarItem.make(img("circle"),null,{toggleItem:true});
//	    dojo.event.connect(buttonNode.domNode, "onclick", this, "ellipseClick");
//		bg.addChild(buttonNode);
	
		tb.addChild(bg, null, {toggleItem: false});
	
		for (k = 0; k < 25; k++) {
			tb.addChild(" ", null, {toggleItem: false});
		}
		
		buttonNode = dojo.widget.ToolbarItem.make(img("trash"),null,{toggleItem:false});
		dojo.event.connect(buttonNode.domNode, "onclick", this, "deleteClick");
		
		tb.addChild(buttonNode, null, {toggleItem: false});
		
	
		dojo.debug('=======================================');
		dojo.debug('Initialized Toolbar');
		dojo.debug('=======================================');
	
	},
	windowScroll: function (event) {
		this.container_position = dojo.html.abs(this.container);
	},
	onKeyUp: function (event) {
		if (event.keyCode == event.KEY_CTRL)
			this.deleteKeyPressed = false;
		else if (event.keyCode == event.KEY_ALT && bDev)
			this.pathKeyPressed = false;
//		else if (event.keyCode == event.KEY_SHIFT)
		else if (event.keyCode == 67)
			this.constrainKeyPressed = false;
		dojo.event.browser.stopEvent(event);
			
//		dojo.debug("key released" + event.keyCode);
	},
	onKeyDown: function (event) {
		if (event.keyCode == event.KEY_CTRL) {
			this.deleteKeyPressed = true;
		}
		else if (event.keyCode == event.KEY_ALT && bDev) {
			this.pathKeyPressed = true;
		}
		else if (event.keyCode == 67) {
			this.constrainKeyPressed = true;
//			dojo.debug("shift key pressed");
		}
		dojo.event.browser.stopEvent(event);
		dojo.debug("key pressed" + event.key);
	},
	setWidth: function(width) {
		this.width = 15;
		
		if (width == 'thin')
			this.width = 5;
		else if (width == 'medium')
			this.width = 15;
		else if (width == 'thick')
			this.width = 25;
	},
	container: null,
	container_position: null,
	selectedshape: null,
	editedshape: null,
	width: 15
});

function clearDrawing () {
//	loadSVG();
	
	var shapeIter;

	if (   (toolSet.activeTool == toolSet.gfxToolSet.polyLine)
			|| (toolSet.activeTool == toolSet.gfxToolSet.freehand)) {
		toolSet.activeTool.startOver();
	}
	
	for (shapeIter in gShapes) {
		gShapes[shapeIter].removeShape();
	}

	if (theEditor.bgImage != null) {
		surface.remove(theEditor.bgImage);
	}
	
	theEditor.bgImage = null;
	gShapes = {};
	gShapeCounter = 0;
	theEditor.createClickText();
	toolSet.setTool("freehand");
	bg.select("freehand");
	
}

var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari"
		},
		{
			prop: window.opera,
			identity: "Opera"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};

//dojo.event.connect(dojo, "loaded", function() {
//	init();
//});