function Index()//class called Index. http://phrogz.net/js/Classes/OOPinJS.html
{
	var _currentPanelId;
	
	//define public methods
	Index.prototype.init = function()
	{
		this.onResize();
		window.onresize = this.onResize;
		//this.doSomething();// call class function
		//$(".closeButton").click(this.closeButton_onClick);//assign a listener to a button. could also be done in html with onclick="" attribute
		
		//this.loadPanels();
	}
	
	Index.prototype.onResize = function() //adjust position of html content if they need to move dynamically
	{
		/*var mailingListWindowWidth = 500;
		var marginLeft = (window.innerWidth - mailingListWindowWidth)/2;
		$("#someObject").css("left", marginLeft + "px");*/
		var footer = $(".footer");
		var footerHeight = footer.height();
		var marginTop = window.innerHeight - footerHeight;
		var minMarginTop = 603-footerHeight;
		if(marginTop < minMarginTop) marginTop = minMarginTop;
		footer.css("top", marginTop + "px")
		//$("#appSWF").height(400);
	}
	
	Index.prototype.goToProduct = function()
	{
		_index.closeFloatingPanel();
		document.getElementById("product").style.display = "block";
		document.getElementById("product").style.left = "-475px";
		document.getElementById("product").style.top = "-100px";
		document.getElementById("product").innerHTML = "<iframe name=myIframeProducts id=myIframeProducts frameborder=0 width=930px height=580px src=?page_id=' . $introProductPageId . '></iframe><a class=close onclick=javascript:document.getElementById(\'product\').style.display=\'none\' href=#>x</a>";
	}
	
	Index.prototype.closeFloatingPanel = function()
	{
		$('#panel').css("display", "none");
		//document.getElementById(_currentPanelId).style.display = 'none';
	}

	Index.prototype.openFloatingPanel = function(id, x, y)
	{
		//alert("openFloatingPanel:" + id + " x:" + x + " y:" + y);
		_currentPanelId = id;
		var panelClass = 'panel';
		var width = 390;
		var height = 340;
		var scrolling = "no";
		var autoCenter = false;
		if(id == 'whats-new'){
			//
		}else if(id == "merch"){
		}else if(id == "intro"){
			panelClass = 'panel-intro';
			width = 600;
			height = 315;
			//autoCenter = true;
		}else if(id == 'contact'){
			panelClass = 'panel-contact';
			height = 420;
			width = 920;
			autoCenter = true;
		}else if(id == "buy-products"){
			panelClass = 'panel-products';
			height = 460;
			width = 930;
			autoCenter = true;
		}else if(id == "order"){
			autoCenter = true;
		}else{
			//alert(id);
		}
		
		if(id == "merch" || id == "muffins" || id == "house" || id == "products"){
			panelClass = 'panel-flip';
		}
		
		if(autoCenter){
			$(".panel-container").addClass("auto-center-panels");
		}else{
			$(".panel-container").removeClass("auto-center-panels");
		}
		
		var path = _blogURL + "?pagename=" + id;
		//alert(path);
		var iFrame = "<iframe name='myIframe' id='myIframe' frameborder='0' width='" + width + "' height='" + (height-20) + "px' scrolling='" + scrolling + "' src='" + path + "'></iframe>";
		var closeButton = '<div class="close"><a id="close-button" href="javascript:_index.closeFloatingPanel();">x</a></div>';
		if(id == "intro") closeButton = "";
		$("#panel").css("display","block").css("left",x).css("top",y+20).css("width", width).css("height", height)
		.removeClass("panel-products").removeClass("panel-contact").removeClass("panel-intro").removeClass("panel-flip").addClass(panelClass)
		.html(iFrame + closeButton)
		.css("opacity", 0).animate({opacity: 1}, 500);
		$(".close").css("opacity", 1);
		if(id != "intro") $("#myIframe").css("opacity", 0).bind('load', iFrameReady);
		
		function iFrameReady()
		{
			$("#myIframe").animate({opacity: 1}, 500).unbind('load', iFrameReady);
		}
		
	}
	
	Index.prototype.moveFloatingPanel = function(x,y)
	{
		$("#panel").css("left", x).css("top", y);
	}
	
	_this = this;//create a global reference for internal functions with a unique scope like event handlers
    this.init();//call constructor (has to happen AFTER all vars and methods are defined)
	//Index.prototype.rand = Math.floor(Math.random()*11);
	//alert("rand = " + this.rand);
}