/*
 * Ext JS Library 2.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

//
// Note that these are all defined as panel configs, rather than instantiated 
// as panel objects.  You could just as easily do this instead:
//
// var absolute = new Ext.Panel({ ... });
//
// However, by passing configs into the main container instead of objects, we can defer 
// layout AND object instantiation until absolutely needed.  Since most of these panels
// won't be shown by default until requested, this will save us some processing 
// time up front when initially rendering the page.
//
// Since all of these configs are being added into a layout container, they are
// automatically assumed to be panel configs, and so the xtype of 'panel' is
// implicit.  To define a config of some other type of component to be added into
// the layout, simply provide the appropriate xtype config explicitly.
//
/*
 * ================  Start page config  =======================
 */
// The default start page, also a simple example of a FitLayout.

var testurl = gateURL.split("/");
var docName = testurl[testurl.length-1];
var redirectArray = docName.split(".");
var redirectName = redirectArray[0];

var activeTabNum = 0;
switch(redirectName){
	case 'gatehome':       activeTabNum = 0; break;
	case 'gategallery':    activeTabNum = 1; break;
	case 'gateequipment':  activeTabNum = 2; break;
	case 'gatewizard':     activeTabNum = 3; break;
	case 'gatefaq':        activeTabNum = 4; break;
	case 'gateabout':      activeTabNum = 5; break;
	case 'gatecontact':    activeTabNum = 6; break;
	default: activeTabNum = 0; 
}

var start = {
	id: 'start-panel',
	title: 'Start Page',
	layout: 'fit',
	autoScroll: true,
	bodyStyle: {'background': 'url("images/background.png")','background-repeat':'repeat'},
	autoLoad: {url:'home.html', scripts: true}
	//contentEl: 'start-div'  pull existing content from the page
};
// This is a fake CardLayout navigation function.  A real implementation would
// likely be more sophisticated, with logic to validate navigation flow.  It will
// be assigned next as the handling function for the buttons in the CardLayout example.
var cardNav = function(incr){
	var l = Ext.getCmp('card-wizard-panel').getLayout();
	var i = l.activeItem.id.split('card-')[1];
	var next = parseInt(i,10) + incr;
	l.setActiveItem(next);
	Ext.getCmp('card-prev').setDisabled(next===0);
	Ext.getCmp('card-next').setDisabled(next==2);
};


/*
 * ================  CardLayout config (TabPanel)  =======================
 */
// Note that the TabPanel component uses an internal CardLayout -- it's not
// something you have to explicitly configure.  However, it's still a perfect
// example of how this layout style can be used in a complex component.


var cardTabs = {
	xtype: 'tabpanel',
	id: 'card-tabs-panel',
	plain: true,  //remove the header border
	activeItem: activeTabNum,
	resizeTabs: true,
	border: false,
	defaults: {bodyStyle: 'padding:5px'},
	items:[{
		title: 'Home',
		id: 'gate-home',
		html: 'This is home page.',
		//tabTip : 'Go back to your home',
		//autoScroll: true,
		autoLoad: {url:'gate_home/home.html', scripts: true},
		bodyStyle: {background: '#efe5cb'}
	},{
		title: 'Gate Gallery',
		id:   'gate-gallery',
		html: 'This will be the Gallery',
		//tabTip : 'A full list of gate styles',
		//autoScroll: true,
		autoLoad: {url:'gate_gallery/gallery.html', scripts: true},
		bodyStyle: {background:'#efe5cb'}
	},{
 		title: 'Equipment',
 		id:   'gate-equipment',
 		//autoScroll: true,
		autoLoad: {url:'gate_equipment/equipment.html', scripts: true},
		//tabTip : 'Equipment and accessories',
		bodyStyle: {background: '#efe5cb'}
 	},{
 		title: 'Gate Designs',
 		id: 'gate-wizard',
 		//autoScroll: true,
 		autoLoad: {url:'gate_wizard/wizard.html', scripts: true},
		//tabTip : 'Gate Design Steps',
		bodyStyle: {background: '#efe5cb'}
 	},{
		title: 'FAQ',
		id:   'gate-faq',
		autoScroll: true,
		autoLoad: {url:'gate_faq/faq.html', scripts: true},
		tabTip : "Frequently Asked Questions",
		bodyStyle: { background: '#efe5cb'}
 	},{
		title: 'About Us',
		id: 'gate-about',
		html: 'This is about us area.',
		//tabTip : 'Learn about us',
		//autoScroll: true,
		autoLoad: {url:'gate_about/about.html', scripts: true},
		bodyStyle: {background: '#efe5cb'}
	},{
 		title: 'Contact Us',
 		id:   'gate-contact',
 		//autoScroll: true,
		autoLoad: {url:'gate_contact/contact.html', scripts: true},
		//tabTip : 'You want the digits?',
		bodyStyle: {background: '#efe5cb'}
 	}
	]
};





