kodiak 0.0.1

data/test/app/stylesheets/less/application.fonts.less

@@ -0,0 +1,26 @@
+/* application.fonts */
+
+// Bebas
+@font-face {
+	font-family: 'Bebas';
+	src: url('/fonts/BebasNeue-webfont.eot');
+	src: url('/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
+	     url('/fonts/BebasNeue-webfont.woff') format('woff'),
+	     url('/fonts/BebasNeue-webfont.ttf') format('truetype'),
+	     url('/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+// Pictos
+@font-face {
+	font-family: 'Pictos';
+	src: url('/fonts/pictos-web.eot');
+	src: url('/fonts/pictos-web.eot?#iefix') format('embedded-opentype'),
+			 url('/fonts/pictos-web.woff') format('woff'),
+			 url('/fonts/pictos-web.ttf') format('truetype'), 
+			 url('/fonts/pictos-web.svg#webfontIyfZbseF') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+

data/test/app/stylesheets/less/application.master.less

@@ -0,0 +1,419 @@
+@import "../../../lib/stylesheets/less/global.reset";
+@import "../../../lib/stylesheets/less/global.methods";
+@import "../../../lib/stylesheets/less/global.utility";
+@import "application.fonts";
+
+// global vars
+@radius: 5px;
+@pad: 20px;
+@marg: 15px;
+
+@blue: #43a8d8;
+@red: #eb2020;
+@green: #348013;
+
+html {
+	width: 100%; height: 100%;
+	background: #000;
+}
+
+body {
+	min-width: 100%; height: 100%;
+	position: relative;
+	font: 13px/normal "Helvetica Neue", Arial, Helvetica, sans-serif;
+	color: #FFF;
+	background: #000;
+	.shadow();
+}
+
+h1, h2, h3, h4, h5 { font-weight: bold; }
+
+h1 { font-size: 22px; margin-bottom: @marg; }
+h2 { font-size: 20px; margin-bottom: 10px;}
+h3 { 
+	font-size: 18px; 
+	color: #AAA; 
+	margin-bottom: 5px;
+	a {
+		font-size: 13px;
+		line-height: 18px;
+		font-weight: normal;
+		text-decoration: underline;
+	}
+}
+
+
+h4 {
+	font-size: 15px;
+	a {
+		font-size: 13px;
+		margin-left: 5px;
+		font-weight: normal;
+	}
+}
+
+h5 {
+	font-size: 14px;
+	color: #777;
+}
+
+a {
+	color: @blue;
+	text-decoration: none;
+
+	&:hover {
+		color: @blue * 0.8;
+		text-decoration: underline;
+	}
+
+	&.delete, &.cancel {
+		color: @red;
+		&:hover {
+			color: @red * 0.8;
+		}
+	}
+
+	&.save {
+		color: @green;
+		&:hover {
+			color: @green * 0.8;
+		}
+	}
+
+	&.toggle-cancel {
+		&.active {
+			color: @red;
+			&:hover {
+				color: @red * 0.8;
+			}
+		}
+	}
+}
+
+button {
+	display: inline-block;
+	color: #000;
+	padding: 6px 12px;
+	.gradient(#DDD,#BBB,#DDD);
+	.highlight();
+
+	&:hover {
+		cursor: pointer;
+		.gradient(#FFF,#CCC,#DDD);
+	}
+
+	&:active {
+		.gradient(#CCC,#EEE,#DDD);
+		color: #000;
+	}
+}
+
+
+.button(){
+	color: #CCC;
+	padding: 5px 10px;
+	border: 1px solid #111;
+	text-decoration: none;
+	font-weight: normal;	
+	-webkit-box-shadow: inset 0 1px 0px rgba(255,255,255,0.2);
+ 	-moz-box-shadow: inset 0 1px 0px rgba(255,255,255,0.2);
+  box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2);
+	.rounded(3px);
+	.gradient(#555,#333,#444);
+	
+	
+	&:hover {
+		color: #FFF;
+		text-decoration: none;
+		.gradient(@blue, @blue*0.7, @blue);
+	}
+	
+	&:active {
+		.gradient(@blue*0.7, @blue, @blue);
+	}
+	
+	b {
+		margin-right: 5px;
+	}
+
+	&.add {
+		&:hover { .gradient(@green, @green*0.7, @green); }
+		&:active { .gradient(@green*0.7, @green, @green); }		
+	}
+
+	&.delete {
+		&:hover { .gradient(@red,@red*0.7,@red); }
+		&:active { .gradient(@red*0.7,@red,@red); }		
+	}
+}
+
+
+ul.sxs {
+	display: block;
+	li {
+		display: block;
+		float: left;
+		a {
+			display: block;
+		}
+	}
+}
+
+ul.actions {
+	margin: @marg 0;
+	li {
+		a {
+			.button();
+		}
+		&.left {
+			a {
+				border-right: 0;
+				.left-rounded(3px);				
+			}
+		}
+		&.right {
+			a {
+				.right-rounded(3px);
+			}
+		}		
+	}
+}
+
+.pictos { font-family: 'Pictos'; }
+.light { font-weight: 300; }
+
+	b { .pictos(); }
+
+
+
+
+// layout
+
+@panel_width: 250px;
+
+div#main {
+	position: absolute;
+	z-index: 0;
+	top: 0; right: 0;
+	left: @panel_width + (2 * @pad); bottom: 0;
+
+	div#map {
+		width: 100%; height: 100%;
+	}
+	
+	div#loading {
+		display: none;
+		position: absolute;
+		top: 0; right: 0;
+		width: 100%; height: 100%;
+		z-index: 9999;
+		background: rgba(0,0,0,0.8);
+		
+		img {
+			display: block;
+			width: auto; height: auto;
+			position: absolute;
+			top: 50%; left: 50%;
+		}
+	}	
+}
+
+div#panels {
+	position: absolute;
+	z-index: 1;
+	top: 0; bottom: 0; left: 0;
+	background: rgba(0,0,0,0.5);
+}
+
+div.panel {
+	width: @panel_width;
+	position: absolute;
+	top: 0; bottom: 0; left: 0;
+	padding: @pad;
+	.gradient(#333,#111,#222);
+}
+
+div.panel div.panel {
+	display: none;
+	left: -100%;
+	.boxshadow(0, 0, 20px, 1);
+}
+
+
+
+
+ul.nav {
+	margin-bottom: @marg;
+
+	li {
+		display: block;
+		position: relative;
+
+		a {
+			display: block;
+			position: relative;
+			font-size: 18px;
+			line-height: 1;
+			font-weight: bold;
+			padding: 10px 0px;
+			border-top: 1px solid #444;
+			border-bottom: 1px solid #000;
+			text-decoration: none;
+			color: #AAA;
+			.shadow();
+
+			b {
+				font-size: 60%;
+				line-height: inherit;
+			}
+
+			b.check {
+				font-size: 100%;
+				margin-right: 10px;
+				color: #444;
+			}
+
+			&.active {
+				color: #FFF;
+				b.check {
+					color: @green;
+					text-shadow: 0 0 20px rgba(52, 128, 19, 0.5);
+				}
+			}
+
+			&:hover {
+				color: #FFF;
+				text-decoration: none;
+				b.check {
+					color: inerhit;
+				}
+			}			
+
+		}
+
+		.mini {
+			.button();
+			position: absolute;
+			top: 10px; right: 0px;
+			font-size: 12px;
+			line-height: 1;
+			padding: 4px 8px;
+		}
+	}
+}
+
+
+ul.overlays {
+	margin-bottom: 10px;
+	padding: 10px 0;
+	border-top: 1px solid #444;
+}
+
+
+
+div#menu {
+
+	div#header {
+		margin-bottom: 10px;
+		.shadow();
+		h1 {
+			margin-bottom: 0;
+		}
+	}
+
+	ul#main-menu {
+		li {
+			a {
+				padding: 15px 0px 15px;
+				padding-left: 45px;
+				b {
+					display: block;
+					font-size: 22px;
+					color: #555;
+					border: 2px solid #555;
+					.rounded(4px);
+					padding: 2px 2px 1px;
+					position: absolute;
+					top: 10px; left: 0;
+				}
+				&.tucked {
+					display: none;
+				}
+			}
+		}
+	}
+
+	&.inactive {
+		width: 50px;
+		div#header {
+			display: none;
+		}
+
+		ul#main-menu {
+
+			li {
+				a {
+					width: 50px; height: 60px;
+					padding: 0;
+					span {
+						display: none;
+					}
+					b {
+						font-size: 31px;
+						padding: 4px 4px 3px;
+						left: 3px;
+						.gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.5), #222);
+						&:hover {
+							color: #888;
+							border-color: #888;
+							.gradient( #333, #222, #222);
+						}
+					}
+					&.tucked {
+						display: block;
+					}
+				}
+			}
+		}
+	}
+}
+
+form {
+
+	label {
+		display: block;
+		margin-bottom: 5px;
+		font-weight: bold;
+		color: #CCC;
+	}
+
+	input {
+		display: block;
+		width: @panel_width - 10px;
+		padding: 5px;
+		font: inherit;
+		border: 1px solid #CCC;
+		margin-bottom: 10px;
+		.gradient(#DDD,#FFF,#FFF);
+	}
+
+
+}
+
+
+
+div.flyout {
+	display: none;
+	position: absolute;
+	top: @pad; left: 100%;
+	padding: @pad;
+	border: 1px solid rgba(0,0,0,0.9);
+	.gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.9), #000);
+	
+	h3 {
+		color: #FFF;
+	}
+}
+
+
+

