/*-------------------------------------------START----------------------------------------------*/
/*
* The script that is executed when the document loads.
*/

var bizKey = ''; /*User's AccountId*/
var SiteManager = {}; /*Object that handles populating JSON pages & other things*/
var Extensions = {}; /*Wraps alternative plugins*/



var server = "http://media.liquidcommon.com"; /*Liquid Common server*/
var GiftCardsUrl = "http://payment.liquidcommon.com/GiftCard.html?tab=GC&page=gc&PageStyle=520&bizkey="; /*Gift Cards Url*/
var SignupUrl = "http://signup.solidelements.com/SiteFlow/NewsletterSignup?id=";

var isPublished, /*script is executing in published site?*/
	isPreview, /*script is executing in preview?*/
	isPreviewOrPublished,
	jsonString = "", /*JSON string return from the LC server*/
	hash; 
	
	
	
/*
* JSON callbacks.
*/
//Feed callback
var jsonFeed = function(jString) {
	jsonString = jString;
};


/*
* Startup script
*/
$(document).ready(function() {
	var path = window.location.href, 
		arr = path.split("/"), 
		page = arr[arr.length - 1].split(".")[0].toUpperCase();
	
		
		
	SiteManager.ActivePage = page; //the current active page
	bizKey = Ext.util.Cookies.get("bizKey");
	isPublished = status == "Published";
	isPreview = status == "Preview";
	isPreviewOrPublished = isPreview || isPublished;
	
	GiftCardsUrl += bizKey;	
	SignupUrl += bizKey;	
	SignupUrl += '&caller=' + escape(window.location.href); 
	hash = document.location.hash;
	
	/**/
	templates();	

	/**/
	if(isPreviewOrPublished){ //preview or publish time
		
		carouselManager.setup();
		loading.create();
		signupManager.init();			
		
		SiteManager.initPage(SiteManager.ActivePage);
		SiteManager.populateJsonData(SiteManager.ActivePage, eval(jsonString));
	}
	else{ //Design time
		$("a").click(function(e){e.preventDefault();}); //preventing anchors, hyperlinks click action
		$(".belt").css({visibility:"hidden"}).first().css({visibility:"visible"});
	}	
	
});


/*
* fn : Creates the navigation menus.
*      set the page title.
* params: page - the current loaded page.
*/
SiteManager.initPage = function(page) {
    var hMenu = Ext.get("HorizontalNavigation"),
        vMenu = Ext.get("VerticalNavigation");

    if (vMenu) {
        vMenu.update('');
        throw new Error("Not implemeneted");
    }
    if (hMenu) {
        hMenu.update('');

        var navigationDiv = {
            id: 'Navigation',
            tag: 'div',
            children: []
        };
        var ul = {
            tag: 'ul',
            children: []
        };
        navigationDiv.children.push(ul);
		
		var mixedCollection = new Ext.util.MixedCollection(), rootPages, currRoot, root, activeLink;
		mixedCollection.addAll(Menu);
		rootPages = mixedCollection.filterBy(function(pg) {
			return !pg.Parent;
		});
		rootPages.sort('ASC', function(p1, p2) {
			return p1.ViewOrder - p2.ViewOrder;
		});

		var recursive = function(p, arr) {
			if (p.IsActive) {
			
			    var _page = p.ViewName.split(" ").join("").toLowerCase(),
					_viewType = p.ViewType.split(" ").join("").toLowerCase();
			
				if(_viewType == "home"){
					_page = "index";
				}
				else if(p.IsStatic){
					_page = _viewType;
				}	
				
				var isActivePage = _page.toUpperCase() == page.toUpperCase();
				if (isActivePage) {
					document.title = p.ViewName;
				}
				
				var IsRootPage = !p.Parent;
				var subpages = mixedCollection.filterBy(function(pg) {
					return (pg.Parent) ? pg.Parent.ID == p.ID : false;
				}), hasSubpages;
				subpages.sort('ASC', function(p1, p2) { return p1.ViewOrder - p2.ViewOrder; });
				hasSubpages = subpages.getCount() > 0;

				var node = { id: 'list-' + p.ID, tag: 'li', children: [] };
				var html = (IsRootPage)
								? '<span class="NavVerArrow">' + p.ViewName + '</span>'
								: '<span class="NavHorArrow"></span><span>' + p.ViewName + '</span>'

				if (isActivePage) {
					root = currRoot; activeLink = p;
				}

				node.children.push({ tag: 'a',
					id: 'anchor-' + p.ID,
					title: p.ViewName,
					href: _page + ".html",
					html: hasSubpages ? html : p.ViewName,
					cls: (isActivePage) ? 'navigation-anchor active' : 'navigation-anchor'
				});

				if (hasSubpages) {
					var ul = { tag: 'ul', children: [] };
					node.children.push(ul);
					for (var i = 0; i < subpages.getCount(); i++) {
						recursive(subpages.itemAt(i), ul.children);
					}
				}
				arr.push(node);
			}
		};

		rootPages.each(function(rootPage) {
			currRoot = rootPage;
			recursive(rootPage, ul.children);
		});
	}

	Ext.DomHelper.append("HorizontalNavigation", navigationDiv);
	
	$("#Navigation ul li a").hover(function(){
			$(this).parent("li").children("ul").show(); 
		},
		function(){
			$(this).parent("li").children("ul").hide(); 
		}
	);
	
	$('#Navigation ul li ul').hover(
		function() {
			$(this).show();
		},
		function() {
			$(this).hide();
		}
	);
	
	
	if(typeof(myVar) !== 'undefined') {
	if (activeLink.Parent) {
		while (activeLink.Parent) {
			$("#anchor-" + activeLink.Parent.ID).addClass("active");
			activeLink = activeLink.Parent;
		}
	}
	}
	
			
    return this;	
		 
};

