$(function(){

	$(".portfolio_image a").hidetips();
	$(".portfolio_image img").hidetips();



	
	/*****************************
		SMOOTH DIV
	*****************************/
	$("div#makeMeScrollable").smoothDivScroll({
		scrollingHotSpotLeft:	"div.scrollingHotSpotLeft",		// The identifier for the hotspot that triggers scrolling left.
		scrollingHotSpotRight:	"div.scrollingHotSpotRight",	// The identifier for the hotspot that triggers scrolling right.
		scrollWrapper:	"div.scrollWrapper",					// The identifier of the wrapper element that surrounds the scrollable area.
		scrollableArea:	"div.scrollableArea",					// The identifier of the actual element that is scrolled left or right.	
		scrollingSpeed: 12, 
		mouseDownSpeedBooster: 3, 
		// autoScroll: "onstart", 
		autoScrollDirection: "endlessloop", 
		autoScrollSpeed: 2, 
		visibleHotSpots: "always", 
		hotSpotsVisibleTime: 9, 
		}
	);	
	$("div#thumbnavscrollerable").not("#page_gallery_template div#thumbnavscrollerable").smoothDivScroll({
		scrollingHotSpotLeft:	"div.scrollingHotSpotLeft",		// The identifier for the hotspot that triggers scrolling left.
		scrollingHotSpotRight:	"div.scrollingHotSpotRight",	// The identifier for the hotspot that triggers scrolling right.
		scrollWrapper:	"div.media_thumbs",						// The identifier of the wrapper element that surrounds the scrollable area.
		scrollableArea:	"ul.thumbnav",							// The identifier of the actual element that is scrolled left or right.	
		scrollingSpeed: 12, 
		mouseDownSpeedBooster: 3, 
		// autoScroll: "onstart", 
		autoScrollDirection: "endlessloop", 
		autoScrollSpeed: 2, 
		visibleHotSpots: "always", 
		hotSpotsVisibleTime: 9, 
		}
	);	

	
	
	
	
	/*****************************
		FANCYBOX
	*****************************/	
	$("#thw #content #primary .portfolio_item a").not("#thw #content #primary .content_item a").attr('rel', 'gallery').fancybox({
		'autoScale'			: false,
		'autoDimensions'	: true,
		//'width'				: 740,
		//'height'			: 525,
		'overlayOpacity'	: .7,
		'titleShow'			: false,
		'padding'			: 5,
		'transitionIn'		: 'elastic',
		'transitionOut'		: 'elastic',
		'showCloseButton'	: true,		
		'overlayColor'  	:'#000',
		'scrolling'			: 'no',
		'type'				: 'ajax'
	});
		
	
	$("#thw #content #primary .content_item a").attr('rel', 'content_gallery').fancybox({
		'autoScale'			: false,
		'autoDimensions'	: false,
		'width'				: 540,
		'height'			: 425,
		'overlayOpacity'	: .7,
		'titleShow'			: false,
		'padding'			: 5,
		'transitionIn'		: 'elastic',
		'transitionOut'		: 'elastic',
		'showCloseButton'	: true,		
		'overlayColor'  	:'#000',
		'scrolling'			: 'no',
		'type'				: 'iframe'
	});
			
	
	
	/*****************************
		SCROLTO CUSTOM
	*****************************/
 
	//	SOME VARIABLES WE WILL NEED
	var $paneTarget = $('#children_thumbs');				// This is the Layout Plane, All thumbs must fit on here
	$("#children_thumbs").autoHeightcalcThumbSize();		// Run Our Custom Thumb Resize Function
	

	//	RECALUCLATE THUMBS DIMESION AND CLIPPING WINDOW WHEN WINDOW IS RESIZED
	
	
	$(window).resize(function() {
				$("#children_thumbs").autoHeightcalcThumbSize();				
				$paneTarget.scrollTo( 0 );				
	});
	
	//	RECALUCLATE THUMBS DIMESION AND CLIPPING WINDOW WHEN PORTFOLIO FILTER IS CLICKED
	$("#portfolio-filter a").click(function(){
				$("#children_thumbs").autoHeightcalcThumbSize();
				$paneTarget.scrollTo( 0 );
	});	

	


	
});






