Floor Map jS

javaScript.js

 function coordGrabber() {

 	/**  Utilities **/
 	var utils = {
 		offsetX : function(node) {
 			var box = node.getBoundingClientRect(),
 			scroll =  document.getElementById('content').scrollTop;

 			return Math.round(box.left - scroll);

 		},
 		offsetY : function(node) { 
 			var box = node.getBoundingClientRect(),
 			scroll = document.getElementById('content').scrollLeft;

 			return Math.round(box.top - scroll);
 		},
 		rightX : function(x) {
 			return x-app.getOffset('x');
 		},
 		rightY : function(y) {
 			return y-app.getOffset('y');
 		},
 		id : function (str) {
 			return document.getElementById(str);
 		},
 		hide : function(node) {
 			node.style.display = 'none';

 			return this;
 		},
 		show : function(node) {
 			node.style.display = 'block';

 			return this;
 		},
 		foreach : function(arr, func) {
 			for(var i = 0, count = arr.length; i < count; i++) {
 				func(arr[i], i);
 			}
 		},
 		foreachReverse : function(arr, func) {
 			for(var i = arr.length - 1; i >= 0; i--) {
 				func(arr[i], i);
 			}
 		},
		stopEvent : function(e) {
			e.stopPropagation();
			e.preventDefault();

			return this;
		},
		addClass : function(node, str) {
			// node.className.baseVal for SVG-elements
			// or
			// node.className for HTML-elements
			var is_svg = node.className.baseVal !== undefined ? true : false,
			arr = is_svg ? node.className.baseVal.split(' ') : node.className.split(' '),
			isset = false;
			
			utils.foreach(arr, function(x) {
				if(x === str) {
					isset = true;
				}
			});
			
			if (!isset) {
				arr.push(str);
				is_svg ? node.className.baseVal = arr.join(' ') : node.className = arr.join(' ');
			}
			
			return node;
		},
		removeClass : function(node, str) {
			var is_svg = node.className.baseVal !== undefined ? true : false,
			arr = is_svg ? node.className.baseVal.split(' ') : node.className.split(' '),
			isset = false;
			
			utils.foreach(arr, function(x, i) {
				if(x === str) {
					isset = true;
					arr.splice(i--, 1);
				}
			});
			
			if (isset) {
				is_svg ? node.className.baseVal = arr.join(' ') : node.className = arr.join(' ');
			}
			
			return node;
		},
		hasClass : function(node, str) {
			var is_svg = node.className.baseVal !== undefined ? true : false,
			arr = is_svg ? node.className.baseVal.split(' ') : node.className.split(' '),
			isset = false;

			utils.foreach(arr, function(x) {
				if(x === str) {
					isset = true;
				}
			});
			
			return isset;
		},
		supportFileReader : (function() {
			return (typeof FileReader !== 'undefined');
		})()
	};

	/* Main object */
	var app = (function() {
		var varwrapper = utils.id('wrapper');
		var svg = utils.id('svg');
		var img = utils.id('img');
		var container = utils.id('image');
		var offset = {x: 0, y: 0};
		var shape  = 'rect';
		var is_draw = false;
		var mode = 'drawing'; // drawing && editing && preview
		var objects = [];
		var new_area = null;
		var selected_area = null;
		var edit_type;
		var events = [];
		var map;
		//var name = utils.id('img_name').value;
		var filename;
		KEYS = {
			F1     : 112,
			ESC    : 27,
			TOP    : 28,
			BOTTOM : 40,
			LEFT   : 37,
			RIGHT  : 39,
			DELETE : 46,
			I      : 73
		};
		function recalcOffsetValues() {
			
			offset.x = utils.offsetX(container) + document.getElementById('content').scrollLeft;
			offset.y = utils.offsetY(container) + document.getElementById('content').scrollTop;
		};
		/* Get offset value */
		window.addEventListener('resize', recalcOffsetValues, false);
		/* Disable selection */
		container.addEventListener('mousedown', function(e) { 
			e.preventDefault(); 
		}, false);
		/* Disable image dragging */
		img.addEventListener('dragstart', function(e){ e.preventDefault(); }, false);
		/* Add mousedown event for svg */
		function onSvgMousedown(e) {
			if (mode === 'editing') {
				if (e.target.parentNode.tagName === 'g') {
					info.unload();
					selected_area = e.target.parentNode.obj;

					app.deselectAll();
					selected_area.select();
					selected_area.delta = {
						'x' : e.pageX,
						'y' : e.pageY
					};

					if (utils.hasClass(e.target, 'helper')) {
						var helper = e.target;
						edit_type = helper.action;

						if (helper.n >= 0) { // if typeof selected_area == polygon
							selected_area.selected_point = helper.n;
						}
						
						app.addEvent(container, 'mousemove', selected_area.onEdit)
						.addEvent(container, 'mouseup', selected_area.onEditStop);
					} else if (e.target.tagName === 'rect' && e.target.tagName === 'circle' && e.target.tagName === 'polygon') {
						edit_type = 'move';
						
						app.addEvent(container, 'mousemove', selected_area.onEdit)
						.addEvent(container, 'mouseup', selected_area.onEditStop);
					};
				} else {
					app.deselectAll();
					info.unload();
				};
			};
		}
		
		container.addEventListener('mousedown', onSvgMousedown, false);
		
		/* Add click event for svg */
		function onSvgClick(e) {
			if (mode === 'drawing' && !is_draw && shape) {
				switch (shape) {
					case 'rect':
					new_area = new Rect(utils.rightX(e.pageX), utils.rightY(e.pageY));
					
					app.addEvent(container, 'mousemove', new_area.onDraw)
					.addEvent(container, 'click', new_area.onDrawStop);

					break;

				};  
			};
		};

		container.addEventListener('click', onSvgClick, false);
		
		
		function operaSvgKeydownBugFix() {
			window.focus();
		}
		if (window.navigator.appName === 'Opera') {
			container.addEventListener('mousedown', operaSvgKeydownBugFix, false);
			container.addEventListener('mouseup', operaSvgKeydownBugFix, false);
			container.addEventListener('click', operaSvgKeydownBugFix, false);
			container.addEventListener('dblclick', operaSvgKeydownBugFix, false);
		};
		
		/* Add dblclick event for svg */
		function onAreaDblClick(e) {
			if (mode === 'editing') {
				if (e.target.tagName === 'rect') {
					selected_area = e.target.parentNode.obj;
					info.load(selected_area, 600, 60);	
				};
			};
		};
		container.addEventListener('dblclick', onAreaDblClick, false);
		/* Add keydown event for document */
		function onDocumentKeyDown(e) {
			switch (e.keyCode) {
				case KEYS.F1: /* F1 key */
					help.show();
					e.preventDefault();
				break;
				case KEYS.ESC: /* ESC key */
					help.hide();
				if (is_draw) {
					is_draw = false;
					new_area.remove();
					objects.pop();
					app.removeAllEvents();
				} else if (mode === 'editing') {
					selected_area.redraw();
					app.removeAllEvents();
				};
				break;
				case KEYS.TOP: /* Top arrow key */
					if (mode === 'editing' && selected_area) {
						selected_area.setParams(selected_area.dynamicEdit(selected_area['move'](0, -1)));
						e.preventDefault();
					}
				break;
				case KEYS.BOTTOM: /* Bottom arrow key */
					if (mode === 'editing' && selected_area) {
						selected_area.setParams(selected_area.dynamicEdit(selected_area['move'](0, 1)));
						e.preventDefault();
					}
				break;
				case KEYS.LEFT: /* Left arrow key */
					if (mode === 'editing' && selected_area) {
						selected_area.setParams(selected_area.dynamicEdit(selected_area['move'](-1, 0)));
						e.preventDefault();
					}
				break;
				case KEYS.RIGHT: /* Right arrow key */
					if (mode === 'editing' && selected_area) {
						selected_area.setParams(selected_area.dynamicEdit(selected_area['move'](1, 0)));
						e.preventDefault();
					}
				break;
				case KEYS.DELETE: /* DELETE key */
					if (mode === 'editing' && selected_area) {
						app.removeObject(selected_area);
						selected_area = null;
						info.unload();
					}
				break;
				case KEYS.I: /* i (edit info) key */
					if (mode === 'editing' && selected_area) {
						var params = selected_area.params,
						x = params.x && params.cx && params[0],
						y = params.y && params.cy && params[1];

						info.load(selected_area, x + app.getOffset('x'), y + app.getOffset('y'));
					};
				break;
			};
		};
		
		document.addEventListener('keydown', onDocumentKeyDown, false);
		
		/* Returned object */
		return {
			hide : function() {
				utils.hide(wrapper);
				return this;
			},
			show : function() {
				utils.show(wrapper);
				return this;
			},
			recalcOffsetValues: function() {
				recalcOffsetValues();
				return this;
			},
			setDimensions : function(width, height) {
				svg.setAttribute('width', width);
				svg.setAttribute('height', height);
				
				container.style.height = 550 + 'px';
				container.style.width = 'auto';
				return this;
			},
			loadImage : function(url) {
				img.src = url;
				//var contentSize = document.getElementById('content').clientHeight;
				//var percent = contentSize/img.width;
				img.onload = function() {
					//$('content>img' ).width(img.width*percent);
					//$('content>img' ).height(img.height*percent);
					app.show()
					   .setDimensions(img.width,img.height)
					   .recalcOffsetValues();
					   
				};

				return this;

			},
			addNodeToSvg : function(node) {
				svg.appendChild(node);
				return this;
			},
			removeNodeFromSvg : function(node) {
				svg.removeChild(node);
				return this;
			},
			getOffset : function(arg) {
				switch(arg) {
					case 'x':
					return offset.x;
					break;
					case 'y':
					return offset.y;
					break;
				}
				return undefined;
			},
			clear : function(){
				//remove all areas
				objects.length = 0;
				while(svg.childNodes[0]) {
					svg.removeChild(svg.childNodes[0]);
				}
				info.unload();
				return this;
			},
			removeObject : function(obj) {
				utils.foreach(objects, function(x, i) {
					if(x === obj) {
						objects.splice(i, 1);
					}
				});
				obj.remove();
				return this;
			},
			deselectAll : function() {
				utils.foreach(objects, function(x) {
					x.deselect();
				});
				return this;
			},
			getIsDraw : function() {
				return is_draw;
			},
			setIsDraw : function(arg) {
				is_draw = arg;
				return this;
			},
			setMode : function(arg) {
				mode = arg;
				return this;
			},
			getMode : function() {
				return mode;
			},
			setShape : function(arg) {
				shape = arg;
				return this;
			},
			getShape : function() {
				return shape;
			},
			addObject : function(object) {
				objects.push(object);
				return this;
			},
			getNewArea : function() {
				return new_area;
			},
			resetNewArea : function() {
				new_area = null;
				return this;
			},
			getSelectedArea : function() {
				return selected_area;
			},
			setSelectedArea : function(obj) {
				selected_area = obj;
				return this;
			},
			getEditType : function() {
				return edit_type;
			},
			setFilename : function(str) {
				filename = str;
				return this;
			},
			addEditClass : function() {
				utils.addClass(svg, 'edit');
				return this;
			},
			removeEditClass : function() {
				utils.removeClass(svg, 'edit');
				return this;
			},
			addEvent : function(target, eventType, func) {
				events.push(new AppEvent(target, eventType, func));
				return this;
			},
			removeAllEvents : function() {
				utils.foreach(events, function(x) {
					x.remove();
				});
				events.length = 0;
				return this;
			},
			getImageInfo : function() {
				
				var floormap_info = new Array();
					if (!objects.length) {
						return '0 objects';
					}
					floormap_info = [img.src , document.getElementById('img_name').value];
						utils.foreachReverse(objects, function(x) {
							floormap_info.push( x.toString());
						});

				return floormap_info;
			}
		};
	})();

	/* Help block */
	var help = (function() {
		var block = utils.id('help'),
		overlay = utils.id('overlay'),
		close_button = block.querySelector('.close_button');

		function hide() {
			utils.hide(block);
			utils.hide(overlay);
		}
		
		function show() {
			utils.show(block);
			utils.show(overlay);
		}

		overlay.addEventListener('click', hide, false);

		close_button.addEventListener('click', hide, false);

		return {
			show : show,
			hide : hide
		};	
	})();

	/* Edit selected area info */
	var info = (function() {
		var form = utils.id('edit_details'),
		href_attr = utils.id('href_attr'),
		alt_attr = utils.id('alt_attr'),
		title_attr = utils.id('title_attr'),
		save_button = utils.id('save'),
		close_button = form.querySelector('.close_button'),
		sections = form.querySelectorAll('p'),
		obj,
		x,
		y,
		temp_x,
		temp_y;

		function changedReset() {
			utils.removeClass(form, 'changed');
			utils.foreach(sections, function(x) {
			utils.removeClass(x, 'changed');
			});
		}
		
		function save(e) {

			
			obj.href =  utils.id('href_attr').options[ utils.id('href_attr').selectedIndex].value;
			obj.alt =  utils.id('alt_attr').options[ utils.id('alt_attr').selectedIndex].value;
			obj.title =  utils.id('title_attr').options[ utils.id('title_attr').selectedIndex].value;
			obj.href ? obj.with_href() : obj.without_href();
			
			if(obj.href == 'Type' || obj.alt == 'Counter' || obj.title == 'Camera'){
				alert('All fields are required.');
			}
			else
			{


			changedReset();
			e.preventDefault();


			}


		};
		
		function unload() {
			obj = null;
			changedReset();
			utils.hide(form);
		}
		
		function setCoords(x, y) {
			form.style.left = (x + 5) + 'px';
			form.style.top = (y + 5) + 'px';
		}
				
		function change() {
			
			utils.addClass(form, 'changed');
			utils.addClass(this.parentNode, 'changed');
			switch(this.id) {
       				case "href_attr":
           					href = true;
           				break;
        				case "alt_attr":
            					alt = true;
            				break;
       				case "title_attr":
           					title = true;
            				break;
   			}
   			checkChanged();
		}
		
		function checkChanged() {
   			if ((href) && (alt) && (title)) {
        				utils.show(save_button);
    			}
		}

		
		save_button.addEventListener('click', save, false);
		
		href_attr.addEventListener('keydown', function(e) { e.stopPropagation(); }, false);
		alt_attr.addEventListener('keydown', function(e) { e.stopPropagation(); }, false);
		title_attr.addEventListener('keydown', function(e) { e.stopPropagation(); }, false);
		


		href_attr.addEventListener('change', change, false);
		alt_attr.addEventListener('change', change, false);
		title_attr.addEventListener('change', change, false);
		

		close_button.addEventListener('click', unload, false);
		
		
		return {
			load : function(object, new_x, new_y) {
				obj = object;
				href_attr.value = object.href ? object.href : '';
				alt_attr.value = object.alt ? object.alt : '';
				title_attr.value = object.title ? object.title : '';
				utils.show(form);
				utils.hide(save_button);
				if (new_x && new_y) {
					x = new_x;
					y = new_y;
					setCoords(x, y);
				}
			},
			unload : unload
		};
	})();


	/* Get image form */
	var get_image = (function() {
		var block = utils.id('get_image_wrapper');
		var button = utils.id('button');
		var filename = null;	
		// Drag'n'drop - the first way to loading an image
		var drag_n_drop = (function() {
			var dropzone = utils.id('dropzone');
			var dropzone_clear_button = dropzone.querySelector('.clear_button');
			var sm_img = utils.id('sm_img');
			
			if (!utils.supportFileReader) { 
				// For IE9
				utils.hide(utils.id('file_reader_support'));
			};
			
			function testFile(type) {
				switch (type) {
					case 'image/jpeg':
					case 'image/gif':
					case 'image/png':
					return true;
					break;
				}
				return false;
			}
			
			dropzone.addEventListener('dragover', function(e){
				utils.stopEvent(e);
			}, false);
			
			dropzone.addEventListener('dragleave', function(e){
				utils.stopEvent(e);
			}, false);

			dropzone.addEventListener('drop', function(e){
				utils.stopEvent(e);
				
				var reader = new FileReader(),
				file = e.dataTransfer.files[0];
				
				if (testFile(file.type)) {
					utils.removeClass(dropzone, 'error');
					
					reader.readAsDataURL(file);
					
					reader.onload = function(e) {
						sm_img.src = e.target.result;
						sm_img.style.display = 'inline-block';
						filename = file.name;
						utils.show(dropzone_clear_button);
					};
				} else {
					clearDropzone();
					utils.addClass(dropzone, 'error');
				}

			}, false);
			
			function clearDropzone() {
				sm_img.src = '';
				
				utils.hide(sm_img)
				.hide(dropzone_clear_button)
				.removeClass(dropzone, 'error');

			};
			
			dropzone_clear_button.addEventListener('click', clearDropzone, false);

			return {
				clear : clearDropzone,
				init : function() {
					dropzone.draggable = true;
					this.clear();
					utils.hide(sm_img)
					.hide(dropzone_clear_button);
				},
				test : function() {
					return sm_img.src ? true : false;
				},
				getImage : function() {
					return sm_img.src;
				}
			};
		
		})();
		
		/* Block init */
		function init() {
			drag_n_drop.init();
		}
		init();
		
		/* Block clear */
		function clear() {
			drag_n_drop.init();
			url_input.init();
		};
		
		/* Selected image loading */
		function onButtonClick(e) {
			if(utils.id('img_name').value == ''){
				alert('You must enter a name for your new Floor Map.');

			}else{
			document.getElementById('img').style.height = '550px';
 			document.getElementById('img').style.width = 'auto';
			app.loadImage(drag_n_drop.getImage()).setFilename(filename);
			
			utils.hide(utils.id('get_image_wrapper'));
			}
			e.preventDefault();
		};
		
		button.addEventListener('click', onButtonClick, false);
		
		/* Returned object */
		return {
			show : function() {

				clear();
				utils.show(block);
				
				return this;
			},
			hide : function() {
				utils.hide(block);
				
				return this;
			},
			
		};
	})();
	

	/* Buttons and actions */
	var buttons = (function() {
		var all = utils.id('nav').getElementsByTagName('li'),
		rectangle = utils.id('rect'),
		edit = utils.id('edit'),
		clear = utils.id('clear'),
		save_map = utils.id('save_map'),
		//new_image = utils.id('new_image'),
		show_help = utils.id('show_help');

		function deselectAll() {
			utils.foreach(all, function(x) {
				utils.removeClass(x, 'selected');
			});
		};

		function selectOne(button) {
			deselectAll();
			utils.addClass(button, 'selected');
		};

		function onShapeButtonClick(e) {
			// shape = rect
			app.setMode('drawing')
			.removeEditClass()
			.setShape(this.id)
			.deselectAll()
			info.unload();
			selectOne(this);
			
			e.preventDefault();
		};
	
		function onClearButtonClick(e) {
			// Clear all
			if (confirm('Clear all?')) {
				app.setMode(null)
				.removeEditClass()
				.setShape(null)
				.clear()
				deselectAll();
			}
			
			e.preventDefault();
		};
		
		function onSaveButtonClick(e) {
			var floormap_info = app.getImageInfo();
			$.ajax({
				type: "POST",
				url: Drupal.settings.basePath + 'floormap_callback',
				data: {'floormap_info':floormap_info},
				success: function(data){
				window.location = window.location.host + '/floormap_page';
				}
				});
				
		};
		
		function onEditButtonClick(e) {
			if (app.getMode() === 'editing') {
				app.setMode(null)
				.removeEditClass()
				.deselectAll();
				deselectAll();
				utils.show(svg);
			} else {
				app.setShape(null)
				.setMode('editing')
				.addEditClass();
				selectOne(this);
			}
			e.preventDefault();
		};
		
		function onNewImageButtonClick(e) {
			// New image - clear all and back to loading image screen
			if(confirm('Discard all changes?')) {
				app.setMode(null)
				.removeEditClass()
				.setShape(null)
				.setIsDraw(false)
				.clear()
				.hide()
				deselectAll();
				get_image.show();
			} 
			
			e.preventDefault();
		};
		
		function onShowHelpButtonClick(e) {
			help.show();
			
			e.preventDefault();
		};
		
		rectangle.addEventListener('click', onShapeButtonClick, false);
		clear.addEventListener('click', onClearButtonClick, false);
		save_map.addEventListener('click', onSaveButtonClick, false);
		edit.addEventListener('click', onEditButtonClick, false);
		//new_image.addEventListener('click', onNewImageButtonClick, false);
		show_help.addEventListener('click', onShowHelpButtonClick, false);
	})();	
		
	/* AppEvent constructor */
	function AppEvent(target, eventType, func) {
		this.target = target;
		this.eventType = eventType;
		this.func = func;
		
		target.addEventListener(eventType, func, false);
	};
	
	AppEvent.prototype.remove = function() {
		this.target.removeEventListener(this.eventType, this.func, false);
	};
	
	
	/* Helper constructor */
	function Helper(node, x, y) {
		this.helper = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
		this.helper.setAttribute('class', 'helper');
		this.helper.setAttribute('height', 5);
		this.helper.setAttribute('width', 5);
		this.helper.setAttribute('x', x-3);
		this.helper.setAttribute('y', y-3);
		node.appendChild(this.helper);
	};

	Helper.prototype.setCoords = function(x, y) {
		this.helper.setAttribute('x', x-3);
		this.helper.setAttribute('y', y-3);
		
		return this;
	};
	
	Helper.prototype.setAction = function(action) {
		this.helper.action = action;
		
		return this;
	};
	
	Helper.prototype.setCursor = function(cursor) {
		utils.addClass(this.helper, cursor);
		
		return this;
	};
	
	Helper.prototype.setId = function(id) {
		this.helper.n = id;
		
		return this;
	};

	/* Rectangle constructor */
	var Rect = function (x, y){
		app.setIsDraw(true);
		//alert(document.getElementById('content').scrollTop);
		this.params = {
			x : x , //distance from the left edge of the image to the left side of the rectangle
			y : y , //distance from the top edge of the image to the top side of the rectangle
			width : 0, //width of rectangle
			height : 0 //height of rectangle
		};
		
        this.href = ''; //href attribute - not required
        this.alt = ''; //alt attribute - not required
        this.title = ''; //title attribute - not required
        
        this.g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); //container
        this.rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); //rectangle
        app.addNodeToSvg(this.g);
        this.g.appendChild(this.rect);

        this.g.obj = this; /* Link to parent object */

		this.helpers = { //object with all helpers-rectangles
			center : new Helper(this.g, x-this.params.width/2, y-this.params.height/2),
			top : new Helper(this.g, x-this.params.width/2, y-this.params.height/2),
			bottom : new Helper(this.g, x-this.params.width/2, y-this.params.height/2),
			left : new Helper(this.g, x-this.params.width/2, y-this.params.height/2),
			right : new Helper(this.g, x-this.params.width/2, y-this.params.height/2),
			top_left : new Helper(this.g, x-this.params.width/2, y-this.params.height/2),
			top_right : new Helper(this.g, x-this.params.width/2, y-this.params.height/2),
			bottom_left : new Helper(this.g, x-this.params.width/2, y-this.params.height/2),
			bottom_right : new Helper(this.g, x-this.params.width/2, y-this.params.height/2)
		};
		
		this.helpers.center.setAction('move').setCursor('move');
		this.helpers.left.setAction('editLeft').setCursor('e-resize');
		this.helpers.right.setAction('editRight').setCursor('w-resize');
		this.helpers.top.setAction('editTop').setCursor('n-resize');
		this.helpers.bottom.setAction('editBottom').setCursor('s-resize');
		this.helpers.top_left.setAction('editTopLeft').setCursor('nw-resize');
		this.helpers.top_right.setAction('editTopRight').setCursor('ne-resize');
		this.helpers.bottom_left.setAction('editBottomLeft').setCursor('sw-resize');
		this.helpers.bottom_right.setAction('editBottomRight').setCursor('se-resize');
		
		this.select().redraw();
		
		/* Add this object to array of all objects */  
		app.addObject(this); 
	};

	Rect.prototype.setCoords = function(params){
		this.rect.setAttribute('x', params.x);
		this.rect.setAttribute('y', params.y);
		this.rect.setAttribute('width', params.width);
		this.rect.setAttribute('height', params.height);

		this.helpers.center.setCoords(params.x + params.width/2, params.y + params.height/2);
		this.helpers.top.setCoords(params.x + params.width/2, params.y);
		this.helpers.bottom.setCoords(params.x + params.width/2, params.y + params.height);
		this.helpers.left.setCoords(params.x, params.y + params.height/2);
		this.helpers.right.setCoords(params.x + params.width, params.y + params.height/2);
		this.helpers.top_left.setCoords(params.x, params.y);
		this.helpers.top_right.setCoords(params.x + params.width, params.y);
		this.helpers.bottom_left.setCoords(params.x, params.y + params.height);
		this.helpers.bottom_right.setCoords(params.x + params.width, params.y + params.height);
		
		return this;
	};

	Rect.prototype.setParams = function(params){
		this.params.x = params.x;
		this.params.y = params.y;
		this.params.width = params.width;
		this.params.height = params.height;
		
		return this;
	};
	
	Rect.prototype.redraw = function() {
		this.setCoords(this.params);
		
		return this;
	};
	
	Rect.prototype.dynamicDraw = function(x1,y1,square){
		var x0 = this.params.x,
		y0 = this.params.y,
		new_x,
		new_y,
		new_width,
		new_height,
		delta,
		temp_params;
		
		new_width = Math.abs(x1-x0);
		new_height = Math.abs(y1-y0);
		
		if (square) {
			delta = new_width-new_height;
			if (delta > 0) {
				new_width = new_height;
			} else {
				new_height = new_width;
			}
		}

		if (x0>x1) {
			new_x = x1;
			if (square && delta > 0) {
				new_x = x1 + Math.abs(delta);
			}
		} else {
			new_x = x0;
		}
		
		if (y0>y1) {
			new_y = y1;
			if (square && delta < 0) {
				new_y = y1 + Math.abs(delta);
			}
		} else {
			new_y = y0;
		}
		
		temp_params = { /* params */
			x : new_x,
			y : new_y,
			width : new_width,
			height: new_height
		};
		
		this.setCoords(temp_params);
		
		return temp_params;
	};
	
	Rect.prototype.onDraw = function(e) {
		var _n_f = app.getNewArea(),
		square = e.shiftKey ? true : false;

		_n_f.dynamicDraw(utils.rightX(e.pageX), utils.rightY(e.pageY), square);
	};
	
	Rect.prototype.onDrawStop = function(e) {
		var _n_f = app.getNewArea(),
		square = e.shiftKey ? true : false;

		_n_f.setParams(_n_f.dynamicDraw(utils.rightX(e.pageX), utils.rightY(e.pageY), square)).deselect();
		
		app.removeAllEvents()
		.setIsDraw(false)
		.resetNewArea();
	};
	
	Rect.prototype.move = function(dx, dy) { //offset x and y
		var temp_params = Object.create(this.params);
		
		temp_params.x += dx;
		temp_params.y += dy;
		
		return temp_params;
	};
	
	Rect.prototype.editLeft = function(dx, dy) { //offset x and y
		var temp_params = Object.create(this.params);
		
		temp_params.x += dx; 
		temp_params.width -= dx;
		
		return temp_params;
	};
	
	Rect.prototype.editRight = function(dx, dy) { //offset x and y
		var temp_params = Object.create(this.params);
		
		temp_params.width += dx;
		
		return temp_params;
	};
	
	Rect.prototype.editTop = function(dx, dy) { //offset x and y
		var temp_params = Object.create(this.params);
		
		temp_params.y += dy;
		temp_params.height -= dy;
		
		return temp_params;
	};
	
	Rect.prototype.editBottom = function(dx, dy) { //offset x and y
		var temp_params = Object.create(this.params);
		
		temp_params.height += dy;
		
		return temp_params;
	};
	
	Rect.prototype.editTopLeft = function(dx, dy) { //offset x and y
		var temp_params = Object.create(this.params);
		
		temp_params.x += dx;
		temp_params.y += dy;
		temp_params.width -= dx;
		temp_params.height -= dy;
		
		return temp_params;
	};
	
	Rect.prototype.editTopRight = function(dx, dy) { //offset x and y
		var temp_params = Object.create(this.params);
		
		temp_params.y += dy;
		temp_params.width += dx;
		temp_params.height -= dy;
		
		return temp_params;
	};
	
	Rect.prototype.editBottomLeft = function(dx, dy) { //offset x and y
		var temp_params = Object.create(this.params);
		
		temp_params.x += dx;
		temp_params.width -= dx;
		temp_params.height += dy;
		
		return temp_params;
	};
	
	Rect.prototype.editBottomRight = function(dx, dy) { //offset x and y
		var temp_params = Object.create(this.params);
		
		temp_params.width += dx;
		temp_params.height += dy;
		
		return temp_params;
	};
	
	Rect.prototype.dynamicEdit = function(temp_params, save_proportions) {
		if (temp_params.width < 0) {
			temp_params.width = Math.abs(temp_params.width);
			temp_params.x -= temp_params.width;
		}
		
		if (temp_params.height < 0) {
			temp_params.height = Math.abs(temp_params.height);
			temp_params.y -= temp_params.height;
		}
		
		if (save_proportions) {
			var proportions = this.params.width / this.params.height,
			new_proportions = temp_params.width / temp_params.height,
			delta = new_proportions - proportions,
			x0 = this.params.x,
			y0 = this.params.y,
			x1 = temp_params.x,
			y1 = temp_params.y;

			if (delta > 0) {
				temp_params.width = Math.round(temp_params.height * proportions);
			} else {
				temp_params.height = Math.round(temp_params.width / proportions);
			}
			
		}
		
		this.setCoords(temp_params);
		
		return temp_params;

	};
	
	Rect.prototype.onEdit = function(e) {
		var _s_f = app.getSelectedArea();
		var edit_type = app.getEditType();
		var save_proportions = e.shiftKey ? true : false;

		_s_f.dynamicEdit(_s_f[edit_type](e.pageX - _s_f.delta.x, e.pageY - _s_f.delta.y), save_proportions);
	};
	
	Rect.prototype.onEditStop = function(e) {
		var _s_f = app.getSelectedArea(),
		edit_type = app.getEditType(),
		save_proportions = e.shiftKey ? true : false;

		_s_f.setParams(_s_f.dynamicEdit(_s_f[edit_type](e.pageX - _s_f.delta.x, e.pageY - _s_f.delta.y), save_proportions));
		app.removeAllEvents();
	};
	
	Rect.prototype.remove = function() {
		app.removeNodeFromSvg(this.g);
	};
	
	Rect.prototype.select = function() {
		utils.addClass(this.rect, 'selected');
		
		return this;
	};
	
	Rect.prototype.deselect = function() {
		utils.removeClass(this.rect, 'selected');
		
		return this;
	};
	
	Rect.prototype.with_href = function() {
		utils.addClass(this.rect, 'with_href');
		
		return this;
	}
	
	Rect.prototype.without_href = function() {
		utils.removeClass(this.rect, 'with_href');
		
		return this;
	}
	//to html map area code
	Rect.prototype.toString = function() { 
	    	var x2 = this.params.x + this.params.width;
	    	var y2 = this.params.y + this.params.height;
	    	return  this.href+' '+ this.alt+' '+ this.title+' '+ (this.params.x+27)+' '+ (this.params.y+20)+' '+ (x2+27)+' '+ (y2+20);
	    	
	};
};


function checkPage() {
	
	if (window.location.pathname == '/floormap_page'){
		alert(window.location.pathname);
		hideAgentInfo();	
	}else if (window.location.pathname == '/floormap_page/setup_floormap') {
		alert(window.location.pathname);
		coordGrabber();
	}
}

function displayAgentInfo(top,left,floormap,uid) {
 	
 	var bubble_info = '';
 	bubble_info += floormap+','+uid;
   	
 	$.ajax({
		type: "POST",
		url: Drupal.settings.basePath + 'floormap_callback',
		data: {'bubble_info':bubble_info},
		success: function(data){
		document.getElementById('agent_info_bubble').innerHTML = data;
		document.getElementById('agent_info_bubble').style.display = "block";
		document.getElementById('agent_info_bubble').style.top = top+'px';
   		document.getElementById('agent_info_bubble').style.left = left+'px';
	}
	});
	
	
     		
}
function hideAgentInfo() {
 	document.getElementById('img').style.height = '550px';
 	document.getElementById('img').style.width = 'auto';
 	document.getElementById('agent_info_bubble').style.display = "none";
 	document.getElementById('agent_info_bubble').innerHTML = '#';
	
}

document.addEventListener("DOMContentLoaded", checkPage, false);