/*
* fn : Populate the JSON data for food, liquid, menu and event specials.
*/
SiteManager.populateJsonData = function(specials, jsonData, accountId) {
    var specialsName, template, emptyText, view, html;
    
    switch (specials) {
        case "SPECIALS": 
            specialsName = "Specials";
            template = templates.websiteSpecials;
            break;
        case "MENU":
            specialsName = "Menu";
            emptyText = "There are currently no menu items available.";
            template = templates.websiteSpecials1;
            break;
        case "RENTALRATES":
            specialsName = "Menu";
            emptyText = "There are currently no menu items available.";
            template = templates.websiteSpecials1;
            break;			
        case "EVENTS":
            specialsName = "Upcoming Events";
            emptyText = "There are currently no events posted.";
            template = templates.upcomingEvents;
            break;
	case "PHOTOS":
	    specialsName = "Photos";
	    emptyText = "There are currently no photos available.";
	    break;
	case "CONTACTUS":
	    specialsName = "Contact Us";
	    emptyText = "There are currently no contact info available.";
	    template = templates.contactUs;
	    break;
	case "GIFTCARDS":
	    specialsName = "Gift Cards";
	    break;
	case "PURCHASE":
	    specialsName = "Purchase";
	    break;
	}

	/*Giftcards page*/
	if (specialsName == "Gift Cards") {
		GiftCardsUrl = accountId ? (GiftCardsUrl + accountId) : GiftCardsUrl;
		html = '<div id="GiftCardsContent"><div id="GiftCardsWrapper">'  +
				   '<div id="IframeWrapper">' +
						'<iframe id="giftCardsFrame" frameborder="0" width="100%" ' +
						'height="1000px" name="giftCardsFrame" frameborder="1" vspace="0" hspace="0" ' +
						'marginwidth="0" marginheight="0" scrolling="no" noresize src="' + GiftCardsUrl + '"/>' +
				   '</div>' +
				'</div></div>';
		Ext.get("LayoutContent").update(html);
	}

	/*Coupons purchase page*/
	else if (specials == "PURCHASE") {
		GiftCardsUrl = accountId ? (GiftCardsUrl + accountId) : GiftCardsUrl;
		html = '<div id="GiftCardsContent"><div id="GiftCardsWrapper">'  +
				   '<div id="IframeWrapper">' +
						'<iframe id="giftCardsFrame" frameborder="0" width="100%" ' +
						'height="1000px" name="giftCardsFrame" frameborder="1" vspace="0" hspace="0" ' +
						'marginwidth="0" marginheight="0" scrolling="no" noresize src="' + GiftCardsUrl + '"/>' +
				   '</div>' +
				'</div></div>';
		Ext.get("LayoutContent").update(html);
	}	
	/*contact-us json page*/
	else if (specialsName == "Contact Us") {
		var mapContainer = (isPublished || isPreview) ? "map-canvas" : "dummy-map-canvas";
	
		html = '<div id="ContactusContent">' +
					'<div id="ContactLeftContent">' + 
						'<div id="ContactusWrapper">' +
							'<div id="Contacts"></div>' +
							'<div id="ContactusFrame">' +
								'<div id="conntactstabswrapper">' +
									'<div id="tabs">' + 
									
										'<div style="display:none" id="tab-titles">' + //tab-titles
											'<a href="javascript: void(0)" class="tab-item tab-active x-unselectable" id="ContactTab" onclick="toggleTab(this, 0);">' +
												'<span>Contact Us</span>' +
											'</a>' +
											'<a href="javascript: void(0)" class="tab-item tab-inactive x-unselectable" id="LocationsTab" onclick="toggleTab(this, 1);">' +
												'<span>Our Locations</span>' +
											'</a>' +	
										  '</div>' +	//tab-titles
										  
										  '<div id="tab-content">' + //tab-content
										  
												'<div class="tab-item-content" style="display:none" id="Contact-Form">' +
													'<div id="contactsform-wrapper">' +												
													'</div>' +
													'<div id="contact-result" style="display:none;">' +
														'<p></p>' +
													'</div>' +
												'</div>' +
												
												'<div class="tab-item-content" id="Contact-Locations">' +
													'<table style="width:800px;" class="loc-table-outer"><tr>' +
														'<td id="main-column">' + //Contacts 
														'</td>' +
														'<td id="right-column">' + //Google Maps 
															'<div id="slide-into-view">' +
																'<table>' +
																	'<tr><td colspan="2">' +
																		'<div id="' + mapContainer + '"></div>' +
																		'</td></tr>' +
																		'<tr><td class="google-label">From:</td>' +
																		'<td class="google-field"><input type="text" size="50" id="from-address" name="from" value="" /></td>' +
																		'</tr>' +
																		'<tr><td class="google-label">To:</td>' +
																		'<td class="google-field" ><input type="text" size="50" id="to-address" name="to" /></td>' +
																		'</tr>' +
																		'<tr><td>&nbsp;</td>' +
																		'<td class="google-button" ><input id="show-directions" type="button" value="Get Directions!" /></td>' +
																	 '</tr>' +
																'</table>' +
																'<div id="directions"></div>' +
															 '</div>' +
														'</td></tr>' + 
													'</table>' +
												'</div>' +	
												
										  '</div>' + //tab-content									  
									'</div>' + //tabs
								'</div>' + //wrapper
							'</div>' +
					 '</div></div>' +
			   '</div>';
			   
		Ext.get("LayoutContent").update(html);
		
		var submitForm = new Ext.FormPanel({
        url: server + '/Premium/ContactUs',
		id: 'contacts-form',
		renderTo: 'contactsform-wrapper',
        labelWidth : 120,
		buttonAlign: 'right',
        anchor:'100%',
		width: 500,
        frame:false,
		border: false,
        autoHeight:true,
        defaultType:'textfield',
		itemCls : 'contact-form-field',		
		baseParams:{
			  'bizKey': bizKey
		},
        items:[
            {
                fieldLabel: 'Name:*',
                name: 'name',
                width:250,
				labelSeparator: '',
                allowBlank:false
            },
            {
                vtype:'email',
                allowBlank:false,
                width:250,
				labelSeparator: '',
                name:'email',
                fieldLabel:'Email Address:*'
            },
			{
                width:250,
                name:'phone',
                fieldLabel:'Phone'
            },
			{
                fieldLabel: 'Subject:*',
                name: 'subject',
                width:250,
                allowBlank:false,
				labelSeparator: ''
            },
			{
				xtype: 'textarea',
                fieldLabel: 'Message:*',
                name: 'message',
                width:350,
				height: 200,
                allowBlank:false,
				labelSeparator: ''
            }
        ],
 
        buttons:[{
                text:'Submit',
				//disabled: !isPreview && !isPublished,
				disabled: true,
                handler:function(){
					var form = submitForm.getForm(),
						formData = form.getValues();
						formData.bizKey = bizKey;
										
					if(!form.isValid() || isPreview)
						return;					
					
					$.ajax({
						dataType: 'jsonp',
						data: formData,
						url: server + '/Premium/ContactUs',
						success: function(result){
							if(result.success){
								Ext.getCmp('contacts-form').getForm().reset(); 
								$("#contactsform-wrapper").hide();								
								$("#contact-result p").removeClass('form-error').html("Your message has been sent. thank you.");
								$("#contact-result").show();
							}
							else{
								$("#contact-result p").addClass('form-error').html("Sorry. Failed to submit your message.");
								$("#contact-result").show();
							}
						},
						complete: function(){
							loading.hide();
						}
					});
					
					loading.show(true);
                }
            }]
        }); 
		
		var contactsContainer = Ext.get("main-column");

		if (contactsContainer) {
			if (jsonData.length == 0 && emptyText) {
				view = new Ext.Container({
					cls: 'emptydata',
					html: '<table class="emptycontacts" style="width:100%;"><tr><td>' + emptyText + '</td></tr></table>'
				});
				view.render(contactsContainer);
			}
			else {
				view = new Ext.DataView({
					data: jsonData,
					tpl: template
				});
				view.render(contactsContainer);
			}
		}
		
		//attaching google maps api
		if(isPreviewOrPublished)
			loadGoogleApi(); //load google maps	
	}
	
	else if (specialsName == "Grab The Tab") {
			html = '<div id="GrabTheTabContent">' +
		  '<div id="GrabContainer">' +
			'<h1 id="GrabTheTabTitle"></h1>' +
			'<div id="GrabContent"></div>' +
		  '</div>' +
		'</div>';
		Ext.get("LayoutContent").update(html);
		Ext.get("GrabTheTabTitle").update(specialsName);
		var grabTheTabContainer = Ext.get('GrabTheTabContent');
		var grabContent = Ext.get("GrabContent");

		if (grabTheTabContainer) {
			if (jsonData.data.length == 0 && emptyText) {
				view = new Ext.Container({
					cls: 'emptydata',
					html: '<table class="emptygrabdata" style="width:100%;"><tr><td>' + emptyText + '</td></tr></table>'
				});
				view.render(grabContent);
			}
			else {
				view = new Ext.DataView({
					data: jsonData.data,
					width: 900,
					tpl: template
				});
				view.render(grabContent);
			}
		}
	}

	/*photos json page*/	
	else if (specialsName == "Photos") {
		photosManager.manage("LayoutContent", jsonData);
    }
	
	/*specials json page*/
	else if(specialsName == "Specials"){
		var foodSpecialsView, liquidSpecialsView, grabthetabView;
	
		html = '<div id="Specials">' +
			  '<div id="SpecialsContent">' +
			  '<div id="tabswrapper">' +
				  '<div id="tabs">' + 
					'<div id="tab-titles">' +
						'<a href="' + (isPreviewOrPublished ? "#food-specials" : "javascript:void(0);") + '" rel="history" class="tab-item tab-inactive x-unselectable" id="FoodSpecialsTab" onclick="toggleTab(this, 0);">' +
							'<span>Food Specials</span>' +
						'</a>' +
						'<a href="' + (isPreviewOrPublished ? "#liquid-specials" : "javascript:void(0);") + '" rel="history" class="tab-item tab-inactive x-unselectable" id="LiquidSpecialsTab" onclick="toggleTab(this, 1);">' +
							'<span>Drink Specials</span>' +
						'</a>' +	
					  '</div>' +
					'<div id="tab-content">' +
						'<div class="tab-item-content" style="display:none;" id="food-specials-content">' +
						'</div>' +
						'<div class="tab-item-content" style="display:none;" id="liquid-specials-content">' +
						'</div>' +	
					'</div>' +
				  '</div>' +
				 '</div>' +
			  '</div>' +
			'</div>';
		Ext.get("LayoutContent").update(html);	
        var specialsContainer = Ext.get("SpecialsContent");
        foodSpecialsContainer = Ext.get("food-specials-content"),
		liquidSpecialsContainer = Ext.get("liquid-specials-content");

		var activeTabContent = "#food-specials-content", activeTab = "#FoodSpecialsTab";
		if(isPreviewOrPublished){
			activeTabContent = (hash == "#food-specials" || hash == "#liquid-specials") ? (hash + "-content") : "#food-specials-content";
		}	
		activeTab =  activeTabContent == "#food-specials-content" ? "#FoodSpecialsTab"	: "#LiquidSpecialsTab";
		$(activeTabContent).show();
		$(activeTab).removeClass('tab-inactive').addClass('tab-active');
		
        if (specialsContainer) {
		
			/*food specials*/
            if (jsonData.food.length == 0) {
				emptyText = "There are no food specials available.";
                foodSpecialsView = new Ext.Container({
                    cls: 'emptydata',
                    html: '<table style="width:100%"><tr><td>' + emptyText + '</td></tr></table>'
                });  
			    document.getElementById("LiquidSpecialsTab").style.display = "none";				
				document.getElementById("FoodSpecialsTab").style.display = "none";		
				document.getElementById("food-specials-content").style.display = "none";
            }
            else {
                foodSpecialsView = new Ext.DataView({
                    data: jsonData.food,
                    tpl: template
                }); 
				document.getElementById("food-specials-content").style.display = "block";				
            }
			foodSpecialsView.render(foodSpecialsContainer);
			
			/*liquid specials*/
			if (jsonData.liquid.length == 0) { 
				emptyText = "There are no liquid specials available.";
                liquidSpecialsView = new Ext.Container({
                    cls: 'emptydata',
                    html: '<table style="width:100%"><tr><td>' + emptyText + '</td></tr></table>'
                });
				document.getElementById("LiquidSpecialsTab").style.display = "none";				
				document.getElementById("FoodSpecialsTab").style.display = "none";	
				document.getElementById("liquid-specials-content").style.display = "none";				
            }
            else {
                liquidSpecialsView = new Ext.DataView({
                    data: jsonData.liquid,
                    tpl: template
                });     
				document.getElementById("liquid-specials-content").style.display = "block";									
                if(jsonData.food.length != 0){
					document.getElementById("liquid-specials-content").style.display = "none";									
				}				
				
            }
			liquidSpecialsView.render(liquidSpecialsContainer);
			
			/*grab the tab
			var grabContent = Ext.get("GrabContent");			
			if (jsonData.grabthetab.data.length) {
				grabthetabView = new Ext.DataView({
					data: jsonData.grabthetab.data,
					tpl: templates.grabTheTab
				});
			}
			grabthetabView.render(grabContent);*/
        }
	}
	
	/*menu json page*/
	else if(specialsName == "Menu"){
		html = '<div id="Specials">' +
			  '<div id="MenuContent"><div  id="SpecialsContent"></div></div>' +
			'</div>';
		Ext.get("LayoutContent").update(html);	
        var specialsContainer = Ext.get("SpecialsContent");

        if (specialsContainer) {
            if (jsonData.length == 0 && emptyText) {
                view = new Ext.Container({
                    cls: 'emptydata',
                    html: '<table style="width:100%"><tr><td>' + emptyText + '</td></tr></table>'
                });
                view.render(specialsContainer);
            }
            else {
                view = new Ext.DataView({
                    data: jsonData,
                    tpl: template
                });
                view.render(specialsContainer);
				
				var html = '<div id="MenuCategories"><ul>';
				html += '<li class="First"><span><a class="sidemenu-active" id="allitems" title="All Items" href="javascript:void(0);">All Items</a></span></li>';
				Ext.each(jsonData, function(category, index){
					if(index == jsonData.length -1)
						html += '<li class="Last"><span><a id="categoryid-' + category.CategoryId + '" title="' + category.Name + '" href="javascript:void(0);">' + category.Name + '</a></span></li>';
					else
						html += '<li class="Middle"><span><a id="categoryid-' + category.CategoryId + '" title="' + category.Name + '" href="javascript:void(0);">' + category.Name + '</a></span></li>';
				});
				
				html += '</div></ul>';
				
				Ext.get("categories").update(html);
				
				Ext.select("#MenuCategories ul li a").on('click', function(){
					//filtering the data
					var data = [];
					var categoryId = this.id.split("-")[1];
					
					if(this.id == "allitems"){
						data = jsonData;
					}
					else{
						Ext.each(jsonData, function(category, index){
							if(categoryId == category.CategoryId.toString()){
								data.push(category);
							}
						});
					}
					
					view = new Ext.DataView({
						data: data,
						tpl: template
					});
					specialsContainer.update("");
					view.render(specialsContainer);
					Ext.select("#MenuCategories ul li a").removeClass("sidemenu-active");
					Ext.get(this).addClass("sidemenu-active");
				});
            }
        }
	}
	
	else if(specialsName == "Rental Rates"){
		html = '<div id="Specials">' +
			  '<div id="MenuContent"><div  id="SpecialsContent"></div></div>' +
			'</div>';
		Ext.get("LayoutContent").update(html);	
        var specialsContainer = Ext.get("SpecialsContent");

        if (specialsContainer) {
            if (jsonData.length == 0 && emptyText) {
                view = new Ext.Container({
                    cls: 'emptydata',
                    html: '<table style="width:100%"><tr><td>' + emptyText + '</td></tr></table>'
                });
                view.render(specialsContainer);
            }
            else {
                view = new Ext.DataView({
                    data: jsonData,
                    tpl: template
                });
                view.render(specialsContainer);
				
				var html = '<div id="MenuCategories"><ul>';
				html += '<li class="First"><span><a class="sidemenu-active" id="allitems" title="All Items" href="javascript:void(0);">All Items</a></span></li>';
				Ext.each(jsonData, function(category, index){
					if(index == jsonData.length -1)
						html += '<li class="Last"><span><a id="categoryid-' + category.CategoryId + '" title="' + category.Name + '" href="javascript:void(0);">' + category.Name + '</a></span></li>';
					else
						html += '<li class="Middle"><span><a id="categoryid-' + category.CategoryId + '" title="' + category.Name + '" href="javascript:void(0);">' + category.Name + '</a></span></li>';
				});
				
				html += '</div></ul>';
				
				Ext.get("categories").update(html);
				
				Ext.select("#MenuCategories ul li a").on('click', function(){
					//filtering the data
					var data = [];
					var categoryId = this.id.split("-")[1];
					
					if(this.id == "allitems"){
						data = jsonData;
					}
					else{
						Ext.each(jsonData, function(category, index){
							if(categoryId == category.CategoryId.toString()){
								data.push(category);
							}
						});
					}
					
					view = new Ext.DataView({
						data: data,
						tpl: template
					});
					specialsContainer.update("");
					view.render(specialsContainer);
					Ext.select("#MenuCategories ul li a").removeClass("sidemenu-active");
					Ext.get(this).addClass("sidemenu-active");
				});
            }
        }
	}
	
	/*events json page*/
    else if (specialsName == "Upcoming Events") {
		html = '<div id="Specials">' +
		  '<div class="ContentArea ContentBotm" id="SpecialsContent"></div>' +
		'</div>';
		if(Ext.get("LayoutContent") != null){
			Ext.get("LayoutContent").update(html);
		}
        var specialsContainer = Ext.get("SpecialsContent");

        if (specialsContainer) {
            if (jsonData.length == 0 && emptyText) {
                view = new Ext.Container({
                    cls: 'emptydata',
                    html: '<table class="emptyevents" style="width:100%"><tr><td>' + emptyText + '</td></tr></table>'
                });
                view.render(specialsContainer);
            }
            else {
                view = new Ext.DataView({
                    data: jsonData,
                    tpl: template
                });
                view.render(specialsContainer);
            }
        }
    }
    return this;
};

