var MIX = function() {
	var _modal = {
		"queue": [],
		"background": null,
		"active": {},
		"timeout": null,
		"events": {
			"scroll": null,
			"resize": null
		}
	};
	var _constrainer;
	var _Models = {
		"Modal":Backbone.Model.extend({
		}),
		"Test":Backbone.View.extend({
		}),
		"ModalView":Backbone.View.extend({
			tagName: "div",
			render: function() {
				var contentHolder = $(document.createElement('div')).addClass("content");
				var actionHolder = $(document.createElement('div')).addClass("action cf");
				contentHolder.html(this.model.get('content'));

				var actions = this.model.get('actions');
				if ( _.isEmpty(actions) ) {
					actions = [
						{
							"text": "OK",
							"callback": function() {
								MIX.hideModal();
							}
						}
					];
				}
				_.each(actions, function(a) {
					var button = $(document.createElement('a')).attr('href','javascript:void(0)').addClass('button').click(function(){
						a.callback.call(this);
					}).html(a.text);
					actionHolder.append(button);
				});
				$(this.el).append(contentHolder).append(actionHolder);
				var width = this.model.get('options').width;
				console.log(width);
				width || (width = $(_constrainer).width()/2);
				$(this.el).css({
					"width": width
				});
				return this;
			},
			position: function() {
				var fixed = this.model.get('fixed');
				var coords = this.model.get('coords');
				if ( !fixed ) {
					$(this.el).center();
				} else {
					if ( !coords.left ) {
						$(this.el).centerHorizontal();
				    } else {
						$(this.el).css({
						    position: "absolute",
						    left: coords.left + "px"
						});
				    }
					if ( !coords.top ) {
						$(this.el).centerVertical();
				    } else {
						if ( coords.top < 30 ) coords.top = 30;
						$(this.el).css({
						    position: "absolute",
						    top: coords.top + "px"
						});
					}
				}
			}
		})
	};
	return {
		init: function() {
			var initMain = function() {
				_modal.background = $("#modal-background");
				_constrainer = $(".wrapper");
			};
			var initVenue = function() {
				var coords = new google.maps.LatLng(40.726336, -73.994276);
				var options = {
					zoom: 15,
					center: coords,
					mapTypeId: google.maps.MapTypeId.ROADMAP
			    };
				var map = new google.maps.Map(document.getElementById("map"), options);
				var address = "MIX Factory<br/>45 Bleecker Street @ Lafayette";
				var marker = new google.maps.Marker({
					map: map,
					position: coords,
					title: address
				});
				var infowindow = new google.maps.InfoWindow({
					content: "<div class='googlemaps content'>" + address + "</div>"
				});
				infowindow.open(map,marker);
			};
			var initHome = function() {
				$("article.home section.grid ul li").each(function(){
				}).button({
					mouseover: function() {
						$(this).children("section").removeClass("hidden");
					},
					mouseout: function() {
						$(this).children("section").addClass("hidden");
					},
					mouseleave: function() {
						$(this).children("section").addClass("hidden");
					}
				});
			};

			initMain.call(this);

			var i = arguments[0].split(" ");
			_.each(i, function(arg) {
				switch (arg) {
					case "home":
						initHome.call(this);
						break;
					case "schedule":
						initSchedule.call(this);
						break;
					case "venue":
						initVenue.call(this);
						break;
					default:
						break;
				}
			});
		},
		showModal: function() {
			var fromQueue = arguments[1];
			fromQueue || (fromQueue = false);
			if ( !fromQueue ) {
				var args = arguments[0];
				try {
					if ( _.isUndefined(args) ) throw new Error("showModal expects an object");
					if ( _.isUndefined(args.content) ) throw new Error("args.content was undefined");
					var content = args.content;
					var actions = args.actions;
					actions || (actions = {});
					var options = args.options;
					options || (options = {});
					var fixed = args.options.fixed;
					fixed || (fixed = false);
					var coords = args.coords;
					coords || (coords = {});
					var width = args.options.width;
					width || (width = $(_constrainer).width()/2);
					var height = args.options.height;
					height || (height = null);
					options = {
						"fixed": fixed,
						"coords": coords,
						"width": width,
						"height": height
					};
				} catch (e) {
					console.log(e);
					return this;
				}
				// create the new dialog
				var dialog = new _Models.Modal({
					"content": content,
					"actions": actions,
					"options": options
				});
				dialog.id = "modal" + _modal.queue.length;
			} else {
				dialog = arguments[0];
			}

			clearTimeout(_modal.timeout);
			_modal.timeout = null;

			if (!_.isEmpty(_modal.active)) {
			    _modal.queue.push(dialog);
			    return this;
			} else {
			    _modal.background.removeClass("hidden");
			}

			var e = new _Models.Test();
			console.log(e);

			var view = new _Models.ModalView({
				"model": dialog,
				"className": "modal",
				"id": dialog.id
			});
			_modal.events.scroll = function () {
				view.position();
			};
			_modal.events.resize = function () {
			    _modal.background.css({
					"width": $(document).width() + "px",
					"height": $(document).height() + "px"
			    });
				 view.position();
			};

			_modal.background.append(view.render().el);
			_modal.events.resize.call(this);
			$(window).bind({
			    "scroll": _modal.events.scroll,
			    "resize": _modal.events.resize
			});
			_modal.active.dialog = dialog;
			_modal.active.view = view;
			return this;
	    },
	    hideModal: function () {
			if (_.isEmpty(_modal.active)) return;
			var dialog = _modal.active.dialog;
			var view = _modal.active.view;
			view.remove();
			_modal.active = {};
			$(window).unbind({
			    "scroll": _modal.events.scroll,
			    "resize": _modal.events.resize
			});
			_modal.events.scroll = null;
			if ( _modal.queue.length ) {
			    var next = _modal.queue.shift();
			    var _this = this;
			    _modal.timeout = function () {
					_this.showModal(next, true);
			    };
			    setTimeout(_modal.timeout, 250);
			} else {
			   _modal.background.addClass("hidden");
			}
	    },
		showMap: function() {
			this.showModal({
				"content": "<img src=\"/24/images/installations-map.jpg\" alt=\"MIX Factory Installations Map\" />",
				"options": {
					"width": 700
				}
			});
		}
	};
}();