/*

Javascript for rivr5
http://www.rivr5.com

*/

// Begin jQuery
	
$(document).ready(function() {
	
	/* =Local Scroll
    -------------------------------------------------------------------------- */
    	
    	// Main Navigation
    	
    	$("#mainNav").localScroll();
    	
    	// "To the Top" links
    	
    	$(".toTheTop").localScroll();
    	
    /* =Cycle
    -------------------------------------------------------------------------- */
    
    	$("#slideshow").cycle({
			fx: 'fade',
			speed:  1000,
			timeout:  3500
		});

    /* =Featured Work Thumbnail
    -------------------------------------------------------------------------- */
    
    	// Append shadow image to normal featured work item
    	
    	$("#featuredWork").append('<img class="shadow" src="http://www.rivr5.com/images/work-shadow-lg.jpg" width="290" height="43" alt="" />');
    
    	// Animate buttons, shrink and fade shadow
    	
    	$("#featuredWork").hover(function() {
    		var e = this;
    	    $(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
    	    	$(e).find("a").animate({ marginTop: "-10px" }, 250);
    	    });
    	    $(e).find("img.shadow").stop().animate({ width: "70%", height: "36px", marginLeft: "50px", opacity: 0.375 }, 250);
    	},function(){
    		var e = this;
    	    $(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
    	    	$(e).find("a").animate({ marginTop: "0px" }, 250);
    	    });
    	    $(e).find("img.shadow").stop().animate({ width: "100%", height: "43px", marginLeft: "0", opacity: 1 }, 250);
    	});
    	
    /* =Small Work Thumbnails
    -------------------------------------------------------------------------- */
    
    	// Append shadow image to normal sized work item
    	
    	$("#workThumbs span").not("#featuredWork").append('<img class="shadow" src="http://www.rivr5.com/images/work-shadow-sm.jpg" width="148" height="43" alt="" />');
    
    	// Animate buttons, shrink and fade shadow
    	
    	$("#workThumbs span").not("#featuredWork").hover(function() {
    		var e = this;
    	    $(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
    	    	$(e).find("a").animate({ marginTop: "-10px" }, 250);
    	    });
    	    $(e).find("img.shadow").stop().animate({ width: "70%", height: "33px", marginLeft: "23px", opacity: 0.375 }, 250);
    	},function(){
    		var e = this;
    	    $(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
    	    	$(e).find("a").animate({ marginTop: "0px" }, 250);
    	    });
    	    $(e).find("img.shadow").stop().animate({ width: "100%", height: "43px", marginLeft: "0", opacity: 1 }, 250);
    	});

    /* =Carousel
    -------------------------------------------------------------------------- */
    
    	// work thumbnails
    
    	var thumbsCallback = function(visible){
    		// If current group of thumbs is the last set, disable "next" button
    		if($(visible).hasClass("last")){
    			$("#nextWork").addClass("disabled");
    		}
    		// If current group of thumbs is first set, disable "prev" button
    		if($(visible).hasClass("first")){
    			$("#prevWork").addClass("disabled");
    		}
    	}
    
    	$("#workThumbs").jCarouselLite({
    		btnNext: "#nextWork",
    		btnPrev: "#prevWork",
    		speed: 900,
    		visible: 1,
    		circular: false,
    		easing: "easeInOutExpo",
            afterEnd: thumbsCallback
    	});
    	
    	// testimonials
    	
    	var testimonialsCallback = function(visible){
    		// If current group of thumbs is the last set, disable "next" button
    		if($(visible).hasClass("last")){
    			$("#nextTestimonials").addClass("disabled");
    		}
    		// If current group of thumbs is first set, disable "prev" button
    		if($(visible).hasClass("first")){
    			$("#prevTestimonials").addClass("disabled");
    		}
    	}
    
    	$("#testimonials").jCarouselLite({
    		btnNext: "#nextTestimonials",
    		btnPrev: "#prevTestimonials",
    		speed: 900,
    		visible: 1,
    		circular: false,
    		easing: "easeInOutExpo",
            afterEnd: testimonialsCallback
    	});
    	
    /* =FancyBox Work Thumbnails
    -------------------------------------------------------------------------- */

