/// <reference path="listpage.js" />
var data = {
	css: {
		tabActive: 'tabActive',
		tabInactive: 'tabInactive',
		tla: 'tabCornerTopLeftActive',
		tli: 'tabCornerTopLeftInactive',
		tra: 'tabCornerTopRightActive',
		tri: 'tabCornerTopRightInactive',
		bla: 'tabCornerBottomLeftActive',
		bli: 'tabCornerBottomLeftInactive',
		bra: 'tabCornerBottomRightActive',
		bri: 'tabCornerBottomRightInactive'
	}
};

var page = {
	init: function(e) {
		/// <summary>Initializes the web page application.</summary>
		/// <param name="e" type="DOMEvent" mayBeNull="false" optional="true">The event object in 
		/// DOM 2 compliant user agents; otherwise, null.</param>

		// Bind event handler methods
		$('#tabContainerTop a').bind('click', page.handleClick).each(function(i) { $(this).attr('val', i); });
		$('#tabContainerBottom a').bind('click', page.handleClick).each(function(i) { $(this).attr('val', i); });

		// ----- Legacy code --------------------
		// Read the cookie value holding the last preserved view state
		view = getCookieValue('listpageview', 'list');
		// --------------------------------------

		// Update the tab ui and trigger the car list ui update by computed event creation
		// Finding the first tab anchor's id as a template is necessary because of different
		// id generation in AutoScout and Allianz AutoWelt code.
		var nodes = $('#tabContainerTop a');
		var id = nodes[0].id.replace('_listSwitch', '_' + view + 'Switch');
		$('#'+id).trigger('click');
	},

	handleClick: function(e) {
		/// <summary>Event handler method for tab activation links, updating the tab view as well 
		/// as the related car view.</summary>
		/// <param name="e" type="DOMEvent" mayBeNull="false" optional="true">The event object in 
		/// DOM 2 compliant user agents; otherwise, null.</param>
		var el = e.currentTarget;

		// Stop event bubbling and default action
		e.stopPropagation();

		// Only act on anchor element activation
		if (el.nodeName.toLowerCase() !== 'a') return;

		// If clicked tab is already active, no further processing is necessary
		if ($(el.parentNode.parentNode).hasClass(data.css.tabActive)) return;

		// Get the tab container nodes
		var topContainerNode = $('#tabContainerTop')[0];
		var bottomContainerNode = $('#tabContainerBottom')[0];

		// Find the index of the tab node
		var tabNodeIndex = $(el).attr('val');

		// Get the mirror tab node
		var tabNode, mirrorNode;
		if (el.parentNode.parentNode.parentNode == topContainerNode) {
			tabNode = $(topContainerNode).find('>div')[tabNodeIndex];
			mirrorNode = $(bottomContainerNode).find('>div')[tabNodeIndex];
		}
		else {
			tabNode = $(bottomContainerNode).find('>div')[tabNodeIndex];
			mirrorNode = $(topContainerNode).find('>div')[tabNodeIndex];
		}

		// Find and deactivate currently active tab
		$(topContainerNode).find('.'+data.css.tabActive).each(function() {
			page.switchTabActivation(this);
		});

		// Find and deactivate currently active tab's mirror tab
		$(bottomContainerNode).find('.'+data.css.tabActive).each(function() {
			page.switchTabActivation(this);
		});

		// Activate clicked tab (as well as its mirror tab)
		page.switchTabActivation(tabNode);
		page.switchTabActivation(mirrorNode);

		// Determine which car output ui to switch to
		var id = el.getAttribute('id');
		switchView(id.substring(id.lastIndexOf('_') + 1, id.lastIndexOf('Switch')));  // Calling legacy code
	},

	switchTabActivation: function(tabNode) {
		/// <summary>Swaps the tab node's appearance form active to inactive and vice versa.</summary>
		/// <param name="tabNode" domElement="true" optional="false">The DOM element node representing a tab.</param>
		var nodes = $(tabNode).find('>div');
    if ($(tabNode.parentNode).attr('id').indexOf('Top') > -1) {
      $(nodes[0]).toggleClass(data.css.tla).toggleClass(data.css.tli);
      $(tabNode).toggleClass(data.css.tabInactive).toggleClass(data.css.tabActive);
      $(nodes[2]).toggleClass(data.css.tra).toggleClass(data.css.tri);
		}
		else {
      $(nodes[0]).toggleClass(data.css.bla).toggleClass(data.css.bli);
      $(tabNode).toggleClass(data.css.tabInactive).toggleClass(data.css.tabActive);
      $(nodes[2]).toggleClass(data.css.bra).toggleClass(data.css.bri);
		}
	}
};