// when the DOM is ready...
$(document).ready(function () {

var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');

var horizontal = true;

if (horizontal) {
  $panels.css({
    'float' : 'left',
    'position' : 'relative' // IE fix to ensure overflow is hidden
  });
  
  $container.css('width', $panels[0].offsetWidth * $panels.length);
}

var $scroll = $('#slider .scroll').css('overflow', 'hidden');

// handle nav selection
function selectNav() {
  $(this)
    .parents('ul:first')
      .find('a')
        .removeClass('selected')
      .end()
    .end()
    .addClass('selected');
}

$('#slider .navigation').find('a').click(selectNav);

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();
}

var offset = parseInt((horizontal ? 
  $container.css('paddingTop') : 
  $container.css('paddingLeft')) 
  || 0) * -1;


var scrollOptions = {
  target: $scroll,
  
  items: $panels,
  
  navigation: '.navigation a',
  
  prev: 'img.left', 
  next: 'img.right',
  
  axis: 'xy',
  
  onAfter: trigger,  
  offset: offset,
  duration: 300,
  easing: 'swing'
};

$('#slider').serialScroll(scrollOptions);
$.localScroll(scrollOptions);
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);

});

	$(document).ready(function(){
		$("a[rel='webdesign']").colorbox({transition:"none"});
		$("a[rel='print']").colorbox({transition:"none", width:"75%", height:"75%"});
		$("a[rel='school']").colorbox({transition:"none", width:"640px", height:"480px"});

	});
	
	$(function(){
		
            $("#page-wrap div.button").click(function(){
            	
            	$clicked = $(this);
            	
            	// if the button is not already "transformed" AND is not animated
            	if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
            		
            		$clicked.animate({
            			opacity: 1,
            			borderWidth: 5
            		}, 600 );
            		
            		// each button div MUST have a "xx-button" and the target div must have an id "xx" 
            		var idToLoad = $clicked.attr("id").split('-');
            		
            		//we search trough the content for the visible div and we fade it out
            		$("#content").find("div:visible").fadeOut("fast", function(){
            			//once the fade out is completed, we start to fade in the right div
            			$(this).parent().find("#"+idToLoad[0]).fadeIn();
            		})
            	}
            	
            	//we reset the other buttons to default style
            	$clicked.siblings(".button").animate({
            		opacity: 0.5,
            		borderWidth: 1
            	}, 600 );
            	
            });
		});