data/test/public/scripts/application.js

@@ -0,0 +1,451 @@
+// require utils.hash
+// require jquery
+
+var Application = Application || function(data){
+
+	var self = this;
+	var fxspeed = 200;
+	var hash = new Utils.Hash();
+	var $loading = $("#loading");
+
+//
+
+	self.initialize = function(){
+		self.map = new Map(data.map, "map");		
+		self.panels.init();
+		self.layers.init();
+		self.overlays.init();
+		self.observe();
+		return self;
+	}
+
+//
+
+	self.observe = function(){
+
+		$("a.flyout-trigger").live('click',function(e){
+			e.preventDefault();
+			var href = $(this).attr("href");
+			var $remote = $(href);
+
+
+
+
+			if( $remote.is(':hidden') ){
+				$remote.siblings('.flyout').slideUp(fxspeed);
+				$remote.slideDown(fxspeed);				
+			}
+			else {
+				$remote.slideUp(fxspeed);
+			}
+		});
+		return self;
+	}
+
+
+
+
+
+
+//
+
+	self.panels = {
+
+		init : function(){
+			this.build();
+			this.observe();
+		},
+
+		build : function(){
+
+			if( hash.element() ) {
+				var $panel = $(hash.element());
+				self.panels.show($panel);
+			} else {
+				$panel = $('#panel .panel').eq(0);
+				self.panels.show($panel);
+			}
+
+		},
+
+		observe : function(){
+
+			hash.onChange( function(){
+				var $panel = $(hash.element());
+				self.panels.show($panel);
+			});
+
+			$('.hash-trigger').live('click', function(e){
+				e.preventDefault();
+				e.stopPropagation();
+				var href = $(this).attr("href");
+				hash.set(href);
+			});
+
+			$('.panel').live('click',function(e){
+				if ( $(this).hasClass("active") ) {
+					e.stopPropagation();
+
+					var id = $(this).attr("id");
+
+					if ( id ) {
+						hash.set(id);
+					}
+
+				} else {
+					return false;
+				}
+			});
+		},
+
+		show : function($panel){
+			var fxs = 200;
+			var animation = {};
+			var css = {};
+
+			if ( $panel.parents('.panel').length ) {
+				animation.opacity = 1;
+
+				if ( $panel.parents('.panel').length == 1 ){
+					animation.left = "80px";
+				}
+				else {
+					animation.left = "20px";
+				}
+
+				if( $panel.is(':hidden') ){
+					css.display = "block";
+					css.opacity = 0;
+				}
+			}
+
+			$panel.parents('.panel').each(function(){
+				var css = {
+					display : 'block',
+					opacity : 1
+				};
+				if ( $(this).parents('.panel').length == 1 ){
+					css.left = "80px";
+				}
+				else {
+					css.left = "0px";
+				}
+				$(this).css(css).addClass("inactive");
+			});
+
+			$panel.css(css).animate(animation, fxs, function(){
+				$panel.removeClass("inactive").addClass("active");
+			});
+
+			$panel.siblings('.panel').each(function(){
+				$(this).removeClass("active").addClass("inactive").fadeOut(fxs, function(){
+					$(this).css("left","-100%");
+				});
+			});
+
+			$panel.children('.panel').each(function(){
+				$(this).removeClass("active").addClass("inactive").fadeOut(fxs, function(){
+					$(this).css("left","-100%");
+				});
+			});
+		}
+
+	};
+
+//
+
+	self.layers = {
+
+		init : function(){
+			this.build();
+			this.observe();
+		},
+		
+		build : function(){
+			
+			self.loader.start();
+			
+			var layers = self.map.layers;
+			self.map.layers = {};
+
+			for ( var index in layers ) {
+				var layer = layers[index];
+				self.map.layers[layer.id] = new Layer(layer);
+			}
+
+			self.layers.refresh();
+		},
+
+
+		observe : function(){
+
+			$(".layer-toggle").live('click', function(e){
+				e.preventDefault();
+				var id = $(this).attr("rel");
+				var layer = self.map.layers[id];
+				self.layers.toggle(layer, $(this));
+			});
+
+			$('.delete-layer').live('click', function(e){
+				e.preventDefault();
+				e.stopPropagation();
+				var href 	= $(this).attr("href");
+				var id 		= $(this).attr("data-layer-id");
+				var layer = self.map.layers[id];
+				if (confirm("Are you sure?")) {
+					self.layers.remove(layer, href);
+				}
+			});
+
+			$('#new-layer form').submit(function(e){
+				e.preventDefault();
+				self.loader.start();
+				var $map_id = $(this).children("input[name='map_id']");
+				var $name = $(this).children("input[name='name']");
+
+				var data = {
+					map_id : $map_id.val(),
+					name	 : $name.val()
+				} 
+
+				$.post("/api/layers/create", data,
+					function(layer) {
+						self.map.layers[layer.id] = new Layer(layer);						
+						$('#new-layer').slideUp(fxspeed);
+						$name.val('');
+						self.layers.refresh();
+					}, 'json'
+				);
+
+			});
+
+		},
+
+		
+		refresh : function(){
+			self.loader.start();
+			
+			$("#layers > ul.nav").fadeOut(fxspeed, function(){
+				$(this).remove();
+			});
+			
+			$("#layers > .panel").fadeOut(fxspeed, function(){
+				$(this).remove();
+			});			
+			
+			$.post("/api/layers/index", {},
+				function(response) {
+					$("#layers").append(response);
+					self.panels.build();
+					self.loader.stop();
+				}
+			);			
+		},
+
+
+		toggle : function(layer, $element){
+
+			if ( layer.hidden ) {
+				layer.show();
+				$element.addClass('active');
+			}
+			else {
+				layer.hide();
+				$element.removeClass('active');
+			}
+
+		},
+
+		remove : function(layer, href){
+			self.loader.start();
+			layer.hide();
+			var url = "/api/layers/delete/" + layer.id;
+			$.post(url, {}, function(response){
+				self.loader.stop();
+				hash.set(href);
+				var $anchor = $("#layers > ul.nav > li > a[rel='" + layer.id + "']");
+				var $li = $anchor.parent('li');
+				$li.delay(fxspeed).fadeOut(fxspeed);
+			});
+		}
+
+	};
+
+//
+
+	self.overlays = {
+
+		init : function(){
+			this.build();
+			this.observe();
+		},
+		
+		build : function(){
+			for ( var index in self.map.layers ) {
+				var layer = self.map.layers[index];
+				
+				console.log(layer);
+				
+
+				var overlays = layer.overlays;
+
+				layer.overlays = {};
+				
+				for ( var index in overlays ) {
+					var overlay = overlays[index];
+					switch ( overlay.type ) {
+						case 'polygon' :
+							layer.overlays[overlay.id] = new Polygon(overlay);						
+							break;							
+						case 'marker' : 
+							layer.overlays[overlay.id] = new Marker(overlay);						
+							break;							
+						case 'line' : 
+							layer.overlays[overlay.id] = new Line(overlay);						
+							break;						
+					}
+				}
+			}
+
+					
+		},
+
+		observe : function(){
+
+			$(".draw-overlay").click(function(e){
+				e.preventDefault();
+
+				var layer_id = $(this).siblings("input[name='layer_id']").val();
+
+				overlay = map.layers[layer_id].addOverlay({
+					layer_id : layer_id,
+					points: [{ lat: 0, lng: 0 },{ lat: 0, lng: 0 }],
+			    strokeColor: "#FF00FF",
+			    strokeOpacity: 0,
+			    strokeWeight: 0,
+			    fillColor: "#F0F",
+			    fillOpacity: 0.5
+				});
+
+				overlay.draw();
+			});
+
+			$(".clear-overlay").click(function(e){
+				e.preventDefault();
+				overlay.remove();
+			});
+
+			$(".save-overlay").click(function(e){
+				e.preventDefault();
+				var name = $(this).siblings("input[name='name']").val();
+				if ( name == "" ){
+					alert("Please provide a name for this overlay");
+					return false;
+				}
+				else {
+					overlay.name = name;
+					self.overlays.save(overlay);
+				}
+			});
+
+		},
+
+		save : function(overlay){
+			self.loader.start();
+
+			var data = {
+				name : overlay.name,
+				layer_id : overlay.data.layer_id
+			};
+
+			$.post("/api/overlays/create", data,
+				function(data) {
+					overlay.id = data.id;
+
+					var points = overlay.data.points;
+
+					for ( var index in points ) {
+						points[index].overlay_id = overlay.id;
+					}
+
+					$.post("/api/points/create", { points: points },
+						function(response) {
+							self.loader.stop();
+						}
+					);
+				}
+			);
+		},
+
+		remove : function(overlay){
+
+		}
+
+	};
+
+
+
+
+//
+
+	self.loader = {
+
+		start : function(){
+			$loading.fadeIn(fxspeed);
+		},
+
+		stop : function(){
+			$loading.delay(500).fadeOut(fxspeed);
+		}
+
+	};
+
+//
+
+
+
+
+// self.map.canvas.setOptions({ draggableCursor: 'crosshair' });
+// 
+// self.data.paths = [];		
+// self.data.points = [];
+// 
+// google.maps.event.addListener(self.map.canvas, 'click', function(mdEvent) {
+// 
+// 	google.maps.event.addListener(self.map.canvas, 'mousemove', function(event) {
+// 		self.addPoint({ lat: event.latLng.lat(), lng: event.latLng.lng() });
+//   });
+// 
+// 	google.maps.event.addListener(self.map.canvas, 'click', function(event) {
+// 		google.maps.event.clearListeners(self.map.canvas);
+// 		google.maps.event.clearListeners(self.polygon);				
+//   });
+// 
+// 	google.maps.event.addListener(self.polygon, 'mousemove', function(event) {
+// 		self.addPoint({ lat: event.latLng.lat(), lng: event.latLng.lng() });
+//   });
+// 
+// 	google.maps.event.addListener(self.polygon, 'click', function(event) {
+// 		google.maps.event.clearListeners(map.canvas);
+// 		google.maps.event.clearListeners(self.polygon);				
+//   });
+// 
+// });
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+	return self.initialize();
+};