$(document).ready(function(){
						   
    // slider or cycle
	// see more about this jQuery plugin at http://malsup.com/jquery/cycle/
	//
	// for easing effects go to http://gsgd.co.uk/sandbox/jquery/easing/ 
    $('#header').each(function() {
      $('#slider').cycle({
        fx:      'scrollHorz',// see more options at http://malsup.com/jquery/cycle/options.html
        timeout:  8000, // time of the rotation
		speed:   'fast',
        prev:    '#prevbtn',
        next:    '#nextbtn',
        pager:   '.controls-left',
        pagerAnchorBuilder: 'pagerFactory'
		//easing: 'easeInOutBack'
		});
     });

   // projects page
   $('.pro-cycle-1').cycle({ 
       fx:     'wipe', 
       speed:   200, 
       timeout: 6000, 
       clip:   'zoom' ,
	   pager:  '.overlay-1', 
	   pagerAnchorBuilder: function(idx, slide) { 
		  return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50"/></a></li>'; 
	   } 
	 });

   // projects page
   $('.pro-cycle-2').cycle({ 
       fx:     'blindY', 
       speed:   800, 
       timeout: 6000, 
       clip:   'zoom' ,
	   pager:  '.overlay-2', 
	   pagerAnchorBuilder: function(idx, slide) { 
		  return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50"/></a></li>'; 
	   } 
	 });

   // projects page
   $('.pro-cycle-3').cycle({ 
       fx:     'fade', 
       speed:   800, 
       timeout: 6000, 
       clip:   'zoom' ,
	   pager:  '.overlay-3', 
	   pagerAnchorBuilder: function(idx, slide) { 
		  return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50"/></a></li>'; 
	   } 
	 });
   
	//creating a slide up box
	jQuery.fn.overl = function(classe) {
		$(this).hover(function(){
			$(this).find(classe).stop().animate({height:'70px',opacity: '0.9'},400);
		},function () {
			$(this).find(classe).stop().animate({height:'0',opacity: '0'}, 400);
		});
	}
	
		 $('.cycle-wrap').overl('.overlay-1, .overlay-2, .overlay-3');
		 
	// Fade stuff(products page)
	$(".fade").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 20% when the page loads

	$(".fade").hover(function(){
		$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
	},function(){
		$(this).fadeTo("slow", 0.6); // This should set the opacity back to 20% on mouseout
	});
	
	// search field drop down
	// down
	 $("#go").click(function(){
      $("#search-drop").animate({"top": "+=38px"}, 400);
     });
	 //close/up
	 $("#close").click(function(){
      $("#search-drop").animate({"top": "-=38px"}, 400);
    });

});