Ext.messageBox = function(){
    var msgCt;

    function createBox(t, s){
        return ['<div class="msg">',
                '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
                '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3>', t, '</h3>', s, '</div></div></div>',
                '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
                '</div>'].join('');
    }
    return {
        msg : function(title, format, blah,time){
            if(!msgCt){
                msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
            }
            
            msgCt.alignTo(document, 'l-s');
            var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
            var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);
            m.slideIn('t').pause(time).ghost("t", {remove:true});
        },

        init : function(){
            var t = Ext.get('exttheme');
            if(!t){ // run locally?
                return;
            }
            var theme = Cookies.get('exttheme') || 'aero';
            if(theme){
                t.dom.value = theme;
                Ext.getBody().addClass('x-'+theme);
            }
            t.on('change', function(){
                Cookies.set('exttheme', t.getValue());
                setTimeout(function(){
                    window.location.reload();
                }, 250);
            });

            var lb = Ext.get('lib-bar');
            if(lb){
                lb.show();
            }
        }
    };
}();

/*
 * Ext JS Library 2.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

//
// This is the main layout definition.
//
Ext.onReady(function(){
	
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';
	
	Ext.BLANK_IMAGE_URL = (function() {
	    if (Ext.isIE8 || Ext.isGecko || Ext.isOpera) {
	        return "data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
	    } else {
	        return "lib/ext-2.1/resources/images/default/s.gif";
		}
	})();
	
	var msgCt;
	function createBox(t, s){
        return ['<div class="msg">',
                '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
                '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3>', t, '</h3>', s, '</div></div></div>',
                '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
                '</div>'].join('');
    }

    function msg(title, format){
            if(!msgCt){
                msgCt = Ext.DomHelper.insertFirst(faqCmp.body, {id:'msg-div'}, true);
            }
            msgCt.alignTo(document, 't-t');
            var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
            var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);
            m.slideIn('t').pause(3).ghost('t', {remove:true});
     }
	
	// This is an inner body element within the Details panel created to provide a "slide in" effect
	// on the panel body without affecting the body's box itself.  This element is created on
	// initial use and cached in this var for subsequent access.
	var detailEl;
	
	// This is the main content center region that will contain each example layout panel.
	// It will be implemented as a CardLayout since it will contain multiple panels with
	// only one being visible at any given time.
	var contentPanel = {
		id: 'content-panel',
		region: 'center', 
		layout: 'card',
		//margins: '2 5 5 0',
		activeItem: 0,
		border: false,
		autoScroll: false,
		
		items: [
			cardTabs
		]
	};
    
	var logoPanel = {
    	id: 'logo-id',
    	height: 200,
    	bodyStyle: { 'border':'none','background': 'url("images/background.png")','background-repeat':'repeat' },
    	html: '<img id="logo" syle="position:absolute;left:1px;" src="images/logo.png">'
    };
	// Go ahead and create the TreePanel now so that we can use it below
    
    
	// Assign the changeLayout function to be called on tree node click.
    var topPanel = {
		id: 'top-panel',
        border: false,
        region: 'north',
        height: 150,
        bodyStyle: { 'position': 'relative','background': '#916a3b','background-repeat':'repeat','text-align':'center' },
		html: '<div id="top_image"><img alt="sitephotos (195K)" src="accesscontrol.png"/></div>'
		//items: [ logoPanel ]
    };
    
    
	// This is the Details panel that contains the description for each example layout.
	var detailsPanel = {
		id: 'details-panel',
        height: 700,
        region: 'center',
        //autoScroll: true,
        border: false,
        bodyStyle: { 'position': 'relative','background': '#FFFFFF','background-repeat':'repeat','padding':'5px' },
        //bodyStyle: 'padding-bottom:15px;background:#eee;',
		//autoScroll: true,
		html: '<div id="details"><div id="el2000"><img alt="el2000 (20K)" src="images/thumbs/equipment/el-2000.JPG"/></div>Call us toll-free at <font color="#916a3b"><b>800.338.8198</b></font><div id="or">OR</div>Call us locally at <font color="#916a3b"><b>707.935.3458</b></font><br>(Napa,Marin and Sonoma County)<div id="csw200"><img alt="csw200 (20K)" src="images/thumbs/equipment/CSW200UL_CW_detail.gif"/></div><div id="sod_div"><b>Looking for our garage doors site? Click Below</b><br><a href="http://sonomaoverheaddoors.com">Sonoma Overhead Doors</a></div></div>'
    };
    
    var leftPanel = {
		id: 'left-panel',
        border: false,
        region: 'west',
        height: 135,
        //bodyStyle: { 'position': 'relative','background': 'white','background-repeat':'repeat','text-align':'center','padding':'5px' },
        bodyStyle: { 'padding-top': '10px'},
		html: '<div id="acslogo"><img alt="sitephotos (20K)" src="images/logo.png"/></div>'
		//items: [ logoPanel ]
    };
	
    //var dom_container = Ext.get('access_gate_site_container');
    //console.dir(dom_container);
	// Finally, build the main layout once all the pieces are ready.  This is also a good
	// example of putting together a full-screen BorderLayout within a Viewport.
    var viewport = new Ext.Panel({
		layout: 'border',
		//title: 'ACS Layout',
		style: { 'background-color': '#916a3b' },
		autoScroll: false,
		width: 1040,
		height: 920,
		items: [topPanel
		,{
			
	    	id: 'layout-browser',
	        region:'west',
	        border: false,
	        
			margins: '2 0 5 0',
	        width: 220,
	        split: true,
	        minSize: 100,
	        maxSize: 1000,
	        bodyStyle: { 'background-color': '#9A7F2D' },
	        autoScroll : false,
			items: [ leftPanel,detailsPanel ]
		},
			contentPanel,
		{
			xtype: 'box',
			region: 'south',
			applyTo: 'footer',
			height: 15
			
		}],
		renderTo: Ext.get('access_gate_site_container')
        
    });
    //viewport.render('access_gate_site_container','access_gate_site_container');
    
});

// Functions to add or update a tab for account creation 
function addTab(tabTitle, targetUrl){
            var centerTabPanel = Ext.getCmp('card-tabs-panel');
			//centerTabPanel.removeListener('tabchange',updateTree); 
            centerTabPanel.add({
            	    id:    'feedbackTab',
                    title: 'Site Feedback',
                    
                    closable:true,
					tabTip : 'Go back to your home',
					autoScroll: true,
					autoLoad: {url: 'feedback.html', scripts: true},
					bodyStyle: {background: '#efe5cb'}
					
		
		     }).show();
             //centerTabPanel.removeListener('tabchange',updateTree); 
                
		     centerTabPanel.doLayout();
}

function updateTab(tabId,title, url) {
        var tabPanel = Ext.getCmp('card-tabs-panel');
        var tab = Ext.getCmp(tabId);
        if(tab){
        	    
        	    tabPanel.unhideTabStripItem(tab);
		        tab.setVisible(true);
        }else{
        	    
                tab = addTab(title,url);
        }
        tabPanel.setActiveTab(tab);
}
   
function hideTab(tab){
       	tab.setVisible(false);
}