(function($){
	$.fn.extend({
	    customStyle : function(options) {
	        if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
		        return this.each(function() {
		            var currentSelected = $(this).find(':selected');
		            $(this).after('<span class="customStyleSelectBox"><span class="customStyleSelectBoxInner">'+currentSelected.text()+'</span></span>').css({position:'absolute', opacity:0,fontSize:$(this).next().css('font-size')});
		            var selectBoxSpan = $(this).next();
	            	var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css('padding-left')) -parseInt(selectBoxSpan.css('padding-right'));
		            var selectBoxSpanInner = selectBoxSpan.find(':first-child');
		            selectBoxSpan.css({display:'inline-block'});
		            selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'});
		            var selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css('padding-top')) + parseInt(selectBoxSpan.css('padding-bottom'));
		            $(this).height(selectBoxHeight).change(function(){
		                selectBoxSpanInner.text($(this).val()).parent().addClass('changed');
	                });
	            });
	        }
	    }
    });
})(jQuery);

$(function(){
    $('select.styled').customStyle();
});

// customStyle not detecting project_name change event when industry changes.  work-around below:
$('#industry').change(function(){
   setTimeout(function(){$('#project_name').trigger('change');},10);
});


//start carousel function
//change fadeInOutSpeed and imageTransitionSpeed to change the speeds of the carousel effects
function carousel() {
	//autoscroll the carousel
	var fadeOutSpeed = 200;
	var fadeInSpeed = 400;
	var imageTransitionSpeed = 5000;
	carouselInterval = setInterval(function() {
    	if(jQuery('.slider li.img-visible').next().length === 0) {
			//if the item is the last in the serie
			jQuery('.slider-control li.active, .project-controller .small-thumbs li.active').removeClass('active');
   			jQuery('.slider-control li:first, .project-controller .small-thumbs li:first').addClass('active');	
	    	jQuery('.slider li.img-visible').removeClass('img-visible').fadeOut(fadeOutSpeed, function(){
				jQuery('.slider li:first').addClass('img-visible').fadeIn(fadeInSpeed);	
    		});
    	}
    	else {
			//all other non last item in the serie
        	jQuery('.slider li.img-visible').fadeOut(fadeOutSpeed, function(){
				jQuery('.slider-control li.active, .project-controller .small-thumbs li.active').removeClass('active').next().addClass('active');
				jQuery(this).next().fadeIn(fadeInSpeed).addClass('img-visible');
    		}).removeClass('img-visible');
    	}
	}, imageTransitionSpeed);
	
	//set the controls onclick functionality for the home version
	jQuery('.slider-control li, .project-controller .small-thumbs li').click(function(){
		var current_item = jQuery(this).index();
		jQuery('.slider-control li, .project-controller .small-thumbs li').removeClass('active');
		jQuery(this).addClass('active');
		jQuery('.slider li.img-visible').removeClass('img-visible').fadeOut(fadeOutSpeed, function(){
			jQuery('.slider li').eq(current_item).addClass('img-visible').fadeIn(fadeInSpeed);
		});
		return false;
	});
	
	//set the previous/nbext button functionality on the project detail version
	jQuery('#slideshow .previous').click(function(){
		var current_thumbnail_prev = jQuery('#slideshow .slider li.img-visible').index();
		if(jQuery('#slideshow .slider li.img-visible').prev().length === 0) {
			//if the current item is the first
			jQuery('#slideshow .slider li.img-visible').removeClass('img-visible').fadeOut(fadeOutSpeed, function(){
				jQuery('.project-controller .small-thumbs li.active').removeClass('active');
				jQuery('.project-controller .small-thumbs li:last').addClass('active');
				jQuery('#slideshow .slider li:last').addClass('img-visible').fadeIn(fadeInSpeed);
			});		
		}
		else {
			//if the current item is anything but the first
			jQuery('#slideshow .slider li.img-visible').removeClass('img-visible').fadeOut(fadeOutSpeed, function(){
				jQuery('.project-controller .small-thumbs li.active').removeClass('active');
				jQuery('.project-controller .small-thumbs li').eq(current_thumbnail_prev-1).addClass('active');
				jQuery(this).prev().addClass('img-visible').fadeIn(fadeInSpeed);
			});			
		}
		return false;
	});
	jQuery('#slideshow .next').click(function(){
		var current_thumbnail_next = jQuery('#slideshow .slider li.img-visible').index();
		if(jQuery('#slideshow .slider li.img-visible').next().length === 0) {
			//if the current item is the last
			jQuery('#slideshow .slider li.img-visible').removeClass('img-visible').fadeOut(fadeOutSpeed, function(){
				jQuery('.project-controller .small-thumbs li.active').removeClass('active');
				jQuery('.project-controller .small-thumbs li:first').addClass('active');
				jQuery('#slideshow .slider li:first').addClass('img-visible').fadeIn(fadeInSpeed);
			});		
		}
		else {
			//if the current item is anything but the last
			jQuery('#slideshow .slider li.img-visible').removeClass('img-visible').fadeOut(fadeOutSpeed, function(){
				jQuery('.project-controller .small-thumbs li.active').removeClass('active');
				jQuery('.project-controller .small-thumbs li').eq(current_thumbnail_next+1).addClass('active');
				jQuery(this).next().addClass('img-visible').fadeIn(fadeInSpeed);
			});			
		}
		return false;
	});	
}

//clear or reset the setInterval function to stop the home carousel from going crazy on controls hover
jQuery('.slider-control, .project-controller .small-thumbs, #slideshow .next, #slideshow .previous').mouseover(function(){
	clearInterval(carouselInterval);
});
jQuery('.slider-control, .project-controller .small-thumbs').mouseleave(function(){
	carousel();
});

//launch the carousel
carousel();

//end carousel function

//scroll to section
var scrollSpeed = 1500;
jQuery('.nav-internal a').click(function(){
	var jumpToId = jQuery(this).attr('href');
	jQuery('html,body').animate({scrollTop: jQuery(jumpToId).offset().top},scrollSpeed);
	return false
});
jQuery('.back-top').click(function(){
	jQuery('html,body').animate({scrollTop: 0},scrollSpeed);
});
