$(document).ready(function(){
//grab the width and calculate left value
	var item_form_width = $('.main-form li').outerWidth();
	var left_form_value = item_form_width * (-1); 
	
    //move the last item before first item, just in case user click prev button
//	$('.main-form li:first').before($('.main-form li:last'));

	//set the default item to the correct position
	//$('.main-form ul').css({'left' : left_form_value});

	//$('div.tabs div.tab').each(function(i){
	//	$(this).click(function(){
	//		ScrollToStep(i+1);
	//  });
	//});

	$('div.tabs div.tab').click(function(){
			if ($(this).hasClass('on')) return;

			var offset = 0;
			if ($(this).attr('id') == 'one') {
				offset = 0;
			}
			if ($(this).attr('id') == 'two') {
				offset = -1 * item_form_width;
			}
			if ($(this).attr('id') == 'three') {
				offset = -2 * item_form_width;				
			}
			if ($(this).attr('id') == 'four') {
				offset = -3 * item_form_width;				
			}
			
			$('.main-form ul').animate({'left' : offset}, 400);
			
			$('div.tabs div.tab').removeClass('on');
			
			$(this).addClass('on');
			
										 });

    //if user clicked on prev button
	$('.navs .form_prev').click(function() {
		if ( $('#NewCarNavBar').data('animating') == true ) {
			return;	
		}
		$('#NewCarNavBar').data('animating', true);
		
		//get the right position
		var left_form_indent = parseInt($('.main-form ul').css('left')) + item_form_width;

		var selected = $('.main-form li:first').attr('class');

		$('div.tabs div').removeClass('on');
		$('div.tabs div.'+selected).addClass('on');

		//slide the item
		$('.main-form ul').animate({'left' : left_form_indent}, 200,function(){    
            //move the last item and put it as first item
			$('.main-form li:first').before($('.main-form li:last'));           



			//set the default item to correct position
			$('.main-form ul').css({'left' : left_form_value});
			$('#NewCarNavBar').data('animating', false);
		});

		//cancel the link behavior
		return false;

	});

    //if user clicked on next button
	$('.navs .form_next').click(function() {
		if ( $('#NewCarNavBar').data('animating') == true ) {
			return;	
		}
		$('#NewCarNavBar').data('animating', true);
		
		//get the right position
		var left_form_indent = parseInt($('.main-form ul').css('left')) - item_form_width;
		

		var selected = $('.main-form li:eq(2)').attr('class');

		$('div.tabs div').removeClass('on');
		$('div.tabs div.'+selected).addClass('on');

	
		//slide the item
		$('.main-form ul').animate({'left' : left_form_indent}, 200, function () {

            //move the first item and put it as last item
			$('.main-form li:last').after($('.main-form li:first'));                 	

			//set the default item to correct position
			$('.main-form ul').css({'left' : left_form_value});
			$('#NewCarNavBar').data('animating', false);
		});
		
		//cancel the link behavior
		return false;

	});
	
	
});