(function() {
	function PostKey() {
		this.container = document.getElementById('postKey').parentNode;
		self = this;
		
		this.sources = [];
		this.category = [];
		this.location = [];
	};
	
	PostKey.prototype.init = function() {
		self.drawForm();
		self.addStyles();
		self.callReferenceAPIs();
	}
	
	PostKey.prototype.drawForm = function() {
		var form = createElem('form', {
			action : '#',
			cssClass : 'threeTaps',
			content : createElem('div', {
				content : [
					createElem('input', {
						type : 'text',
						placeholder : 'Enter PostKey',
						name : 'postKey',
						autocomplete : 'autocomplete'
					}),
					createElem('input', {
						type : 'submit',
						value : 'Submit'
					})
				]
			})
		});
		addEvent(form, 'submit', function(e) {
			e.preventDefault();
			post.callPostKeyAPI(this.elements[0].value);
		});
		this.container.appendChild(form);
	}
	PostKey.prototype.drawModal = function(data) {
		var doc = {
			height : window.innerHeight,
			width : window.innerWidth
		}
		for (prop in data) {
			if (typeof data[prop] == "string" && data[prop].indexOf('{') != -1) {
				data[prop] = JSON.parse(data[prop]);
			}
		}
		var date = data.timestamp.replace(/(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/, "$1,$2,$3,$4,$5,$6").split(",");
		data.timestamp = new Date(date[0],date[1]-1,date[2],date[3],date[4],date[5])
		// var card = eval('this.draw' + data.source)(data);
		var location = searchArray(this.location, 'code', data.location);
		var category = searchArray(this.category, 'code', data.category);
		if (data.source == "E_BAY") {
			data.body = "<iframe src='http://www.3taps.com/desc/" + data.externalId + "' style='border: 0; overflow-y: hidden;' width='100%'></iframe>";
		};
		var modal = createElem('div', {
			id : 'overlayContainer',
			style : 'height: ' + doc.height + 'px; width: ' + doc.width + 'px; position: fixed; top: 0; left: 0; background: rgba(0,0,0,.5);',
			content : createElem('div', {
				cssClass : 'card',
				content : [
					createElem('a', {
						href : '#',
						cssClass : "fav",
						content : 'Mark favorite?'
					}),
					createElem('h1', {
						content : data.heading
					}),
					createElem('div', {
						cssClass : 'info',
						content : [
							createElem('div', {
								cssClass : 'left',
								content : [
									data.image[1] ? createElem('img', {
										src : data.image[1],
										cssClass : 'image'
									}) : "",
									data.price ? createElem('div', {
										cssClass : 'price',
										content : '$' + data.price
									}) : "",
									createElem('div', {
										cssClass : 'location',
										content : (location.city ? location.city + ", " + location.stateCode : location.stateName)
									}),
									createElem('div', {
										content : createElem('a', {
											href : data.externalUrl,
											content : "View original on " + searchArray(self.source, "code", data.source)['name']
										})
									})
								]
							}),
							data.accountName !== "" ? createElem('div', {
								cssClass : "right",
								id : 'userInfo'
							}) : ""
						]
					}),
					data.body ? createElem('div', {
						cssClass : 'description',
						innerHTML : data.body
					}) : "",
					createElem('div', {
						cssClass : 'details',
						content : createElem('div', {
							cssClass : 'inside',
							content : [
								createElem('a', {
									href : "mailto:?subject=" + data.heading + "&body=" + data.body,
									content : createElem('img', {
										src : 'http://3taps.com/img/icon_email.png'
									})
								}),
								createElem('a', {
									href : "http://twitter.com/share?text=" + encodeURI(data.heading) + " http://3taps.com/w/" + data.postKey,
									content : createElem('img', {
										src : 'http://3taps.com/img/icon_twitter.png'
									})
								}),
								createElem('a', {
									href : "http://www.facebook.com/sharer.php?u=http://3taps.com/w/" + data.postKey + "&t=" + encodeURI(data.heading),
									content : createElem('img', {
										src : 'http://3taps.com/img/icon_facebook.png'
									})
								}),
								createElem('dl', {
									cssClass : 'hidden',
									content : [
										category ? createElem('dt', {
											content : 'Category'
										}) : '',
										category ? createElem('dd', {
											content : category.group + " - " + category.category
										}) : "",
										createElem('dt', {
											content : 'Location',
										}),
										createElem('dd', {
											content : (location.city ? location.city + ", " + location.stateCode : location.stateName)
										}),
										data.price ? createElem('dt', {
											content : 'Price',
										}) : "",
										data.price ? createElem('dd', {
											content : "$" + data.price
										}) : "",
										createElem('dt', {
											content : 'Posted',
										}),
										createElem('dd', {
											content : formatDate(data.timestamp)
										}),
										createElem('dt', {
											content : 'Source URL',
										}),
										createElem('dd', {
											content : createElem('a', {
												href : data.externalUrl,
												content : data.externalUrl
											})
										})
									]
								}),
								createElem('a', {
									href : "#",
									content : 'Show More',
									cssClass : 'toggle',
									id : 'toggle'
								})
							]
						})
					})
				]
			})
		})
		addEvent(modal, 'click', function(e) {
			// console.log(e)
			if (e.srcElement != this) {
				return false;
			};
			document.body.removeChild(this);
		}, false)
		document.body.appendChild(modal);
		addEvent(document.getElementById('toggle'), 'click', function(e) {
			if (hasClass(this.previousSibling, 'hidden')) {
				removeClass(this.previousSibling, 'hidden');
				this.innerHTML = "Show Less";
			} else {
				addClass(this.previousSibling, 'hidden');
				this.innerHTML = "Show More"
			}
		})
		if (data.accountName) {
			self.callEbayUserAPI(data.accountName);
		};
	}
	
	PostKey.prototype.drawUser = function(data) {
		// data = JSON.parse(data);
		var userDate = new Date(data.User.RegistrationDate);
		console.log(userDate);
		var user = createElem('div', {
			content : [
				createElem('img', {
					src : 'http://3taps.com/img/icon_user.jpg',
					cssClass : 'user'
				}),
				createElem('div', {
					content : createElem('a', {
						href : data.User.MyWorldURL,
						content : data.User.UserID
					})
				}),
				createElem('div', {
					content : 'Location: ' + data.User.RegistrationSite
				}),
				createElem('div', {
					content : "Joined: " + (userDate.getMonth() + 1) + "/" + userDate.getDate() + "/" + userDate.getFullYear()
				}),
				createElem('div', {
					content : "Feedback: " + data.User.PositiveFeedbackPercent + "%"
				})
			]
		});
		document.getElementById('userInfo').appendChild(user);
	}
	
	PostKey.prototype.callPostKeyAPI = function(postKey) {
		var script = createElem('script', {
			src : 'http://3taps.net/posting/get/' + encodeURIComponent(postKey) + "?callback=post.drawModal",
			async : "true"
		})
		document.body.appendChild(script);
	}
	PostKey.prototype.callEbayUserAPI = function(user) {
		var script = createElem('script', {
			src : "jsonProxy.php?url=http://3taps.com/user/ebay/" + user + "&callback=post.drawUser"
		})
		document.body.appendChild(script);
	}
	PostKey.prototype.callReferenceAPIs = function() {
		var scripts = [
			createElem('script', {
				src : 'http://3taps.net/reference/category?callback=post.updateCategory'
			}),
			createElem('script', {
				src : 'http://3taps.net/reference/source?callback=post.updateSource'
			}),
			createElem('script', {
				src : 'http://3taps.net/reference/location?callback=post.updateLocation'
			})
		]
		for (var i=0; i < scripts.length; i++) {
			document.body.appendChild(scripts[i]);
		};
	}
	
	PostKey.prototype.updateCategory = function(data) {
		self.category = data
	}
	PostKey.prototype.updateLocation = function(data) {
		self.location = data
	}
	PostKey.prototype.updateSource = function(data) {
		self.source = data
	}
	
	PostKey.prototype.addStyles = function() {
		var style = createElem('style', {
			id : "postKey",
			media : "all",
			content : '.threeTaps{margin:20px; } .threeTaps input[type=text]{font-size:30px; border-radius:30px; -moz-border-radius:30px; border:0; background:-webkit-linear-gradient(#CECECE,#F2F2F2); background:-moz-linear-gradient(#CECECE,#f2f2f2); padding:10px 50px 10px 10px; width:400px; outline:0; color:rgba(0,0,0,.5); } .threeTaps input[type=submit]{font-size:30px; background:rgb(147,165,0) -webkit-linear-gradient(rgba(255,255,255,.4),rgba(0,0,0,.3)); background:rgb(147,165,0) -moz-linear-gradient(rgba(255,255,255,.4),rgba(0,0,0,.3)); border:0; border-radius:30px; -moz-border-radius:30px; padding:10px; margin-left:-50px; color:#fff; } /* .panel{float:left; } */.card{font:100% "Gill Sans",Helvetica,Arial,sans-serif; margin:15px auto; -moz-border-radius:10px; border-radius:10px; border:1px solid #bbb; background:-webkit-linear-gradient(-30deg,#f4f4f4,#cbcbcb); background:-moz-linear-gradient(-30deg,#f4f4f4,#cbcbcb); width:530px; padding:10px; } .card h1{font-weight:normal; font-size:150%; color:rgba(0,0,0,.6); text-shadow:1px 1px 0 rgba(255,255,255,.5); margin: 0; } .card a{color:rgb(147,165,0); text-decoration:none; -webkit-transition:color .2s; -moz-transition:color .2s; } .card a:hover{color:rgb(122,127,0); } .card a.fav{float:right; display:block; background:url("img/fav.png") no-repeat 0 0; width:30px; height:29px; text-indent:-9999px; outline:0; } .card a.fav:hover,.card a.fav.active{background-position:0 -29px; } .card .info,.card .description{color:rgba(0,0,0,.5); border-bottom:1px inset rgba(0,0,0,.25); padding:0 0 10px; margin:10px 0; max-height: 300px; overflow: auto} .card .info{border-top:1px inset rgba(0,0,0,.25); padding-top:10px; overflow:hidden; } .card .info .left{float:left; white-space:nowrap; } .card .info .right{float:right; /* width:40%; */background:rgba(147,165,0,.2); border:1px solid rgba(122,127,0,.2); padding:10px; border-radius:5px; } .card .info .right div div{white-space:nowrap; margin-right:60px; text-align:right; font-size:90%; } .card .info img.image{width:120px; height:auto; float:left; margin:0 10px 0 0; } .card .info .price{font-size:250%; color:rgba(0,0,0,.25); text-shadow:1px 1px 0 rgba(255,255,255,.5); } .card .user{float:right; border:1px solid rgba(0,0,0,.3); } .card .description,.card .details{font:80% Helvetica,Arial,sans-serif; color:rgba(0,0,0,.5); } .card .details img {margin: 0 5px 0 0 } .card .details dl{margin-bottom:10px; overflow:hidden; } .card .details dt{float:left; clear:both; width:20%; margin-right:5px; text-align:right; font-weight:bold; } .card .details dt:after{content:":"; } .card .details dd{/* float:right; *//* width:53%; */} .card .hidden{display:none; } .card .toggle {display: block; margin: 10px 0}'
		})
		document.getElementsByTagName('head')[0].appendChild(style);
	}
	
	window.post = new PostKey();
	post.init();
	
	// Function to easily create elements, chainable.
	function createElem(elem, options) {
		if(!document.createElement) return false;
		if(typeof options != "object") return false;

		var elem = document.createElement(elem);

		for (property in options) {
			if (property == "content") {
				if (typeof options.content == "object") {
					if (options.content.length) {
						for (var i=0; i<options.content.length; i++) {
							var content = options.content[i];
							if (typeof content == "string") {
								elem.appendChild(document.createTextNode(content));
							} else if (typeof content == "object") {
								elem.appendChild(content);
							}
						}
					} else {
						elem.appendChild(options.content);
					}
				} else {
					elem.appendChild(document.createTextNode(options.content));
				}
			} else if (property == "cssClass") {
				if (typeof options.cssClass == "object") {
					for (var j=0; j<options.cssClass.length; j++) {
						var className = options.cssClass[j];
						addClass(elem, className);
					}
				} else {
					addClass(elem, options.cssClass);
				}
			} else if (property == "innerHTML") {
				elem.innerHTML = options.innerHTML
			} else {
				elem.setAttribute(property, options[property]);
			}
		}
		return(elem);
	};
	// Functions to add, remove, and find out if an element contains a certain class
	function addClass(element, className) {
		if (!hasClass(element, className)) {
			if (element.className) element.className += " " + className;
			else element.className = className;
		}
	}
	function removeClass(element, className) {
		var regexp = new RegExp("(^|\\s)" + className + "(\\s|$)");
		element.className = element.className.replace(regexp, "$2");
	}
	function hasClass(element, className) {
		var regexp = new RegExp("(^|\\s)" + className + "(\\s|$)");
		return regexp.test(element.className);
	}

	function addEvent( obj, type, fn ) {
		if (obj.addEventListener)
			obj.addEventListener( type, fn, false );
		else if (obj.attachEvent) {
			obj["e"+type+fn] = fn;
			obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
			obj.attachEvent( "on"+type, obj[type+fn] );
		}
	}
	function removeEvent( obj, type, fn ) {
		if (obj.removeEventListener)
			obj.removeEventListener( type, fn, false );
		else if (obj.detachEvent) {
			obj.detachEvent( "on"+type, obj[type+fn] );
			obj[type+fn] = null;
			obj["e"+type+fn] = null;
		}
	}

	function searchArray(array, key, value) {
		for (var i=0; i < array.length; i++) {
			if (array[i][key] == value) {
				return array[i]
			};
		};
	}
	function formatDate(date) {
		var monthName = ['January','February','March','April','May','June','July','August','September','October','November','December'];
		var hours, meridiam;
		if (date.getHours() > 12) {
			hours = date.getHours() - 12, meridiam = "PM"
		} else {
			hours = date.getHours(), meridiam = "AM"
		}
		return monthName[date.getMonth()] + " " + date.getDate() + ", " + date.getFullYear() + " @ " + hours + ":" + (date.getMinutes() < 10 ? "0" : "") + date.getMinutes() + " " + meridiam;
	}


})();