(function() {
	motorola.pages.SupportContact = new Class({
		Implements: [Events, Options],
		cache:{},
		currentTab: null, // String
		defaultTab: null, // String
		tabConfigs: null, // <String, String>
		tabContent: null, // String
		tabs: null, // String
		
		//
		//
		//
		domready: function() {
		
			motorola.utils.PngFix.fixClass('png');
			
			$$('#tabs-wrapper .tabs li').each(function(li) {
				var p = li.getElement('p');
				var span = new Element('span');
				li.adopt(span.clone().addClass('left'));
				li.adopt(span.clone().addClass('right'));
				p.adopt(span.clone().addClass('left'));
				p.adopt(span.clone().addClass('right'));
			});
		},	
		
		//
		//
		//
		getFromCache: function(tabName) {
		
			var cache = this.cache;
			// Check if iframe is already in cache
			//var iframe = cache[tabName];
			var iframe=false;
			var options;
			if ( !iframe ) {
				options = $merge(this.tabConfigs[tabName],{
					'frameborder': '0',
					'styles': {
						'height': this.tabConfigs[tabName].height
					}
				});
				// Setup the iframe
				var iframe = new IFrame(options);
				iframe.set('scrolling', 'auto');
				
				// Add iframe to cache
				cache[tabName] = iframe;
			}
			
			return iframe;
		},
		
		// 
		//
		//
		initialize: function(options) {
		
			// Set the name of the tabs container
			this.tabs = options.tabs;
			
			// Set the name of the tab content
			this.tabContent = options.tabContent;
			
			// Set tab configs
			this.tabConfigs = options.tabConfigs;
			
			// Set default tab
			this.defaultTab = options.defaultTab;
			
			addEvent('domready',this.domready.bind(this));			
			addEvent('load',this.load.bind(this));
		},

		//
		//
		//
		initTabs: function(text, xml) {

			// Setup tab actions
			var tabs = $(this.tabs);
			tabs.getElements('.tabs li').each(function(li) {	
				li.addEvent('click',this.tabSelect.pass([li],this));
				if (li.getElement('img')) { li.addClass('hasImage'); }
				if (Browser.Engine.trident4) {
					li.addEvents({
						'mouseenter': function() { if (this.hasClass('selected')) { this.addClass('selected-hover'); } },
						'mouseleave': function() { this.removeClass('selected-hover'); }
					});
				}
			},this);
			
			// Highlight initial tab
			var currentTab = this.currentTab;
			if ( currentTab ) {
				return;
			}
			currentTab = this.currentTab = this.defaultTab; 
			var related = $(this.tabs).getElement('input[value='+currentTab+']');
			if (related) {
				related = related.getParent();
				this.tabSelect.run([related],this);
			}
		},

		load: function() {

			// Setup tab actions
			this.initTabs();
		},
		
		//
		//
		//
		tabSelect: function(li) {

			// Get the list of tabs
			var ul = li.getParent();
			
			// Clear the last selected tab
			var lastSelected = ul.getElement('.selected');
			if ( lastSelected ) { 
				lastSelected.removeClass('selected').removeClass('selected-first').removeClass('selected-hover')
										.addEvent('click',this.tabSelect.pass([lastSelected],this)); 
			}
			
			// Remove click from selected tab
			li.removeEvents('click');
			if (li.hasClass('first')) {
				li.addClass('selected-first');
			}
			
			// Highlight selected tab
			li.addClass('selected').addClass('selected-hover');
			
			// Show tab content
			var tabValue = li.getElement('input').get('value');
			this.updateContent(tabValue, lastSelected);
		},
		
		//
		//
		//
		updateContent: function(selectedTabName, lastSelected) {
		
			var tabsContainer = $(this.tabs);	
			if (Browser.Engine.trident4) { // added to force IE6 to redraw he content element
				tabsContainer.getElement('.content').setStyle('height','1%').setStyle('height','auto');
			}
			var tabsInner = tabsContainer.getElement('.tabsDisplay');
			
			// First hide current content
			if ( lastSelected ) {
				var lastTabValue = lastSelected.getElement('input').get('value');
				tabsInner.removeClass(lastTabValue);			
				this.cache[lastTabValue].dispose();
			}			
		
			// Now update the content height for the selected
			// tab
			tabsInner.addClass(selectedTabName);
			
			var tabsContent = tabsContainer.getElement('.content');
			
			// Now setup the iframe
			var iframe = this.getFromCache(selectedTabName);
			iframe.inject($(this.tabContent));
		}		
	});
})();