/* *************************************
	CALCULATE THUMBNAIL SIZE WITH AUTOHEIGHT ADJUSTMENT
	IMAGE IS  PORPORTIONALY SCALED
   ************************************* */
jQuery.fn.autoHeightcalcThumbSize = function () {
	var element = $('#children_thumbs')[0];
	if( element ) {

		// SOME CSS Settings we'll need
		$("#children_thumbs").css("overflow", "hidden");	
		$("#children_thumbs").css("clear", "both");	 

		// Some Variables we will need
		var viewportWidth = $("#content").width();
		var viewportHeight = $(window).height();	
		

		var offset = $("#children_thumbs").offset();
		var ctheight = viewportHeight - offset.top;											
		$("#children_thumbs").css( "height", ctheight+"px");										// Adjust height to fit everythin in view, otherwise css auto 	  
		$("#children_thumbs").css("width", viewportWidth+"px");										// Match the div to the viewport size, Acts like a clipping mask for our technique
		  
		//
		var numofthumbs = 4;																		// Numbers of Thumbs in Visible in the Row, inside the viewport
		var numofthumbsclipped = 2;																	// Additional number of thumbs outside the Vieport per row
		var thumbmargin = parseInt($("#children_thumbs LI").css("marginRight"));					// Grab the desired thumb margin from css
		$("#children_thumbs UL").css("paddingLeft", thumbmargin+"px");		

		// Calculcate amount of Rows We'll have
		var totalthumbs = $("#children_thumbs LI").size();											// Determine Total number of Thumbs in the List
		var rowCalc = Math.ceil(totalthumbs / ( numofthumbs + numofthumbsclipped ) );   			// Number of Rows needed

		var setthumbwidth = ( viewportWidth - (thumbmargin * numofthumbs) - thumbmargin ) / numofthumbs;	// Width based on number of visible items in viewport
		
		// var thumbnailHeight = ( (viewportHeight - 260 ) - ( rowCalc * thumbmargin) ) / rowCalc;			// Calculate to fit evenly in viewport
		var thumbnailHeight = setthumbwidth	* 240 / 360;													// Height will scale according to width, based on image ratio
		
		$("#children_thumbs LI").css("width", setthumbwidth+"px");				
		$("#children_thumbs LI").css("height", thumbnailHeight+"px");
		$("#children_thumbs LI IMG").css("width", setthumbwidth+"px");				
		$("#children_thumbs LI IMG").css("height", thumbnailHeight+"px");

		var adjustedSPANpos = thumbnailHeight + 5;
		$("#page_gallery_template ul#children_thumbslist li SPAN").css("top", "-"+adjustedSPANpos+"px");


		// Determine size of the div that is being masked by #children_thumbs
		var panewidth = ( setthumbwidth * numofthumbs + ( setthumbwidth * numofthumbsclipped) ) + ( (thumbmargin * numofthumbs ) + ( thumbmargin * numofthumbsclipped) );				
		$("#children_thumbs UL").css("width", panewidth+"px");

	}
}







