/**
 *  Custom DHTML Navigation controller, for KIA Cars (NZ).
 *  Created October 2010 by Ben Daley at Spitfire Creative
 *
 *  Requires JQuery 1.4.x
 */
var KiaNav2010 = function(rootElement)
{	
	this.lvl1;
	this.lvl2;
	this.lvl3;
	this.lvl4;
	this.cars;
	this.root = rootElement;
	this.activeElement;
	this.initialise();
};

KiaNav2010.prototype.initialise = function()
{
	$(this.root).css('visibility', 'visible');
	
	this.lvl1 = $('> ul > li:not(".home")', this.root);
	this.lvl2 = $('> ul > li ', this.lvl1);
	this.lvl3 = $('> ul > li', this.lvl2);
	this.lvl4 = $('> ul > li', this.lvl3);
	this.cars = $('> div.car', this.lvl2);
	
	this.addCssClasses();
	this.addEventHandlers();
	
	this.cars.css('left', 0);
	
	this.lvl2.parent().hide();
}

KiaNav2010.prototype.showMenu = function()
{
	// Add some markup so IE (6 and 7) doesn't pass mousefocus to flash
	$(this.root).append('<div id="IEMenuFix" style="width: 100%; height: 500px; background: transparent url(../images/x.gif) left top repeat; position: absolute; top: 0;"></div>')
}

KiaNav2010.prototype.hideMenu = function()
{
	$("#IEMenuFix", this.root).remove();
}

KiaNav2010.prototype.addCssClasses = function()
{
	this.lvl1.addClass('lvl1');
	this.lvl2.addClass('lvl2')
	this.lvl3.addClass('lvl3');
	this.lvl4.addClass('lvl4');
	
	$('li:first-child', this.root).addClass('first');
	$('li:last-child', this.root).addClass('last');
	
	
	
	/**
	 * Loop through the top level list items, adding the .item + i as a class attribute,
	 * Additional  .left and .right classes are added depending on if they are left or right of the .home element.
	 */
	var homeFound = false;
	for(var i = 0, el; i<this.lvl1.length; i++)
	{
		el = $(this.lvl1[i]);
		$(el).addClass('item' + i);
		if(el.hasClass('home')) { homeFound = true; }
		else { el.addClass(!homeFound ? 'left' : 'right') }
	}
	
	// add a clearfix.
	this.lvl1.parent().append('<li class="clear"></li>');
	
	// toggle .hover class on anchors and list items
	$('a, li', this.root).hover(function(e) { $(e.target).addClass('hover'); },
                            function(e) { $(e.target).removeClass('hover'); }
						   );
	
	
//	this.cars.css('opacity', 0);
//	this.lvl3.parent().css('opacity', 0);
//	this.lvl4.parent().css('opacity', 0);
	this.cars.css('display', 'none');
	this.lvl3.parent().css('display', 'none');
	this.lvl4.parent().css('display', 'none');
	
	
	// Add .parent or .no-children classes to list items which
	// are parent items or not respectively.
	var li = $('ul li', this.root);
	for(i = 0; i<li.length; i++)
	{
		el = $(li[i]);
		el.addClass(el.children().length > 1 ? 'parent' : 'no-children');
	}
}



KiaNav2010.prototype.addEventHandlers = function()
{
	this.lvl1.bind('mouseenter', {that: this}, this.showLvl2)
		.bind('mouseleave', {that: this}, this.hideLvl2);
		
	this.cars.parent()
		.bind('mouseenter', {that: this}, this.showCar)
		.bind('mouseleave', {that: this}, this.hideCar);
	
	// Use a custom event handler for the right hand side
	$('> ul > li.right > ul > li', this.root)
		.bind('mouseenter', {that: this}, this.showLvl3Right)
		
	this.lvl2.bind('mouseenter', {that: this}, this.showLvl3)
		.bind('mouseleave', {that: this}, this.hideLvl3);
	
	this.lvl3.bind('mouseenter', {that: this}, this.showLvl4)
		.bind('mouseleave', {that: this}, this.hideLvl4);
}

KiaNav2010.prototype.showLvl2 = function(e)
{
	e.data.that.showMenu();
	
	e.data.that.activeElement = e.currentTarget;
	
	$(e.currentTarget)
		.addClass('active')
		.children('ul')
		.css('display', 'block')
}
KiaNav2010.prototype.hideLvl2 = function(e)
{
	e.data.that.lvl2.parent().css('display', 'none')
	$(this).removeClass('active');
	
	e.data.that.hideMenu();
}

KiaNav2010.prototype.showCar = function(e)
{
	var o = $(e.currentTarget);
	o.addClass('active')
	o.children('.car')
		.css('display', 'block')
		.css('left', o.width())
//		.animate({left: o.width(), opacity: 1}, 'fast');
}
KiaNav2010.prototype.hideCar = function(e)
{
	$(e.currentTarget).removeClass('active').children('.car')
		.css('left', 0)
		.css('display', 'none');
}

KiaNav2010.prototype.showLvl3 = function(e)
{
	var o = $(e.currentTarget);
	o.addClass('active')
	o.children('ul')
		.css('display', 'block')
		.css('left', o.width())
		//.animate({left: o.width(), opacity: 1}, 'fast')
}

KiaNav2010.prototype.showLvl3Right = function(e)
{
	var o = $(e.currentTarget);
	o.addClass('active')
	o.children('ul')
		.css('display', 'block')
		.css('left', -o.width())
		//.animate({left: -o.width(), opacity: 1}, 'fast')
	e.stopImmediatePropagation()
}

KiaNav2010.prototype.hideLvl3 = function(e)
{
	$(e.currentTarget)
		.removeClass('active')
		.children('ul')
		.css('left', 0)
		.css('display', 'none');
		//.animate({left: 0, opacity: 0}, 100);
}

KiaNav2010.prototype.showLvl4 = function(e)
{
	var o = $(e.currentTarget);
	o.addClass('active')
	o.children('ul')
		.css('left', o.width())
		.css('display', 'block');
	//.animate({left: o.width(), opacity: 1}, 'fast')
}
KiaNav2010.prototype.hideLvl4 = function(e)
{
	$(e.currentTarget)
		.removeClass('active')
		.children('ul')
		.css('left', 0)
		.css('display', 'none');
		//.animate({left: 0, opacity: 0}, 100);
}