$(function() {
	
	// getQTipContent
	// Retrieve and build qtip content property = html being displayed inside the qtip
	var getQTipContent = function(node) {
	
		var buildProductList = function(products) {
			var html = '';
			if (products.length > 0) {
				html += '<ul class="motor_circuit_products">';
				products.each(function(i) {
					html += '<li>' + $(this).html() + '</li>';
				});
				html += '</ul>';
			}
			return html;
		};
		
		var cleanUpTabTitle = function(title) {
			var tmp = title.indexOf('Resistor');
			if (tmp > 0) title = title.slice(0, tmp-1);
			return title;
		}
	
		var html = '';
		var cat = $(node).attr('class');
		var products = $('#motor_circuit_products .' + cat);	
		
		if (products.length > 0) { 
			if ($(node).hasClass('gate_circuit')) {
				var groups = {}; 
				products.each(function(i) {
					var group = $('.product_group', this).text();
					if (!jQuery.isArray(groups[group]))	groups[group] = new Array();
					groups[group].push(this);
				});
				
				var tabs = '';
				var panes = '';
				var tabno = 0;
				jQuery.each(groups, function(title) {
					tab_id = cat + "_" + (tabno++);
					tabs += '<li><a href="#' + tab_id + '">' + cleanUpTabTitle (title) + '</a></li>';
					panes += '<div id="' + tab_id + '">' + buildProductList($(this)) + '</div>';
				});
				tabs = '<ul>' + tabs + '</ul>';
				html = '<div class="tabs">' + tabs + panes + '</div>';
			}
			else {
				html = buildProductList(products);
			}
		}
		return {
			text: html,
			title: $(node).attr('alt')
		};
	};
	
	// getQTipOptions
	// Contruct qTip parameters object.
	var getQTipOptions = function(node) {
		// defaults
		var options = {
			content: getQTipContent(node),
			position: {
				corner: {
					target: 'rightTop',
					tooltip: 'leftMiddle'
				},
				adjust: { x: 0, y: 0 }
			},
			show: {
				effect: {
					type: 'fade',
					length: 150
				}
			},
			hide: {
				delay: 120,
				fixed: true,
				effect: {
					type: 'fade',
					length: 150
				}
			},
			style: {
				tip: true,
				border: {
					radius: 3,
					width: 5,
					color: '#c0c0c0'
				},
				width: 500,
				name: 'light'
			}
		};
		if ($.browser.msie && $.browser.version.substr(0,1)<7) {
			options.style.tip = false;
		}
							
		// is this a circle shape? (if so we have to adjust the position...)
		var isCircle = $(node).attr('shape').toLowerCase() == 'circle' ? true : false;
		var circleDiameter = 0;
		
		// fix offset for circle areas 
		if (isCircle) {
			var coords = $(node).attr('coords').split(',');
			var circleDiameter = coords[2];			
			options.position.adjust = { x: -circleDiameter, y: -circleDiameter };
		}
		
		// add node specific adjustments
		var cat = $(node).attr('class');
		switch (cat) {
			/* tip above area */
			case 'gate_circuit':
				options.position.corner = {
					target: 'bottomMiddle',
					tooltip: 'topMiddle'
				};
				break;
			
			/* tip on left hand side */
			case 'braking':
			case 'current_sense':
				options.position.corner = {
					target: 'leftMiddle',
					tooltip: 'rightMiddle'
				};
				
				if (isCircle) {
					options.position.adjust = { x: -(2 * circleDiameter), y: -(1.5 * circleDiameter) };
				}
				break;
			
			/* tip above area */
			case 'snubber':
			case 'balancing':
			case 'precharge':
				options.position.corner = {
					target: 'topMiddle',
					tooltip: 'bottomMiddle'
				};
				if (isCircle) {
					options.position.adjust = { x: -(1.5 * circleDiameter), y: -(2 * circleDiameter) };
				}
				break;
			/* tip on the right hand side, shifted upwards */
			case 'crowbar':
				options.position.corner = {
					target: 'rightMiddle',
					tooltip: 'leftBottom'
				};
				if (isCircle) {
					options.position.adjust = { x: -circleDiameter, y: -1.5 * circleDiameter };
				}
				break;
		}
		
		return options;
	};
	
	// INITIALISATIONS
	// init image map hover highlights
	$('img[usemap]').maphilight({
		fill: true,
		fillColor: '4092AD',
		fillOpacity: 0.2,
		stroke: false,
		fade: true
	});	
	
	// init qtips
	$('.motor_circuit_map area:not(.alt)').each(function(i,node) {
		$(node).qtip(getQTipOptions(node));
		
		$(node).qtip("api").onShow = function(event) {
			if (this.status.tabsInitialised != "true") {
				$(".tabs", this.elements.content).tabs();
				this.status.tabsInitialised = "true";
			}
		}
	});
	
	// init alternative qtip trigges
	$('.motor_circuit_map area.alt').each(function(i, node) {
		var classname = $(node).attr('class');
		var tip_name = $(node).attr('alt');
		
		jQuery(node).hover(
			function() {
				$('.motor_circuit_map area.' + tip_name).trigger('mouseover');
			},
			function() {
				$('.motor_circuit_map area.' + tip_name).trigger('mouseout');
			}
		);
	});

	// hide the data used to build qtips
	
	$('a.jumpnav').toggle(
		function() {
			$(this).html("Show Diagram");
			$('#motor_circuit_diagram').hide();
			$('#motor_circuit_data').show();
		},
		function() {
			$(this).html("Show Products");
			$('#motor_circuit_diagram').show();
			$('#motor_circuit_data').hide();
		}
	).html('Show Products');
	$('#motor_circuit_data').hide();
	
	$('div.loading_indicator').remove();
});