$(document).ready(function(){
	if(!document.getElementById('models')) return;

	listItems = $('#models li');
	$('#models').css('width', (listItems.length * listItems[0].offsetWidth) + 'px');
	$('#models').parent().css('overflow', 'hidden');
	if(listItems.length < 4) return;
	
	// Create Slider Holder
	$('.column').append('<div id="slider_background"></div>');
	if(listItems.length > 12) $('#slider_background').attr('class', 'wide');
	
	// Create Markers
	spaceSize = Math.floor($('#slider_background').width() / (listItems.length-1));
	for(i=0; i<listItems.length; i++){
		html = '<div class="marker">'+$(listItems[i]).find('h2').text()+'</div>';
		$('#slider_background').append(html);
		w = $('#slider_background div.marker:last')[0].offsetWidth;
		$('#slider_background div.marker:last').css('left', (i * spaceSize)+12-(w/2)+'px');
	}
	
	// Create Text
	$('#slider_background').append('<div id="help"><span>Equipment Selector</span> Drag the cone or select a model number to change the equipment information displayed.</div>');

	// Create Slider
	$('#slider_background').append('<div id="slider"></div>');

	$(function() {
		$("#slider").slider({
			value:0,
			min: 0,
			max: listItems.length-1,
			step: 1,
			slide: function(event, ui) {
				$('#models').css('left', (ui.value * listItems[0].offsetWidth * -1) + 'px');
				/*itemList.style.left = (ui.value * listItems[0].offsetWidth * -1) + 'px';*/
			}
		});
	});
});