var toggleTab = function(tab, index){
	var extObj = Ext.get(tab);
	if(extObj.hasClass("tab-inactive")){
		Ext.select(".tab-item").replaceClass("tab-active", "tab-inactive");
		extObj.replaceClass("tab-inactive", "tab-active");
		Ext.select(".tab-item-content").setStyle({display:"none"});
		Ext.select(".tab-item-content").elements[index].style.display = "block";
	}
};

//data load failed handler.
SiteManager.loadFailed = function() {
    Ext.Msg.show({
        msg: 'Error occured! Failed to load data.',
        closable: false,
        buttons: Ext.Msg.OK,
        icon: Ext.MessageBox.ERROR
    });
};

//---------------------------------------------------------------

/**
* Stepcarousel
*/
var carouselManager = {
	
	setup: function(){
	
		$(".belt").css({visibility:"visible"});
		
		if(!$(".stepcarousel").length)
			return;
			
		var config = {
			galleryid: 'mygallery', //id of carousel DIV
			beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
			panelclass: 'panel', //class of panel DIVs each holding content
			autostep: {enable:false, moveby:1, pause:3000},
			panelbehavior: {speed:600, wraparound:true, persist:true},
			defaultbuttons: {enable: true, moveby: 1, leftnav: ['step-leftnav', -48, 120], rightnav: ['step-rightnav', 3, 120]},
			statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
			contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
		};
	
		if(Extensions.carouselAlternative){
			Extensions.carouselAlternative("slider", config);
			return;
		}	
		
		stepcarousel.setup(config)	
	}
	
};


