$(document).ready(function() {	

	var selectedFeatIdx = 0;

			var isTransitioning = false;
	        var ms = 0;
			

			var features = $('.selectedFeat, .feat');

			features.each(function() {

				$('.navigation').append('<li><a href="#">aproj</a></li>');

			});

			$('.navigation a:first').addClass('selected');

			

			function updateSelectedFeature() {

				isTransitioning = true;

				$('.navigation .selected').removeClass('selected');

				$('.navigation a:eq(' + selectedFeatIdx + ')').addClass('selected');

				

				$('.selectedFeat').fadeOut("slow", function() {

					$(this).removeClass('selectedFeat');

					$(this).css('display','');

					$(this).addClass('feat');

					$(features[selectedFeatIdx]).fadeIn("slow", function() {

						$(this).removeClass('feat');

						$(this).addClass('selectedFeat');

						isTransitioning = false;

					});

				});

			}

			

			$('.navigation a').click(function() {

				for(var i = 0; i < $('.navigation a').length ; i++) {

					if(this == $('.navigation a')[i]) {

						selectedFeatIdx = i;

						updateSelectedFeature();

						break;

					}

				}

			});

			

			$('#rightArrow').click(function() {

				if(selectedFeatIdx < features.length-1 && !isTransitioning) {

					selectedFeatIdx++;

					updateSelectedFeature();

				}else if (!isTransitioning)  {
					selectedFeatIdx = 0;
					updateSelectedFeature();
					}

			});
			

			

			$('#leftArrow').click(function() {

				if(selectedFeatIdx != 0 && !isTransitioning) {

					selectedFeatIdx--;

					updateSelectedFeature();

				} else if (!isTransitioning) {
					selectedFeatIdx = features.length-1;
					updateSelectedFeature();
					}

			});
			$('#rightArrow').mouseover(function() {
					ms = 1;
			});
			$('#leftArrow').mouseover(function() {
					ms = 1;
			});
			$('#rightArrow').mouseout(function() {
					ms = 0;	
			});
			$('#leftArrow').mouseout(function() {
					ms = 0;		
			});
			$('.navigation a').mouseover(function() {
					ms = 1;
			});
			$('.navigation a').mouseout(function() {
					ms = 0;
			});
			
			
			
			function tab1(){
				
				if(selectedFeatIdx < features.length-1 && !isTransitioning && ms == 0) {

					selectedFeatIdx++;

					updateSelectedFeature();

				} else if( ms == 0 ){
					selectedFeatIdx = 0;
					updateSelectedFeature();
					}
					
			  setTimeout(tab2,4000)
			}
			
			function tab2(){
				
			 if(selectedFeatIdx < features.length-1 && !isTransitioning  && ms == 0) {
					selectedFeatIdx++;
					updateSelectedFeature();
				} else if( ms == 0 ){
					selectedFeatIdx = 0;
					updateSelectedFeature();
					}
			 setTimeout(tab1,4000)  
			}
			setTimeout(tab1,4000)

		});