function portfolioAjaxLoader(page){
    $("div#portfolio_container").load("include/DCK_portfolio_gallery.inc.php?cat=" + page);
    scrollCount = 4;
    }

$('document').ready(function(){

scrollCount = 4;//define number of scrollable items
var visibleItems = 4;

var gallery_frame,gallery_strip,gallery_entries,elementWidth,gallery_strip_width, prev, next, scrollPrevMax,scrollMax,scrollMin;
      $('a.portfolio_subnav').livequery('click',function(){

        portfolioAjaxLoader(this.title);
        return false;
        });

    //modify page DOM if Javascript is switched on
    $('div#gallery_frame').livequery(function(){
        gallery_frame = $('div#gallery_frame');

        //set gallery_strip width to the number of entries multiplied by width of gallery entry element
        gallery_strip = $('div#gallery_strip');
        gallery_entries = $('div#gallery_strip div.project');

        elementWidth = 235;
        gallery_strip_width = elementWidth*gallery_entries.length+'px';
        gallery_strip.css({'width':gallery_strip_width});

        //add portfolio navigation buttons
        if(gallery_entries.length > visibleItems){
            $('div#portfolio_nav').before('<p id="portfolio_nav_prev"></p><p id="portfolio_nav_next"></p>');
            }

        //assign event triggers to inserted portfolio nav elements
        prev = $("p#portfolio_nav_prev");
        next = $("p#portfolio_nav_next");
        next.click(nextAnim);
        prev.click(prevAnim);

        });


	//animate movement to next gallery position
        function nextAnim(){
            //remove handler
            next.unbind();

	    //calculate next position by adding the current scroll position and the element width
            var targetPos = gallery_frame.scrollLeft() + elementWidth;
            gallery_frame.animate({scrollLeft:targetPos}, 300, 'easeInOutQuart',function(){next.bind('click',nextAnim)});
	    
	    scrollCount++;

	    //hide/show next/prev button depending on where we are in the slider count
	    if(scrollCount >= gallery_entries.length){
		next.fadeOut("fast");
	    }
	    if(scrollCount > visibleItems){
		prev.fadeIn("fast");
	    }
	    
            return false;
            }


        function prevAnim(){
            //remove handler
            prev.unbind();

	    //calculate next position by subtracting the element width from the current scroll position
            var targetPos = gallery_frame.scrollLeft() - elementWidth;
            gallery_frame.animate({scrollLeft:targetPos}, 300, 'easeInOutQuart',function(){prev.bind('click',prevAnim)});
	    
	    scrollCount--;

	    //hide/show next/prev button depending on where we are in the slider count
	    //if the counter is exactly equal to the number of showable items - show the next button
            if(scrollCount <= gallery_entries.length -1){
		next.fadeIn("fast");
	    }

	    if(scrollCount == visibleItems){
		prev.fadeOut("fast");
	    }
	    
            return false;
            }



 });