/**
* Manages the photos album
* uses Galleria jquery plugin	
*/
var photosManager = {
	
	_photos: [],
	
	manage: function(parent, data){
		this.photos = data;		

		if(Extensions.galleriaAlternative){
			Extensions.galleriaAlternative("photos", parent, data);
			return;
		}		
			
		var url = isPublished ? 'http://www.liquidcommon.com/Scripts/Plugins/galleria/themes/classic/galleria.classic.js' : '/Scripts/Plugins/galleria/themes/classic/galleria.classic.js';
		Galleria.loadTheme(url);

		var $parent = $("#" + parent);
		
		if(!data.length){ //if no photos are there
			var html = '<div id="PhotoContent">' +
				  '<div id="PhotoLeftContent">' +
					'<h1 id="PhotosTitle"></h1>' +
				  '<div id="SelectedPhoto">' +
				  '</div>' +
				  '</div>' +
				  '<div id="PhotoRightContent">' +
				  '</div>' +
			  '</div>';
					
			$parent.html(html);
			$("#PhotosTitle").html("Photos");
			
			$("#SelectedPhoto").html('<div class="emptydata"><table class="emptyphotos" style="width:100%"><tr><td>There are currently no photos available.</td></tr></table></div>');
			return;
		}
		//insert the base HTML
		var html = '<div id="PhotoContent">' +
				  '<div id="PhotoTopContent">' +
					'<h1 id="PhotosTitle"></h1>' +
					  '<div id="PhotoLeftHolder"></div>' +
					  '<div id="MainPhoto">' +
					  '</div>' +
				  '</div>' +
				'</div>';	
					
		var isAlbum = data[0].CategoryId ? true : false;
		
		$parent.html(html);
		$("#PhotosTitle").html("Photos");			
			
		if(isAlbum){
			
			$("#MainPhoto").addClass("mainphoto-album");
			$('PhotoLeftHolder').append('<div id="PhotoLeft">' +
						'<h3></h3>' +
						'<p></p>' +
						'<div id="PhotoCategories">' +
						'</div>' +
					  '</div>');
		
			var categoriesList = '<ul>';
			$.each(data, function(index, value){
				var cls = "";
				if(index == 0) cls = "active";
				categoriesList += '<li class="' + cls + '" id="' + 'photocategory-' + value.CategoryId + '">' + value.CategoryName + '</li>';
			});
			categoriesList += "</ul>";
			
			$("#PhotoCategories").html(categoriesList);
			
			$("#PhotoCategories ul li").click(function(){
				$("#PhotoCategories ul li.active").removeClass("active");
				$(this).addClass('active');
				photosManager.changePhotos(this.id, data);
			});
			
			var activeEl = $("#PhotoCategories ul li.active")[0];
			if(activeEl) this.changePhotos(activeEl.id);
		
		}
		else{
		
			$("#MainPhoto").addClass("mainphoto");
			var listHtml = '<div id="photogallery">';
			
			//iterate the data and create unordered lost
			$.each(data, function(index, value){
				listHtml += '<img src="' + server + '/Photos/' + value.LgName + '" title="' + value.Caption + '">';
			});
			listHtml += '</div>';	
			
			$("#MainPhoto").append(listHtml);			
			
			$('#photogallery').galleria({
				height:400
			});
		
		}

	},
	
	changePhotos: function(categoryId){
		$("#MainPhoto").html("");
		
		var appendServer = isPublished ? server : "";
		
		var photos = [];categoryId = categoryId.split("-")[1];
		
		$.each(this.photos, function(index, value){
			if(value.CategoryId.toString() == categoryId){
				$("#PhotoLeft h3").html(value.CategoryName);
				$("#PhotoLeft p").html(value.CategoryDescription);
				photos = value.Photos;
			}
		});

		if(photos.length){	
			var listHtml = '<div id="photogallery">';
				$.each(photos, function(index, value){
					listHtml += '<img src="' + appendServer + '/Photos/' + value.LgName + '" title="' + value.Caption + '">';
				});
				listHtml += '</div>';	
				
				$("#MainPhoto").html(listHtml);
				
				$('#photogallery').galleria({
					height:400
				});	
		}
		else{
			$("#MainPhoto").html('<p class="emptyphotos">No photos available.</p>');
		}
	}
};


