$(document).ready(function(){ 
	
	// set intial height of highlight box headings on homepage
	$("span.description").animate({height: "1.6em"}, 100);
  
    $(".search-panel").click(function(){
        $("#search-panel").slideToggle("slow");
        $('li#search').toggleClass("selected");
 		
		// Return false to stop the browser from loading the link.
		return false;
    });
        
    $('a.gotop').click(function(){
        $('html, body').animate({
            scrollTop:0
        }, 'slow');
        return false;
    });
    
    // hide search box
    $('div#search-panel').css('display', 'none');    
    
    // last item in navigation 
    $("#nav-sections li:last-child").addClass("last");
    
	// Set full width and height for homepage carousel background images (and on resize)
	$('div.image-hp').css('background-size', 'cover');
	$(window).resize(function(){
		$('div.image-hp').css('background-size', 'cover');
	});
    
    
	/*
	 * HOMEPAGE (HIGHLIGHT BOXES)
	 *----------------------------------------------------------------
	 */
	
	if(document.getElementById("image-rollovers")) {
	
		$('a.carousel-item-link').hover(
		function(){
			// Hover on
			$(this).find("span.description").animate({height: "160px"}, 300);
		},
		function(){
			// Hover out
			$(this).find("span.description").stop().animate({height: "1.6em"}, 100);	
		});
		
	}
	
	

    // function to populate a form-field with a default text as description
	function populateElement(selector, defvalue) {
	    $(selector).each(function() {
	        if($.trim(this.value) == "") {
	            this.value = defvalue;
	        }
	    });
	
	    $(selector).focus(function() {
	        if(this.value == defvalue) {
	            this.value = "";
	        }
	    });
	
	    $(selector).blur(function() {
	        if($.trim(this.value) == "") {
	            this.value = defvalue;
	        }
	    });
	 }
	
	// tell which element to populate with what text
	populateElement('#search-term', 'Search');
	
	
    /*
     * GALLERY
     *---------------------------------------------
     */
    if(document.getElementById("gallery")) {
    
        $('div.scroll').css("height", 295);
        $('div.scroll').css("overflow", "hidden");
        $('div.scroll').css("position", "relative");
	    
        $('div.scrollContainer div.panel').css("height", 295);
	
	
        var $panels = $('#slider .scrollContainer > div');
        var $container = $('#slider .scrollContainer');
		
        // if false, we'll float all the panels left and fix the width 
        // of the container
        var horizontal = true;
		
        // float the panels left if we're going horizontal
        if (horizontal) {
            $panels.css({
                'float' : 'left',
                'position' : 'relative' // IE fix to ensure overflow is hidden
            });
		  
            // calculate a new width for the container (so it holds all panels)
            $container.css('width', $panels[0].offsetWidth * $panels.length);
        }
		
        // collect the scroll object, at the same time apply the hidden overflow
        // to remove the default scrollbars that will appear
        var $scroll = $('#slider .scroll').css('overflow', 'hidden');
		
        // apply our left + right buttons
        $scroll
        .before('<img class="scrollButtons left" src="/assets/site/img/icons/scroll_left.gif" />')
        .after('<img class="scrollButtons right" src="/assets/site/img/icons/scroll_right.gif" />');
		
        // handle nav selection
        function selectNav() {
            $(this)
            .parents('ul:first')
            .find('a')
            .removeClass('selected')
            .end()
            .end()
            .addClass('selected');
        }
		
        $('#slider .navigation').find('a').click(selectNav);
		
        // go find the navigation link that has this target and select the nav
        function trigger(data) {
            var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
            selectNav.call(el);
        }
		
        if (window.location.hash) {
            trigger({
                id : window.location.hash.substr(1)
            });
        } else {
            $('ul.navigation a:first').click();
        }
		
        // offset is used to move to *exactly* the right place, since I'm using
        // padding on my example, I need to subtract the amount of padding to
        // the offset.  Try removing this to get a good idea of the effect
        var offset = parseInt((horizontal ? 
            $container.css('paddingTop') : 
            $container.css('paddingLeft')) 
        || 0) * -1;
		
		
        var scrollOptions = {
            target: $scroll, // the element that has the overflow
		  
            // can be a selector which will be relative to the target
            items: $panels,
		  
            navigation: '.navigation a',
		  
            // selectors are NOT relative to document, i.e. make sure they're unique
            prev: 'img.left', 
            next: 'img.right',
		  
            // allow the scroll effect to run both directions
            axis: 'xy',
		  
            onAfter: trigger, // our final callback
		  
            offset: offset,
		  
            // duration of the sliding effect
            duration: 500,
		  
            // easing - can be used with the easing plugin: 
            // http://gsgd.co.uk/sandbox/jquery/easing/
            easing: 'swing'
        };
		
        // apply serialScroll to the slider - we chose this plugin because it 
        // supports// the indexed next and previous scroll along with hooking 
        // in to our navigation.
        $('#slider').serialScroll(scrollOptions);
		
        // now apply localScroll to hook any other arbitrary links to trigger 
        // the effect
        // $.localScroll(scrollOptions);
				
		
		
        // Fade out on hover
        $('div#gallery div.panel img').hover(function(){
            // Hovered
            $(this).fadeTo("fast", 0.6);
        }, function(){
            // Out
            $(this).fadeTo("fast", 1);
        });

        // ColorBox Lightbox
        $('div#gallery div.panel a').colorbox();
    
        var $count = $('div.panel').size();
        if($count <= 1) {
            $('.scrollButtons').hide();
        }
    
               
    }
    
    
});