Ext.BLANK_IMAGE_URL = 's.gif';
  
//BUGS:
//Bubbles disappear in chrome
//Headings are wrong colour in internet explorer
//Can't seem to pad the bubbles / move them so that there are gaps between
//Links a etc need redoing in grey and blue

function dispproject(projectnum){
	// loop over all of the news stories and switch them all off (except storynum)
	for(i=0;i<=3;i++){
		if(i==projectnum){
			document.getElementById('Contract'+i.toString()).style.display='block';
			document.getElementById('projrightarrow').style.display='block';
			document.getElementById('projleftarrow').style.display='none';
		} else {
			document.getElementById('Contract'+i.toString()).style.display='none';			
			document.getElementById('projrightarrow').style.display='none';
			document.getElementById('projleftarrow').style.display='block';			
		}
	
	}
}

function dispnews(storynum){
	// loop over all of the news stories and switch them all off (except storynum)
	for(i=0;i<=9;i++){
		if(i==storynum){
			document.getElementById('News'+i.toString()).style.display='block';
		} else {
			document.getElementById('News'+i.toString()).style.display='none';			
		}
	
	}
}


function tab(tabnum){
	var tabstr = tabnum.toString();
	for(i=0;i<3;i++){
		if(i==tabnum){
			document.getElementById('tab'+i.toString()).style.display='block'
			document.getElementById('tab'+i.toString()+'L').className='active';
			document.getElementById('tab'+i.toString()+'R').className='active';		
			document.getElementById('tab'+i.toString()+'L').blur();
			document.getElementById('tab'+i.toString()+'R').blur();
		} else {
			document.getElementById('tab'+i.toString()).style.display='none';
			document.getElementById('tab'+i.toString()+'L').className='';
			document.getElementById('tab'+i.toString()+'R').className='';
		}
	}
	document.getElementById('mainmap').style.display='block';
}

    var mytabPanel;