//---------------------------------------------------------------

/**
Manages the functionalities of both signup / login forms
*/

$.receiveMessage(function(e){
if (e.data === 'signupSuccess')
 $.fancybox.close();
 
}, 'http://signup.solidelements.com');

var signupManager = (function(){
	
	/*private*/
	var signupDiv, loginDiv;	

	/*public*/
	return {
		init:function(){

			if(Extensions.fancyboxAlternative){
				Extensions.fancyboxAlternative("signuplogin");
				return;
			}
			
			//If the doc already has fancybox elements remove it.
			if ($('div[id^=fancybox]').length){			
				$('div[id^=fancybox]').remove()
				
				//recreate the elements.
				$.fancybox.init();
			}

			if($(".lightbox-link").length){	
				
				$(".lightbox-link").attr('href', SignupUrl)			
								.fancybox({
									transitionIn: 'fade', 
									transitionOut: 'fade', 
									width: 600,
									type: 'iframe'
								});
			}
			
			return this;
		}
			
	}
})();

//---------------------------------------------------------------

/**
* Object that wraps all the loading image functionalities
*/
var loading = (function(){
	
	/*hi, don't touch! it's private.*/
	var loadingDiv = $('<div id="custom-loading" style="display:none;"><div></div></div>'),
		overlayDiv = $('<div id="custom-overlay" style="display:none;"></div>'),
		loadingTimer = null,
		loadingFrame = 1,
		
		animate_loading = function(){
			if (!loadingDiv.is(':visible')){
					clearInterval(loadingTimer);
					return;
			}
			$('div', loadingDiv).css('top', (loadingFrame * -40) + 'px');
			loadingFrame = (loadingFrame + 1) % 12;
		};
	
		/*this all yours!*/
		return {
			create: function(){
				$('body').append(loadingDiv, overlayDiv);
				overlayDiv.height($(document).height());
				return this;
			},
			
			show: function(overlay){
				loadingDiv.show();
				if(overlay){overlayDiv.show();}
				clearInterval(loadingTimer);
				loadingTimer = setInterval(animate_loading, 66); 
			},
			
			hide: function(){
				loadingDiv.hide();
				overlayDiv.hide();
			}
		}
})();