/*
	    $("#workThumbs a").fancybox({
	    	'zoomSpeedIn': 500,
	    	'zoomSpeedOut': 500,
	    	'overlayShow': true,
	    	'easingIn': 'easeOutBack',
	    	'easingOut': 'easeInBack'
	    });
*/
		$("#workThumbs a").click(function() {
			var image = $(this).attr("rel");
			var title = $(this).attr("title");
			$('#workDetails').hide();
			$('#workDetails').fadeIn('slow');
			$('#workDetails').css('background-image', 'url("' + image + '")'); 
			$('#workTitle').text(title);
	
			return false;
		});
	
    /* =Social links
    -------------------------------------------------------------------------- */
	
		$(".social li").hover(function(){
			$(this).find("a").stop().animate({ marginTop: "-5px" }, 200);
		},function(){
			$(this).find("a").stop().animate({ marginTop: "0" }, 200);
		});
		
	/* =Clear Form Fields
    -------------------------------------------------------------------------- */
		
		$("input, textarea").searchField();
						
		
	/* =Background Scroller
    -------------------------------------------------------------------------- */
    
	$( function() {
		$('.logobg').bgscroll({scrollSpeed:69 , direction:'v' });
	});
	
	$( function() {
		$('.logoPortfoliobg').bgscroll({scrollSpeed:69 , direction:'v' });
	});
	
	/* =Portfolio Page
    -------------------------------------------------------------------------- */
    	
	$("#content .cloud-zoom").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'none',
		'speedIn'		:	600,
		'speedOut'		:	200,
		'overlayShow'	:	true,
		'overlayColor'	:	'#000',
		'cyclic'		:	true,
		'easingIn'		:	'easeInOutExpo'
	});

	/*
	because the cloud zoom plugin draws a mousetrap
	div on top of the image, the fancybox click needs
	to be changed. What we do here is to trigger the click
	the fancybox expects, when we click the mousetrap div.
	We know the mousetrap div is inserted after
	the <a> we want to click:
	 */
	$("#content .mousetrap").live('click',function(){
		$(this).prev().trigger('click');
	});

	/*
	the content element;
	each list item / group with several images
	 */
	var $content	= $('#content'),
	$thumb_list = $content.find('.thumb > ul');
	/*
	we need to set the width of each ul (sum of the children width);
	we are also defining the click events on the right and left arrows
	of each item.
	 */
	$thumb_list.each(function(){
		var $this_list	= $(this),
		total_w		= 0,
		loaded		= 0,
		//preload all the images first
		$images		= $this_list.find('img'),
		total_images= $images.length;
		$images.each(function(){
			var $img	= $(this);
			$('<img/>').load(function(){
				++loaded;
				if (loaded == total_images){
					$this_list.data('current',0).children().each(function(){
						total_w	+= $(this).width();
					});
					$this_list.css('width', total_w + 'px');

					//next / prev events

					$this_list.parent()
					.siblings('.next')
					.bind('click',function(e){
						var current = $this_list.data('current');
						if(current == $this_list.children().length -1) return false;
						var	next	= ++current,
						ml		= -next * $this_list.children(':first').width();

						$this_list.data('current',next)
						.stop()
						.animate({
							'marginLeft'	: ml + 'px'
						},400);
						e.preventDefault();
					})
					.end()
					.siblings('.prev')
					.bind('click',function(e){
						var current = $this_list.data('current');
						if(current == 0) return false;
						var	prev	= --current,
						ml		= -prev * $this_list.children(':first').width();

						$this_list.data('current',prev)
						.stop()
						.animate({
							'marginLeft'	: ml + 'px'
						},400);
						e.preventDefault();
					});
				}
			}).attr('src',$img.attr('src'));
		});
	});
	
// End document ready
	
});