Ext.onReady(function() {


//~ var ResizableExample = {
	//~ init : function(){
	    
		//~ var transparent = new Ext.Resizable('transparent', {
			//~ wrap:true,
			//~ minWidth:50,
			//~ minHeight: 50,
			//~ preserveRatio: true,
			//~ transparent:true
		//~ });
	
	//~ }
//~ };

//~ Ext.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);
//------------------------------------------------------------------------------------------------------------------------------------------------------BUBBLES
    //~ var cp = new Ext.ux.BubblePanel({
	//~ renderTo: 'bubbleHome1',
	//~ bodyStyle:'padding:5px;',
	//~ border: true,
	//~ //height: 300,
	//~ autoHeight: true,
	//~ contentEl: 'bubble-welcome'
    //~ });

    var cp = new Ext.Panel({
	renderTo: 'bubbleHome1',
	bodyStyle:'padding:5px;',
	border: true,
	//height: 300,
	autoHeight: true,
	contentEl: 'bubble-welcome'
    });
    
    var cp3 = new Ext.Panel({
	renderTo: 'bubbleHome2',
	bodyStyle:'padding:5px;',
	border: true,
	contentEl: 'bubble-news'
    });
        var cp2 = new Ext.Panel({
	renderTo: 'bubbleNews2',
	bodyStyle:'padding:5px;',
	border: true,
	contentEl: 'bubble-all-news'
    });
        
//------------------------------------------------------------------------------------------------------------------------------------------------------FORM
    
//~ var myForm = new Ext.form.FormPanel({
	//~ title: 'Form Layout',
	//~ renderTo:"form1",
	//~ labelWidth: 75,
	//~ width: 350,
	//~ //height: 400,
	//~ defaultType: 'textfield',
	//~ defaults: {
        //~ // applied to each contained item
        //~ width: 230,
        //~ //msgTarget: 'side'
	//~ },
	//~ items: [{
		//~ fieldLabel: 'First Name',
		//~ name: 'first',
		//~ allowBlank:false
	    //~ },{
		//~ fieldLabel: 'Last Name',
		//~ name: 'last'
	    //~ },{
		//~ fieldLabel: 'Company',
		//~ name: 'company'
	    //~ },{
		//~ fieldLabel: 'Email',
		//~ name: 'email',
		//~ vtype:'email'
	    //~ }
	//~ ],
	//~ buttons: [
	    //~ {text: 'Save'},
	    //~ {text: 'Cancel'}
	//~ ]
    //~ });

      var myForm = new Ext.FormPanel({
        labelAlign: 'top',
        //frame:true,
	renderTo:"form1",
        //title: 'Multi Column, Nested Layouts and Anchoring',
	standardSubmit:true,
        bodyStyle:'padding:0px 0px 0',
        width: 550,
	border: false,
        items: [{
		layout:'column',
		border: false,
		items:[{
			columnWidth:.5,
			layout: 'form',
			border: false,
			items: [{
				xtype:'textfield',
				height: 20,
				fieldLabel: 'Name*',
				name: 'name',
				html: 'test',
				anchor:'95%'
			}, {
				xtype:'textfield',
				height: 20,
				fieldLabel: 'Company',
				name: 'company',
				anchor:'95%'
			}]
			},{
			columnWidth:.5,
			layout: 'form',
			border: false,
			items: [{
				xtype:'textfield',
				height: 20,
				fieldLabel: 'Email*',
				name: 'email',
				vtype:'email',
				anchor:'95%'
			},{
				xtype:'textfield',
				height: 20,
				fieldLabel: 'Country',
				name: 'country',
				anchor:'95%'
			}]
		}]		
        },
	{
            xtype:'htmleditor',
            id:'bio',
	    name: 'description',
            fieldLabel:'Description of information requested*',
            height:140,
            anchor:'98%'
        },
	{  
		xtype:"hidden",
		name: "from",
		value:'webform@abcgis.co.uk'
	},
	{  
		xtype:"hidden",
		name: "recipient",
		value:'3' // alias for the sendto email address
	},
	{  
		xtype:"hidden",
		name: "required",
		value:'name,email,description'
	},		
	{  
		xtype:"hidden",
		name: "redirect",
		value:'http://www.abcgis.co.uk/thankyou.html'
	},	
	{  
		xtype:"hidden",
		name: "require",
		value:'email'
	}
	],

        buttons: [            
	{  
		text: 'Submit',
		handler: function() {
			var O=this.ownerCt;
			O.getForm().getEl().dom.action="http://www.abcgis.co.uk/cgi-bin/FormMail.pl";
			O.getForm().submit();
		}
        },
	{
            text: 'Reset'
        }]
    });
 
//------------------------------------------------------------------------------------------------------------------------------------------------------SLIDESHOW    
    
//<script type="text/javascript">
	//~ $('slideshow').style.display='none';
	//~ $('wrapper').style.display='block';
	//~ var slideshow=new TINY.slideshow("slideshow");
	//~ window.onload=function(){
		//~ slideshow.auto=true;
		//~ slideshow.speed=5;
		//~ slideshow.link="linkhover";
		//~ slideshow.info="information";
		//~ slideshow.thumbs="slider";
		//~ slideshow.left="slideleft";
		//~ slideshow.right="slideright";
		//~ slideshow.scrollSpeed=4;
		//~ slideshow.spacing=5;
		//~ slideshow.active="#fff";
		//~ slideshow.init("slideshow","image","imgprev","imgnext","imglink");
	//~ }
//</script>
	
	
//------------------------------------------------------------------------------------------------------------------------------------------------------TABPANEL
    mytabPanel = new Ext.TabPanel({
		region:'center',
		layoutOnTabChange: true,
		frame: false,    
		//layout: 'border',
		hideBorders: true,
		listeners: {
		    tabchange: function(mytabPanel,tab) {
			if (tab.id == 'tab5'){
				dispnews(0);
			}
			else if (tab.id == 'tab4'){
				//dispproject(0);
			}
		    }
		},
		activeTab: 0, 
		items: [
			{
			id:'tab1',
			title: 'Home',
			layout: 'border',
			items: [
				{
				region: 'center',
				hideBorders: true,
				border: false,
				xtype: 'panel',
				layout: "border",
				items: [{
					region: 'west',
					width: 500,
					contentEl: 'bubbleHome1',
					split: true,
					margins: '10 10 10 10',
					xtype: 'panel'
					},
					{
					region: 'center',
					contentEl: 'bubbleHome2',
					margins: '10 10 10 10',
					xtype: 'panel'
					}
				]
				}
			],
			closable:false,
			autoScroll:true
			},
			{
			id:'tab2',
			title: 'Services',
			layout: 'border',
			items: [
				{
				region: 'center',
				hideBorders: true,
				border: false,
				xtype: 'panel',
				layout: "border",
				items: [{
					region: 'west',
					width: 400,
					contentEl: 'Services2',
					autoScroll:true,
					split: true,
					bodyStyle:'padding:15px;',
					xtype: 'panel'
					},
					{
					region: 'center',
					//title: 'text',
					contentEl: 'Services',
					split: true,
					autoScroll:true,
					bodyStyle:'padding:15px;',
					xtype: 'panel'
					}
				]
				}
			],
			closable:false,
			autoScroll:true
			},
			{
			id:'tab3',
			title: 'Company Profile',
			layout: 'border',
			items: [
				{
				region: 'center',
				xtype: 'panel',
				border: false,
				contentEl: 'CompanyProfile',
				bodyStyle:'padding:15px;',
				split: true,
				autoScroll: true
				}
			],
			closable:false,
			autoScroll:true
			},
			{
			id:'tab4',
			title: 'Projects',
			layout: 'border',
			items: [
				{
				region: 'center',
				hideBorders: true,
				border: false,
				xtype: 'panel',
				layout: "border",
				items: [{
					region: 'west',
					width: 100,
					contentEl: 'Previous_project',
					//id: 'list_of_projects',
					split: true,
					bodyStyle:'padding:15px;',
					xtype: 'panel'
					},
					{
					region: 'center',
					contentEl: 'Contracts',
					split: true,
					bodyStyle:'padding:15px;',
					autoScroll:true,
					xtype: 'panel'
					},
					{
					region: 'east',
					width: 100,
					contentEl: 'Next_project',
					split: true,
					bodyStyle:'padding:15px;',
					xtype: 'panel'
					}
				]
				}
			],
			closable:false,
			autoScroll:true
			},
			{
			id:'tab5',
			title: 'News',
			layout: 'border',
			items: [
				{
				region: 'center',
				hideBorders: true,
				border: false,
				xtype: 'panel',
				layout: "border",
				items: [{
					region: 'west',
					width: 500,
					contentEl: 'News',
					split: true,
					bodyStyle:'padding:15px;',
					xtype: 'panel'
					},
					{
					region: 'center',
					contentEl: 'bubbleNews2',
					split: true,
					bodyStyle:'padding:15px;',
					xtype: 'panel'
					}
				]
				}
			],
			closable:false,
			autoScroll:true
			},
			{
			id:'tab6',
			title: 'Contact',
			//tabCls: 'right-tab',
			layout: 'border',
			items: [
				{
				region: 'north',
				xtype: 'panel',
				layout: 'border',
				height: 125,
				items:[{
					region: 'center',
					contentEl: 'Contact2',
					border: false,
					margins: '15 15 0 15',
					autoScroll: true
					}]
				},
				{
				region: 'center',
				//title: 'center',
				layout: 'border',
				border: false,
				items: [
					{
					region: 'west',
					xtype: 'panel',
					border: false,
					contentEl: 'Contact',
					width: 250,
					margins: '15 15 15 15',
					autoScroll: true,
					split: true
					},
					{
					region: 'center',
					xtype: 'panel',
					border: false,
					contentEl: 'form1',
					margins: '0 0 0 15',
					autoScroll: true,
					split: true
					}
				]
			}
			],
			closable:false,
			autoScroll:true
			}			
		]
    });
    

var contractsPanel = new Ext.Panel({
	hideBorders: false,
	layout: 'border',
	width: 200,
	contentEl: 'contracts'
});
    
//----------------------------------------------------------------------------------------------------------------------------------------------------------- VIEWPORT
    new Ext.Viewport({
        hideBorders: true,
	layout: "border",
	//deferredRender: false,
	items: [{
		//title: 'MAIN WEST PANEL',
		region: 'west',
		hideBorders: true,
		layout: "border",
		width: 60,
			items: [{
			//title: 'north panel',
			region: 'north',
			id: 'myGreyPanel',
			xtype: 'panel',
			height: 150
			},
			{
			//title: 'center panel',
			region: 'center',
			id: 'myBluePanel',
			xtype: 'panel'
			}]
		},
		{
		//title: 'MAIN CENTER PANEL',
		region: 'center',
		hideBorders: true,
		layout: "border",
		border: false,
			items: [{
				//title: 'north panel',
				region: 'north',
				xtype: 'panel',
				height: 126,
				items: [{
					region: 'north',
					xtype: 'panel',
					border: false,
					contentEl: 'logo',
					height: 126
					},
					{
					region: 'center',
					xtype: 'panel',
					//title: 'center of north',
					border: false
					}
				]
				},
				{
				region: 'center',
				//title: 'test',
				hideBorders: true,
				xtype: 'panel',
				//height: 500,
				layout: 'border',
				items: [mytabPanel]
				//~ items: [{
					//~ region: 'west',
					//~ width: 500,
					//~ contentEl: 'bubbleCt',
					//~ split: true,
					//~ margins: '10 10 10 10',
					//~ xtype: 'panel'
					//~ },
					//~ {
					//~ region: 'center',
					//~ contentEl: 'bubbleCt3',
					//~ margins: '10 10 10 10',
					//~ xtype: 'panel'
					//~ }
				//~ ]
				},
				{
				//title: 'south panel',
				region: 'south',
				height: 40,
				//id: 'myBluePanel',
				items: [{
					region: 'center',
					xtype: 'panel',
					border: true,
					//autoHeight: true,	
					id: 'myAddressPanel',					
					height: 30,
					contentEl: 'address'
					},
					{
					region: 'south',
					xtype: 'panel',
					height: 10,
					id: 'myBluePanel',
					//title: 'center of north',
					border: false
					}
				]
				}
			]
		},
		{
		//title: 'MAIN EAST PANEL',
		region: 'east',
		hideBorders: true,
		layout: "border",
		width: 60,
			items: [{
			//title: 'north panel',
			region: 'north',
			id: 'myGreyPanel',
			xtype: 'panel',
			height: 150
			},
			{
			//title: 'center panel',
			region: 'center',
			id: 'myBluePanel',
			xtype: 'panel'
			}]
		}
	]
    }); //closes viewport       

    	var news9= Ext.get('news_9');
	news9.on('click', function(){
		mytabPanel.setActiveTab(4);
		dispnews(9);
	});
    	var news8= Ext.get('news_8');
	news8.on('click', function(){
		mytabPanel.setActiveTab(4);
		dispnews(8);
	});
    	var news7= Ext.get('news_7');
	news7.on('click', function(){
		mytabPanel.setActiveTab(4);
		dispnews(7);
	});
	var news6 = Ext.get('news_6');
	news6.on('click', function(){
		mytabPanel.setActiveTab(4);
		dispnews(6);
	});	
	var news5 = Ext.get('news_5');
	news5.on('click', function(){
		mytabPanel.setActiveTab(4);
		dispnews(5);
	});	
	var news4 = Ext.get('news_4');
	news4.on('click', function(){
		mytabPanel.setActiveTab(4);
		dispnews(4);
	});	
	var news3 = Ext.get('news_3');
	news3.on('click', function(){
		mytabPanel.setActiveTab(4);
		dispnews(3);
	});	
	var news2 = Ext.get('news_2');
	news2.on('click', function(){
		mytabPanel.setActiveTab(4);
		dispnews(2);
	});	
	var news1 = Ext.get('news_1');
	news1.on('click', function(){
		mytabPanel.setActiveTab(4);
		dispnews(1);
	});	
	
	var contactpage = Ext.get('gotocontact');
	contactpage.on('click', function(){
		mytabPanel.setActiveTab(5);
	});
	


	
});