//---------------------------------------------------------------

//templates to display specials.
var templates = function(){ templates = {
    websiteSpecials: new Ext.XTemplate(
                    '<table class="table-tbl-outer">',
                        '<tpl for=".">',
                            '<tr><td class="category-head" align="center">{Name}</td></tr>',
                            '<tr class="tbl-row-style"><td class="category-desc" align="center">{Description}</td></tr>',
                            '<tr><td><div class="div-break" /></td></tr>',
                            '<tr><td>',
                                '<tpl if="Items.length &gt; 0">',
                                    '<table class="table-tbl-inner" cellpadding="5" cellspacing="5">',
                                        '<tpl for="Items">',
                                            '<tr class="tbl-row-style">',
                                                '<td class="item-head">{Name}</td>',
                                                '<td class="item-cost">{Price}</td></tr>',
                                             '<tr class="tbl-row-style">',
                                                '<td colspan="2" class="item-desc">{Description}</td></tr>',
                                                '<tpl if="xindex &lt; xcount">',
                                                '<tr><td colspan="2" align="center"><div class="div-separator-line" /></td></tr></tpl>',
                                        '</tpl>',
                                    '</table>',
                                '</tpl>',
                             '<tr><td><div class="div-break" /></td></tr>',
                         '</tpl>',
                     '</table>'
            ),

			websiteSpecials1: new Ext.XTemplate(
                    '<table class="table-tbl-outer">',
                        '<tpl for=".">',
                            '<tr><td class="category-head" align="center">{Name}</td></tr>',
                            '<tr class="tbl-row-style"><td class="category-desc" align="center">{Description}</td></tr>',
                            '<tr><td><div class="div-break" /></td></tr>',
                            '<tr><td>',
                                '<tpl if="Items.length &gt; 0">',
                                    '<table class="table-tbl-inner" cellpadding="5" cellspacing="5">',
                                        '<tpl for="Items">',
                                            '<tr class="tbl-row-style">',
                                                '<td class="item-head">{Name}</td>',
                                                '<td class="item-cost">{Price}</td></tr>',
                                             '<tr class="tbl-row-style">',
                                                '<td colspan="3" class="item-desc">{Description}</td></tr>',
                                                '<tpl if="xindex &lt; xcount">',
                                                '</tpl>',
											 '<tr class="tbl-row-style">',
												'<td class="item-cost">{Desc1} {Price1} &nbsp;&nbsp;  {Desc2} {Price2} &nbsp;&nbsp; {Desc3} {Price3} &nbsp;&nbsp;  {Desc4} {Price4}</td></tr>',
											 '<tr><td colspan="3" align="center"><div class="div-separator-line" /></td></tr>',
                                        '</tpl>',
                                    '</table>',
                                '</tpl>',
                             '<tr><td><div class="div-break" /></td></tr>',
                         '</tpl>',
                     '</table>'
            ),
			
			upcomingEvents: new Ext.XTemplate(
                    '<table class="table-tbl-outer">',
                        '<tpl for=".">',
                            '<tr><td valign="top" class="event-left-column" rowspan="3">',
                                    '<div class="event-image">',
									'<table cellspacing="0" cellpadding="0" border="0">',
										'<tbody><tr>',
											'<td class="image-border-TL"></td>',
											'<td class="image-border-TM"></td>',
											'<td class="image-border-TR"></td>',
										'</tr>',
										'<tr>',
											'<td class="image-border-LM">',
												(isPublished) ? '<img width="9" src="resources/images/s.gif">' : '<img width="9" src="/s.gif">',
											'</td>',
											'<td class="image-border-MM"><img src="{ImagePath}"/></td>',
											'<td class="image-border-RM">',
												(isPublished) ? '<img width="5" src="resources/images/s.gif">' : '<img width="5" src="/s.gif">',
											'</td>',
										'</tr>',
										'<tr>',
											'<td class="image-border-BL"></td>',
											'<td class="image-border-BM"></td>',
											'<td class="image-border-BR"></td>',
										'</tr>',
									'</tbody></table>',
                                '</td>',
                                '<td class="category-head">{Name}</td></tr>',
                            '<tr><td class="event-main-column">',
                                    '<table cellspacing="0" cellpadding="0" border="0">',
                                    '<tr><td class="event-field-label">Event</td><td class="event-field-text">{Name}</td></tr>',
                                    '<tr><td class="event-field-label">Date</td><td class="event-field-text">{EventDate}</td></tr>',
                                    '<tpl if="StartTime"><tr><td class="event-field-label">From</td><td class="event-field-text">{StartTime}</td></tr></tpl>',
                                    '<tpl if="EndTime"><tr><td class="event-field-label">To</td><td class="event-field-text">{EndTime}</td></tr></tpl>',
                                    '</table>',
                            '<div class="event-desc">{Description}</div>',
                            '</td></tr>',
                            '<tr><td><div class="div-break" /></td></tr>',
                         '</tpl>',
                     '</table>'
        ),		
		
		grabTheTab: new Ext.XTemplate(
                     '<tpl for=".">',
                        '<div class="grabmaintable">',
                            '<div class="grab-image">',
                                '<table  cellspacing="0" cellpadding="0" border="0" class="">',
								    '<tbody><tr>',
									    '<td class="image-border-TL"></td>',
									    '<td class="image-border-TM"></td>',
									    '<td class="image-border-TR"></td>',
								    '</tr>',
								    '<tr>',
									    '<td class="image-border-LM">',
											(isPublished) ? '<img width="9" src="resources/images/s.gif">' : '<img width="9" src="/s.gif">',
										'</td>',
									    '<td class="image-border-MM"><img class="grabimg" src="/Images/Premium/{ImageName}"/></td>',
										'<td class="image-border-RM">',
											(isPublished) ? '<img width="5" src="resources/images/s.gif">' : '<img width="5" src="/s.gif">',
										'</td>',
								    '</tr>',
								    '<tr>',
									    '<td class="image-border-BL"></td>',
									    '<td class="image-border-BM"></td>',
									    '<td class="image-border-BR"></td>',
								    '</tr>',
							    '</tbody></table>',
                            '</div>',
                            '<div class="textvalueofcard">Coupon for ${ValueOfCard}',
                            '</div>',
                            '<div class="buttondiv"><input class="cp-button" type="button" disabled="disabled" value="Customize & Purchase"/>',
                            '</div>',
                        '</div>',
                     '</tpl>'
            ),		
					
			contactUs: new Ext.XTemplate(
			'<tpl for=".">',
                '<div class="location-row">',
	                '<div class="location-coords" lat="{Latitude}" lng="{Longitude}">',
		                'lat="{Latitude}" lng="{Longitude}"',
	                '</div>',
	                '<div class="location-address">',
		                '{Street} {City}, {State} {Zip}',
	                '</div>',
	                '<div class="contact-listing">',
		                '<div class="contact-field-label">',
			                '<tpl if="!Name">',
				                'Contact Info:',
			                '</tpl>',
			                '<tpl if="Name">',
				                '{Name}',
			                '</tpl>',
		                '</div>',
		                '<div class="loc-details">',
			                '<tpl if="Description">',
				                '<div class="contact-field-text">',
					                '{Description}',
				                '</div>',
			                '</tpl>',
			                '<table width="100%" class="loc-table-inner">',
				                '<tr>',
					                '<td>',
						                '<div class="contact-field-text">',
							                '<tpl if="Street">',
								                '<div class="loc-street">',
									                '{Street}<br />',
									                '{City}, {State}  {Zip}',
								                '</div>',
							                '</tpl>',
							                '<tpl if="HasCoordinates">',
								                '<div class="click-for-directions">',
									                '<a href="#">(Click for Map & Directions)</a>',
								                '</div>',
							                '</tpl>',
							                '<tpl if="Phone">',
								                '<div class="loc-phone">',
									                'Phone: {Phone}',
								                '</div>',
							                '</tpl>',
							                '<tpl if="Web">',
                                                 (isPublished || isPreview) ? '<a target="_blank" href="http://{Web}">{Web}</a><br/>' : '{Web}<br/>',
							                '</tpl>',
							                '<tpl if="Email">',
                                                 (isPublished || isPreview) ? '<a href="mailto:{Email}">{Email}</a><br/>' : '{Email}<br/>',
							                '</tpl>',
							            '</div>',
					                '</td>',
					                '<td align="right">',
						                (isPublished || isPreview) ? '<a class="marker-icon" href="#"><img border="0"/></a>' : '<div class="dummy-marker"></div>',
					                '</td>',
				                '</tr>',
			                '</table>',
			                'Hours of Operation:<br/>',
			                '<tpl if="Hours">',
				                '<div class="contact-field-text">',
					                '{Hours}',
				                '</div>',
			                '</tpl>',
		                '</div>',
	                '</div>',
                '</div>',
            '</tpl>'
			)
}}
/*-----------------------------------------------END----------------------------------------------*/


function signupSuccess(){alert("Success");}