/**
 * @fileOverview Enhancements for <ul>- and <ol>-Elements
 * @version 0.1
 * @author Michael Schieben <michael@twoantennas.com> 
 */

/*jslint nomen: true, debug: true, evil: false, onevar: false, browser: true, plusplus: false, undef: true */
/*global window: true, KfW: true, jQuery: true */

(function ($) {
	
	function Lists() {
		
		// nav-steps
		$('ol.nav-steps').enhancedList({key: 'nav-steps'});
		$('ol.nav-steps').find('li.selected').prev().addClass('before-selected');
		$('ol.nav-steps').find('li').not('.selected').addClass('normal');
		
		// nav-position
		$('ol.nav-position').enhancedList({key: 'nav-position'});
		
		// nav-anchor
		$('ol.nav-anchor').enhancedList({key: 'nav-anchor'});
	}
	
	/**
	 * Enhancement for Lists
	 *
	 * transform <ol>- and <ul> elements by wrapping the content
	 * of there list items into <span> elements. All items required the
	 * following structure:
	 * <ol>
	 * - <li>
	 * -- <a>
	 * 
	 * The function expects that every list items contains a link.
	 * This link is not touched by the transformation.
	 *
	 * The new DOM is defined as a KfW.Template: @see template.templates.js
	 * You can specify a __KEY__ to choose a template that enhanches the list
	 * element
	 *
	 * The transformation uses 3 snippets
	 * 1. __KEY__-link DOM for link item, Data: $number, $title
	 * 2. __KEY__-selected-link DOM for link item of selected element
	 *  optional, Data: $number, $title
	 * 3. __KEY__-item DOM for List-Item itself, Data: $classnames, $link
	 *
	 * Example of the DOM Mainpulation for Step Navigation
	 * Before:
	 *	<ol class="nav-steps">
	 *		<li class="selected"><a href="#"><strong>Item 1</strong></a></li>
	 *		<li><a href="#">Item 2</a></li>
	 *		<li><a href="#">Item 3</a></li>
	 *	</ol>
	 * 
	 * After:
	 *	<ol class="nav-steps">
	 *		<li class="first selected"><a href="#"><strong><span class="nav-steps-number">1</span><span class="nav-steps-tooltip">Item 1</span></strong></a></li>
	 *		<li><a href="#"><span class="nav-steps-number">2</span><span class="nav-steps-tooltip">2. Item 2</span></a></li>
	 *		<li class="last"><a href="#"><span class="nav-steps-number">3</span><span class="nav-steps-tooltip">3. Item 3</span></a></li>
	 *	</ol>
	 *
	 */
	$.fn.enhancedList = function (options) {
		var defaultSettings = {
			key: 'nav-steps'
		};
		options = $.extend(defaultSettings, options);
		
		return this.each(function () {
			var list = $(this);
			var items = list.find('li').clone();
			var h = '';
			items.each(function (i) {
				
				var item = $(this);
				var link = item.find('a');
				
				// data
				var classNames = [];
				var number = i + 1;
				var title = link.text();
				var title_nbsp = title.replace(/ /g, '\u00a0');
				var selected = item.hasClass('selected');
				
				if (i === 0) {
					classNames.push('first');
				}
				if (i === items.size() - 1) {
					classNames.push('last');
				}
				if (selected) {
					classNames.push('selected');
				}
				
				// output
				var a = '';
				if (selected && KfW.Template.exists(options.key + '-selected-link')) {
					a = KfW.Template.render(options.key + '-selected-link', {'number': number, 'title': title, 'title_nbsp': title_nbsp});
				} else {
					a = KfW.Template.render(options.key + '-link', {'number': number, 'title': title, 'title_nbsp': title_nbsp});
				}
				link.html(a);
				
				h += KfW.Template.render(options.key + '-item', {'class': classNames.join(' '), 'link': item.html()});
			});
			list.html(h);

			// exepction for ie 6 & 7. hard set width on selected item to overcome line break.
			if(list.hasClass('nav-steps')) {
				if($.browser.msie) {
					if(parseInt($.browser.version) == 6 || parseInt($.browser.version) == 7) {
						var selected = list.find('li.selected');
						var selectedWidth = selected.find('.nav-steps-number').outerWidth() + selected.find('.nav-steps-tooltip').outerWidth();
						selected.find(' > a').width(selectedWidth);
					}
				}
			}
		});
	};
	
	KfW.addInitializer(Lists);
	
}(jQuery));