// when the DOM is ready...
$(document).ready(function () {
	var max = 0;
	    $("label").each(function(){
	        if ($(this).width() > max)
	            max = $(this).width();    
	    });
	    $("label").width(max);
    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="images/scroll_left.png" />')
     //   .after('<img class="scrollButtons right" src="images/scroll_right.png" />');

    // 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);
        
//alert(el);
selectNav.call(el);
    }

    if (window.location.hash) {
        trigger({ id : window.location.hash.substr(1) });
    } else {
        $('ul.navigation a:first').click();
    }

/*$('a#home-mac').click(function(){
	//alert('te');
	$('#slider').scrollTo('#mac');
	return false;
});*/



    // 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,
		hash:false,

        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: 'x',

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

    // finally, if the URL has a hash, move the slider in to position, 
    // setting the duration to 1 because I don't want it to scroll in the
    // very first page load.  We don't always need this, but it ensures
    // the positioning is absolutely spot on when the pages loads.
    scrollOptions.duration = 1;
    $.localScroll.hash(scrollOptions);

var clicked = false;

function loadFancybox(){
	$("#web .divider-right a").fancybox({
		'titlePosition' : 'over',
		'transitionIn'	: 'elastic',
		'transitionOut'	: 'elastic',
		'overlayOpacity':0.6
	});
}

$('a#IEnice').fancybox({
	'titlePosition' : 'over',
	'transitionIn'	: 'elastic',
	'transitionOut'	: 'elastic',
	'overlayOpacity':0.6
});
	
	$('a#findthatlink').click(function(){
		
		if(clicked==false){
			$('#web .divider-left').animate({width:'48%'}, 300, function(){
				$('#web .divider-right').css('width','48%');
				clicked=true;
				$('#web .divider-right').fadeOut('slow', function(){
					$('#web .divider-right').html('<a onClick="javascript:pageTracker._trackPageview(\'/findthatfull\');" href="images/big/findthat.jpg" title="<a href=\'http://findth.at\'>findth.at</a> is a socially powered search engine that scours Google, Twitter and Delicious to find what everyone is talking about. The design incorporates JQuery for animations, and the back-end (the bits that do the hard work behind the scenes) is all completely custom code hand written by yours truly."><img src="images/medium/findthat.jpg" /></a>').fadeIn('slow');
					loadFancybox();
					
				});
			});
			
		}else{
			$('#web .divider-right').fadeOut('slow', function(){
			$('#web .divider-right').html('<a onClick="javascript:pageTracker._trackPageview(\'/findthatfull\');" href="images/big/findthat.jpg" title="<a href=\'http://findth.at\'>findth.at</a> is a socially powered search engine that scours Google, Twitter and Delicious to find what everyone is talking about. The design incorporates JQuery for animations, and the back-end (the bits that do the hard work behind the scenes) is all completely custom code hand written by yours truly."><img src="images/medium/findthat.jpg" /></a>').fadeIn('slow');
			loadFancybox();
		});
			
		}
		return false;
		
	});
	
	$('a#joshlink').click(function(){
		
		if(clicked==false){
			$('#web .divider-left').animate({width:'48%'}, 300, function(){
				$('#web .divider-right').css('width','48%');
				clicked=true;
				$('#web .divider-right').fadeOut('slow', function(){
					$('#web .divider-right').html('<a href="images/big/josh.jpg" title="<a href=\'http://joshrosscreative.com\'>Josh Ross</a> has been a client for a long time (this is the third site I\'ve made for him). This design features JQuery animations, and an Ajax style contact form."><img src="images/medium/josh.jpg" /></a>').fadeIn('slow');
					loadFancybox();
					
				});
			});
			
		}else{
			$('#web .divider-right').fadeOut('slow', function(){
				$('#web .divider-right').html('<a href="images/big/josh.jpg" title="<a href=\'http://joshrosscreative.com\'>Josh Ross</a> has been a client for a long time (this is the third site I\'ve made for him). This design features JQuery animations, and an Ajax style contact form."><img src="images/medium/josh.jpg" /></a>').fadeIn('slow');
				loadFancybox();
			
			});
		}
		return false;
		
	});
	
	$('a#davidlink').click(function(){
		
		if(clicked==false){
			$('#web .divider-left').animate({width:'48%'}, 300, function(){
				$('#web .divider-right').css('width','48%');
				clicked=true;
				$('#web .divider-right').fadeOut('slow', function(){
					$('#web .divider-right').html('<a href="images/big/david.jpg" title="<a href=\'http://davidkiang.com\'>David Kiang</a> had a design in mind when he contacted me after being told by developer after developer that what he wanted was only possible by using Flash. Four days after the final mockup being approved, he had a site that functioned exactly as he imagined using nothing other than CSS and JQuery."><img src="images/medium/david.jpg" /></a>').fadeIn('slow');
					loadFancybox();
					
				});
			});
			
		}else{
			$('#web .divider-right').fadeOut('slow', function(){
				$('#web .divider-right').html('<a href="images/big/david.jpg" title="<a href=\'http://davidkiang.com\'>David Kiang</a> had a design in mind when he contacted me after being told by developer after developer that what he wanted was only possible by using Flash. Four days after the final mockup being approved, he had a site that functioned exactly as he imagined using nothing other than CSS and JQuery."><img src="images/medium/david.jpg" /></a>').fadeIn('slow');
				loadFancybox();
			
			});
		}
		return false;
		
	});
	
	$("#ajax-contact-form").submit(function(){

	var str = $(this).serialize();

	   $.ajax({
	   type: "POST",
	   url: "contact.php",
	   data: str,
	   success: function(msg){

	$("#note").ajaxComplete(function(event, request, settings){

	if(msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
	{
	result = '<div class="notification_ok">Thanks for your email. I will get back to you as soon as I can.</div>';
	$("#fields").hide();
	}
	else
	{
	result = msg;
	}

	$(this).html(result);

	});

	}

	 });

	return false;

	});
	
	
if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')
{
  $('#twitterwrap').css({width:160,marginRight:20});  

//$('.scrollContainer div.panel').css({paddingLeft:0});
$('#wrapper').css({marginLeft:0});

//$('.head').css({marginLeft:10});

};



});