Ext.onReady(function(){

	var Distance2WinBorder	= 43;	// 43 px left & right from center to Windows Border

   // Menu containing Welcome
    var tabWelcome = new Ext.Panel({
    	id:'welcome-panel',
    	frame:true,
    	title: '<span><h4 id="welcome_title">Gr&uuml;ezi, Willkommen, Bienvenu!</h4></span>',
			renderTo: 'section_welcome',
    	collapsible: true,
    	hideCollapseTool: false,
			collapsed: false,
			baseCls:'xevex-panel1',
			autoHeight: true,
    	contentEl:'welcome',
    	titleCollapse: true
    });
    // Parent Panel to hold Welcome menu
    var welcomePanel = new Ext.Panel({
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:300,//300, 414, 359
    	border: false,
    	items: [tabWelcome]
    });


   // Menu containing Beginn
    var tabBeginn = new Ext.Panel({
    	id:'beginn-panel',
    	frame:true,
    	title: '<span><h4 id="alpha">1&nbsp;&nbsp;&nbsp;&nbsp;Beginn&nbsp;der&nbsp;Probleml&ouml;sung</h4></span>',
			renderTo: 'section_a_1',
    	collapsible: true,
    	hideCollapseTool: false,
			collapsed: true,
			baseCls:'xevex-panel',
			autoHeight: true,
    	contentEl:'beginn',
    	titleCollapse: true
    });
    // Parent Panel to hold Beratung menu
    var beginnPanel = new Ext.Panel({
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:300,//414
    	border: false,
    	items: [tabBeginn]
    });


   // Menu containing Beratung
    var tabBeratung = new Ext.Panel({
    	id:'beratung-panel',
    	frame:true,
    	title: '<span><h4 id="beta">2&nbsp;&nbsp;&nbsp;&nbsp;Beratung</h4></span>',
			renderTo: 'section_a_1',
    	collapsible: true,
    	hideCollapseTool: false,
			collapsed: true,
			baseCls:'xevex-panel',
			autoHeight: true,
    	contentEl:'beratung',
    	titleCollapse: true
    });
    // Parent Panel to hold Beratung menu
    var beratungPanel = new Ext.Panel({
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:300,//414
    	border: false,
    	items: [tabBeratung]
    });

    // Menu containing Planung
    var tabPlanung = new Ext.Panel({
    	id:'planung-panel',
    	frame: true,
    	title: '<span><h4 id="gamma">3&nbsp;&nbsp;&nbsp;&nbsp;Planung</h4></span>',
    	renderTo: 'section_a_1',
    	collapsible:true,
    	hideCollapseTool: false,
			collapsed: true,
			baseCls:'xevex-panel',
			autoHeight: true,
    	contentEl:'planung',
    	titleCollapse: true
    });
    // Parent Panel to hold Planung menu
    var planungPanel = new Ext.Panel({
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:300,
    	border: false,
    	items: [tabPlanung]
    });

    // Menu containing Installation
    var tabInstallation = new Ext.Panel({
    	id:'installation-panel',
    	frame: true,
    	title: '<span><h4 id="delta">4&nbsp;&nbsp;&nbsp;&nbsp;Installation</h4></span>',
    	renderTo: 'section_a_1',
    	collapsible:true,
    	hideCollapseTool: false,
			collapsed: true,
			baseCls:'xevex-panel',
			autoHeight: true,
    	contentEl:'installation',
    	titleCollapse: true
    });
    // Parent Panel to hold Planung menu
    var planungPanel = new Ext.Panel({
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:300,
    	border: false,
    	baseCls:'x-panel',
    	items: [tabInstallation]
    });

    // Menu containing Support
    var tabSupport = new Ext.Panel({
    	id:'support-panel',
    	frame:true,
    	title: '<span><h4 id="epsilon">5&nbsp;&nbsp;&nbsp;&nbsp;Support</h4></span>',
    	renderTo: 'section_a_1',
    	collapsible:true,
    	hideCollapseTool: false,
			collapsed: true,
			baseCls:'xevex-panel',
			autoHeight: true,
    	contentEl:'support',
    	titleCollapse: true
    });
    // Parent Panel to hold Planung menu
    var planungPanel = new Ext.Panel({
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:300,
    	border: false,
    	baseCls:'x-panel',
    	items: [tabSupport]
    });

    // Menu containing Team
    var tabTeam = new Ext.Panel({
    	id:'team-panel',
    	frame:true,
    	title: '<span><h4 id="zeta">6&nbsp;&nbsp;&nbsp;&nbsp;Das xevex Team</h4></span>',
    	renderTo: 'section_a_2',
    	collapsible:true,
    	hideCollapseTool: false,
			collapsed: true,
			baseCls:'xevex-panel',
    	contentEl:'team',
    	titleCollapse: true
    });
    // Parent Panel to hold Team menu
    var planungPanel = new Ext.Panel({
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:300,
    	border: false,
    	baseCls:'x-panel',
    	items: [tabTeam]
    });

    var accordion = new Ext.Panel({
    //title: 'Accordion Layout',
    renderTo: 'team',
    layout:'accordion',
    border: false,
    //fill: false,
    width:360,// 445, 402
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:3px, background-color:#0f0',
        autoHeight:true
    },
    layoutConfig: {
        // layout-specific configs go here
        collapseFirst: false,
        hideCollapseTool: true,
        animate: true,
        activeOnTop: false
    },
    items: [{
        collapsed: false,
        title: '<h4 class="nounderline">Sven R&ouml;hler&nbsp;&nbsp;&nbsp;| Gesch&auml;ftsinhaber | Leiter IT</h4>',
        html:  '<p><ul class="x_bullet"><li>geboren 1978</li><li>Abschluss einer Anlagen- und Appartenbauer-Lehre bei Novartis</li><li>2002 Netzwerkverantwortlicher bei Sorba EDV AG in St.&nbsp;Gallen</li><li>2003 erste nebenberufliche Supportauftr&auml;ge f&uuml;r Privatkunden und Kleinfirmen</li></ul></p>'
    },{
        collapsed: true,
        title: '<h4 class="nounderline">Simone Fleuti | Administration | Redaktion</h4>',
        html:  '<p><ul class="x_bullet"><li>geb. 1969</li><li>Abschluss einer Kaufm&auml;nnischen Lehre in Garage Grossniklaus AG</li><li>Absolventin SAWI Werbeassistentinnenschule</li></ul></p>'
    }]
	});


    // Menu containing Referenzen
    var tabReferenzen = new Ext.Panel({
    	id:'referenzen-panel',
    	frame:true,
    	title: '<span><h4 id="eta">7&nbsp;&nbsp;&nbsp;&nbsp;Referenzen</h4></span>',
    	renderTo: 'section_a_2',
    	collapsible:true,
    	hideCollapseTool: false,
			collapsed: true,
			baseCls:'xevex-panel',
			autoHeight: true,
    	contentEl:'referenzen',
    	titleCollapse: true
    });
    // Parent Panel to hold Referenzen menu
    var referenzenPanel = new Ext.Panel({
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:300,
    	border: false,
    	baseCls:'x-panel',
    	items: [tabReferenzen]
    });

    // Menu containing Computer
    var tabComputer = new Ext.Panel({
    	id:'computer-panel',
    	frame:true,
    	title: '<span><h4 id="iota">8&nbsp;&nbsp;&nbsp;&nbsp;Computer</h4></span>',
    	renderTo: 'section_b_1',
    	collapsible:true,
    	hideCollapseTool: false,
			collapsed: true,
			baseCls:'xevex-panel',
			autoHeight: true,
    	contentEl:'computer',
    	titleCollapse: true
    });
    // Parent Panel to hold Computer menu
    var computerPanel = new Ext.Panel({
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:300,
    	border: false,
    	baseCls:'x-panel',
    	items: [tabComputer]
    });

    // Menu containing Netzwerk
    var tabNetzwerk = new Ext.Panel({
    	id:'network-panel',
    	frame:true,
    	title: '<span><h4 id="theta">9&nbsp;&nbsp;&nbsp;&nbsp;Netzwerk</h4></span>',
    	renderTo: 'section_b_1',
    	collapsible:true,
    	hideCollapseTool: false,
			collapsed: true,
			baseCls:'xevex-panel',
			autoHeight: true,
    	contentEl:'network',
    	titleCollapse: true
    });
    // Parent Panel to hold Netzwerk menu
    var netzwerkPanel = new Ext.Panel({
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:300,
    	border: false,
    	baseCls:'x-panel',
    	items: [tabNetzwerk]
    });

    // Menu containing Server
    var tabServer = new Ext.Panel({
    	id:'server-panel',
    	frame:true,
    	title: '<span><h4 id="kappa">10&nbsp;&nbsp;Server</h4></span>',
    	renderTo: 'section_b_1',
    	collapsible:true,
    	hideCollapseTool: false,
			collapsed: true,
			baseCls:'xevex-panel',
			autoHeight: true,
    	contentEl:'server',
    	titleCollapse: true
    });
    // Parent Panel to hold Server menu
    var serverPanel = new Ext.Panel({
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:300,
    	border: false,
    	baseCls:'x-panel',
    	items: [tabServer]
    });
    
    
    // Menu containing Informations
    var tabInformations = new Ext.Panel({
    	id:'informations-panel',
    	frame:true,
    	title: '<span><h4 id="lambda">11&nbsp;&nbsp;Webdesign</h4></span>',
    	renderTo: 'section_b_1',
    	collapsible:true,
    	hideCollapseTool: false,
			collapsed: true,
			baseCls:'xevex-panel',
			autoHeight: true,
    	contentEl:'informations',
    	titleCollapse: true
    });
    // Parent Panel to hold Informations menu
    var produktePanel = new Ext.Panel({
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:300,
    	border: false,
    	baseCls:'x-panel',
    	items: [tabInformations]
    });
    
    
    // Menu containing Produkte
    var tabProdukte = new Ext.Panel({
    	id:'products-panel',
    	frame:true,
    	title: '<span><h4 id="my">12&nbsp;&nbsp;Produkte&nbsp;von</h4></span>',
    	renderTo: 'section_b_1',
    	collapsible:true,
    	hideCollapseTool: false,
			collapsed: true,
			baseCls:'xevex-panel',
			autoHeight: true,
    	contentEl:'products',
    	titleCollapse: true
    });
    // Parent Panel to hold Produkte menu
    var produktePanel = new Ext.Panel({
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:300,
    	border: false,
    	baseCls:'x-panel',
    	items: [tabProdukte]
    });
/**************************************************************************************************************************************************/
    // Menu containing Downloads
    var tabDownloads = new Ext.Panel({
    	id:'downloads-panel',
    	frame:true,
    	title: '<span><h4 id="ny">13&nbsp;&nbsp;Downloads</h4></span>',
    	renderTo: 'section_b_2',
    	collapsible:true,
    	hideCollapseTool: false,
			collapsed: true,
			baseCls:'xevex-panel',
			autoHeight: true,
    	contentEl:'downloads',
    	titleCollapse: true
    });
    // Parent Panel to hold Downloads menu
    var downloadsPanel = new Ext.Panel({
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:300,
    	border: false,
    	baseCls:'x-panel',
    	items: [tabDownloads]
    });
    
    var accordion = new Ext.Panel({
    //title: 'Accordion Layout',
    renderTo: 'downloads',
    layout:'accordion',
    border: false,
    //fill: false,
    width:360,// 445, 402
      defaults: 
      {
          // applied to each contained panel
          bodyStyle: 'padding:3px, background-color:#0f0',
          autoHeight:true
      },
      layoutConfig: {
          // layout-specific configs go here
          collapseFirst: false,
          hideCollapseTool: true,
          animate: true,
          activeOnTop: false
      },
      items: [{
          collapsed: false,
          title: '<h4 class="nounderline">AGB\'s und Wartungsvertr&auml;ge</h4>',
          html:  '<img src="img/pdf.png" class="agb-image" /><p>KMU<ul><li><a href="pdf/AGB_xevex_KMU_20090320.pdf" class="nounderline">Allgemeine Gesch&auml;ftsbedingungen (AGB)</a></li><li><a href="pdf/Support & Wartungsvertrag_20090320.pdf" class="nounderline">Support- & Wartungsvertrag</a></li></ul>   <br />Privatkunden<ul><li><a href="pdf/AGB_xevex_Privatkunden_20090925.pdf" class="nounderline">Allgemeine Gesch&auml;ftsbedingungen (AGB)</a></li></ul></p><br />'
      }]
    });
    // Menu containing Glossar
    var tabGlossar = new Ext.Panel({
    	id:'glossar-panel',
    	frame:true,
    	title: '<span><h4 id="omikron">14&nbsp;&nbsp;Kontakt</h4></span>',
    	renderTo: 'section_b_2',
    	duration: 1,
    	collapsible:true,
    	hideCollapseTool: false,
			collapsed: true,
			baseCls:'xevex-panel',
			autoHeight: true,
    	contentEl:'glossar',
    	titleCollapse: true
    });
    // Parent Panel to hold Glossar menu
    var glossarPanel = new Ext.Panel({
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:300,
    	border: false,
    	baseCls:'x-panel',
    	items: [tabGlossar]
    });

	Ext.get('openAll').on('click', function()	{
		openAll();
	});
	function openAll()	{
		tabBeginn.expand();
		tabBeratung.expand();
		tabPlanung.expand();
		tabInstallation.expand();
		tabSupport.expand();
		tabTeam.expand();
		tabReferenzen.expand();
		tabComputer.expand();
    tabNetzwerk.expand();
		tabServer.expand();
		tabInformations.expand();
		tabProdukte.expand();
		tabDownloads.expand();
		tabGlossar.expand();
	}
	Ext.get('closeAll').on('click', function()	{
		closeAll();
	});
	function closeAll()	{
		tabBeginn.collapse();
		tabBeratung.collapse();
		tabPlanung.collapse();
		tabInstallation.collapse();
		tabSupport.collapse();
		tabTeam.collapse();
		tabReferenzen.collapse();
		tabComputer.collapse();
		tabNetzwerk.collapse();    
		tabServer.collapse();
    tabInformations.collapse();
		tabProdukte.collapse();
		tabDownloads.collapse();
		tabGlossar.collapse();
	}
	
	
	
	Ext.get('Frau').on('click', function()	{
		fn_checkbox('Frau');
	});
	Ext.get('Herr').on('click', function()	{
		fn_checkbox('Herr');
	});
	function fn_checkbox(gender)	{
		if(gender == 'Frau')	{
			document.getElementById("gender_code").value = "Frau";
			document.getElementById("checkbox_Herr").src = "img/checkbox.png";
			document.getElementById("checkbox_Frau").src = "img/checkbox_checked.png";
		}
		if(gender == 'Herr')	{
			document.getElementById("gender_code").value = "Herr";
			document.getElementById("checkbox_Frau").src = "img/checkbox.png";
			document.getElementById("checkbox_Herr").src = "img/checkbox_checked.png";
		}
	}
	
	Ext.get('delete').on('click', function()	{
		fn_del_form();
	});
	function fn_del_form()	{
		document.getElementById("company").value = "";
		document.getElementById("gender_code").value = "";
		document.getElementById("checkbox_Frau").src = "img/checkbox.png";
		document.getElementById("checkbox_Herr").src = "img/checkbox.png";
		document.getElementById("name").value = "";
		document.getElementById("prename").value = "";
		document.getElementById("street").value = "";
		document.getElementById("zip").value = "";
		document.getElementById("location").value = "";
		document.getElementById("country").value = "";
		document.getElementById("phone").value = "";
		document.getElementById("mobile").value = "";
		document.getElementById("email").value = "";
	}
	Ext.get('send').on('click', function()	{
		fn_send_form();
	});
	function fn_send_form()	{
		alert(
			document.getElementById("company").value +
			document.getElementById("gender_code").value +
			document.getElementById("name").value +
			document.getElementById("prename").value +
			document.getElementById("street").value +
			document.getElementById("zip").value +
			document.getElementById("location").value +
			document.getElementById("country").value +
			document.getElementById("phone").value +
			document.getElementById("mobile").value +
			document.getElementById("email").value
		);
	}
	
	
	
	
	
	
	Ext.get('welcome_title').on('mouseover', function()	{
		this.highlight("#eef5ee",	{
    														attr: "background-color",
    														//easing: 'easeIn',
    														duration: .3
															});
	});
	Ext.get('alpha').on('mouseover', function()	{
		this.highlight("#eef5ee",	{
    														attr: "background-color",
    														//easing: 'easeIn',
    														duration: .3
															});
	});
	Ext.get('beta').on('mouseover', function()	{
		this.highlight("#eef5ee",	{
    														attr: "background-color",
    														//easing: 'easeIn',
    														duration: .3
															});
	});
	Ext.get('gamma').on('mouseover', function()	{
		this.highlight("#eef5ee",	{
    														attr: "background-color",
    														//easing: 'easeIn',
    														duration: .3
															});
	});
	Ext.get('delta').on('mouseover', function()	{
		this.highlight("#eef5ee",	{
    														attr: "background-color",
    														//easing: 'easeIn',
    														duration: .3
															});
	});
	Ext.get('epsilon').on('mouseover', function()	{
		this.highlight("#eef5ee",	{
    														attr: "background-color",
    														//easing: 'easeIn',
    														duration: .3
															});
	});
	Ext.get('zeta').on('mouseover', function()	{
		this.highlight("#eef5ee",	{
    														attr: "background-color",
    														//easing: 'easeIn',
    														duration: .3
															});
	});
	Ext.get('eta').on('mouseover', function()	{
		this.highlight("#eef5ee",	{
    														attr: "background-color",
    														//easing: 'easeIn',
    														duration: .3
															});
	});
	Ext.get('theta').on('mouseover', function()	{
		this.highlight("#eef5ee",	{
    														attr: "background-color",
    														//easing: 'easeIn',
    														duration: .3
															});
	});
	Ext.get('iota').on('mouseover', function()	{
		this.highlight("#eef5ee",	{
    														attr: "background-color",
    														//easing: 'easeIn',
    														duration: .3
															});
	});
	Ext.get('kappa').on('mouseover', function()	{
		this.highlight("#eef5ee",	{
    														attr: "background-color",
    														//easing: 'easeIn',
    														duration: .3
															});
	});
	Ext.get('lambda').on('mouseover', function()	{
		this.highlight("#eef5ee",	{
    														attr: "background-color",
    														//easing: 'easeIn',
    														duration: .3
															});
	});
	Ext.get('my').on('mouseover', function()	{
		this.highlight("#eef5ee",	{
    														attr: "background-color",
    														//easing: 'easeIn',
    														duration: .3
															});
	});
	Ext.get('ny').on('mouseover', function()	{
		this.highlight("#eef5ee",	{
    														attr: "background-color",
    														//easing: 'easeIn',
    														duration: .3
															});
	});
	Ext.get('omikron').on('mouseover', function()	{
		this.highlight("#eef5ee",	{
    														attr: "background-color",
    														//easing: 'easeIn',
    														duration: .3
															});
	});
});