$(function(){
    var animateTime = 10,
        offsetStep = 5,
        scrollWrapper = $('#thw #content');
    

    scrollWrapper
        .mousewheel(function (event, delta) {
            this.scrollLeft -= (delta * 100);
        })
        .css({
            'overflow-x' : 'scroll'
        });
    
		// When the Window Resizes We need to recalculate the Thumbns and Clipping window
		var vWidth = $(window).width();			
		var vHeight = $(window).height();
		
		var offset = $("#thw #content").offset();
		var adjustHeight = vHeight - offset.top;

		$("#thw #content").css( "height", adjustHeight+"px");										// Adjust height to fit everythin in view, otherwise css auto
 			
			
		$(window).resize(function() {
			vWidth = $(window).width();			
			vHeight = $(window).height();
					
			offset = $("#thw #content").offset();
			adjustHeight = vHeight - offset.top;						
					
			$("#thw #content").css( "height", adjustHeight+"px");										// Adjust height to fit everythin in view, otherwise css auto
 	  			
		});
		
		var thumbmargin = parseInt($("#thw .portfolio_item").css("marginRight"));					// Grab the desired thumb margin from css
	
		var totalwidth = 0; 
		$(".portfolio_item").each(function(i){
			totalwidth = totalwidth + $(this).width() + thumbmargin;

		});	

		$("#thw #primary").css( "width", totalwidth+"px");										// Adjust height to fit everythin in view, otherwise css auto
 		
		
		
		// ScrollTo Applied to Targets
		var $scrolltarget = $('#thw #content');
		$('.about_content').click(function(){
			$scrolltarget.stop().scrollTo( '.service_content', 1000, { offset:-150 } );
		});
		$('.service_content').click(function(){
			$scrolltarget.stop().scrollTo( '.about_content', 1000, { offset:-50 } );
		});
		$('h1 A').click(function(){
			$scrolltarget.stop().scrollTo( '.about_content', 1000, { offset:-50 } );
			return false; 
		});		
		
		
		
		$($scrolltarget ).serialScroll({
			items:'.portfolio_item',
			prev:'#slidenav .prev',
			next:'#slidenav .next',
			offset:0, //when scrolling to photo, stop 230 before reaching it (from the left)
			start:0, //as we are centering it, start at the 2nd
			duration:1200,
			force:true,
			stop:true,
			lock:false,
			cycle:false, //don't pull back once you reach the end
			easing:'easeOutQuart', //use this easing equation for a funny effect
			jump: false //click on the images to scroll to them
		});		
				
		
		
	var scrollAmount = 15;
	var hoverInterval;
	
    $("#hovernav .next").hover(
        function() {
            // call doStuff every 100 milliseconds
            hoverInterval = setInterval( nexthoverScroller, 5 );
        },
        function() {
            clearInterval(hoverInterval);
        }
    );
		
    $("#hovernav .prev").hover(
        function() {
            // call doStuff every 100 milliseconds
            hoverInterval = setInterval( prevhoverScroller, 5 );
        },
        function() {
            clearInterval(hoverInterval);
        }
    );
	
	
	function nexthoverScroller() {
		var $scrolltarget = $('#thw #content');			
		var currentScrollposition = $scrolltarget.scrollLeft();
		$scrolltarget.scrollLeft(currentScrollposition + scrollAmount);
			
	}
	
	function prevhoverScroller() {
		var $scrolltarget = $('#thw #content');			
		var currentScrollposition = $scrolltarget.scrollLeft();
		$scrolltarget.scrollLeft(currentScrollposition - scrollAmount);			
	}	
	
});





$.fn.hidetips = function(){
      // when building a plugin, "this" references the jquery object that the plugin was called on.
      // iterate through each element and return the elements.
      return this.each(function(){
            // save element for referencing later
            var $elem = $(this)
            // save alt and title
            var savealt = $elem.attr('alt');
            var savetitle = $elem.attr('title');
            // on mouseover, remove attributes
            // on mouseout, set attributes
            $elem.hover(function(){
                  $elem.removeAttr('title').removeAttr('alt');
            },function(){
                  $elem.attr({title:savetitle,alt:savealt});
            });
      });
};



function formatText(index, panel) {
	  return index + "";
}


// 	WORKS WITH JCYCLE, DETECTS CONTAINER ITEM HEIGHT AND ADJUST ENTIRE CONTAINER ACCORDINGLY
function adjustHeight(curr, next, opts, fwd) {
	//	var index = opts.currSlide;
	//	$('#prev')[index == 0 ? 'hide' : 'show']();
	//	$('#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
	
	// GET THE HEIGHT OF THE CURRENT SLIDE
	var $ht = $(this).height();
	var $wt = $(this).width();
	
	//	SET THE CONTAINER'S HEIGHT TO THAT OF THE CURRENT SLIDE
	$(this).parent().css("width", $wt+"px" );	
	$(this).parent().animate({ height: $ht}, 250);
}


//	FADETOGGLE
jQuery.fn.fadeToggle = function(speed, easing, callback) {
	   return this.animate({opacity: 'toggle'}, speed, easing, callback);
	};