$(function(){
  $('#resume-content').css('width', '648px').css('height', '600px').css('display', 'block');
  $('#resume-pane').jScrollPane();
  $('#resume-content').css('display', 'none');
/*	  $.ajax({
						url: 'resume.htm',
						type: 'GET',
						dataType: 'html',
						timeout: 1000,
						error: function(){
							alert('Error loading document');
						},
						success: function(html){
							// do something with html
							$('#resume-pane').html(html);
							$('#resume-pane').jScrollPane();
						}
			
					});
*/
});
   			
function load_portfolio (section) {	
	$.ajax({
		url: section+'.htm',
		type: 'GET',
		dataType: 'html',
		timeout: 1000,
		error: function(){
			//alert('Error loading document');
		},
		success: function(html){
			// do something with html
			$("div.frame", "#portfolio-content").html(html).css('display','none').fadeIn("normal");
			
			$('div.nav-icon').click(function(){
				var section = $(this).attr('id');
				load_portfolio(section);
			}); 
			
			$('button#up').hide();
			$('#screen').serialScroll({
				target:'#sections',
				items:'li', //selector to the items ( relative to the matched elements, '#sections' in this case )
				prev:'button#up',//selector to the 'prev' button (absolute!, meaning it's relative to the document)
				next:'button#down',//selector to the 'next' button (absolute too)
				axis:'y',//the default is 'y'
				queue:false,//we scroll on both axes, scroll both at the same time.
				event:'click',//on which event to react (click is the default, you probably won't need to specify it)
				stop:false,//each click will stop any previous animations of the target. (false by default)
				lock:true, //ignore events if already animating (true by default)
				duration:700,//length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
				start: 0, //on which element (index) to begin ( 0 is the default, redundant in this case )
				force:false, //force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
				cycle:false,//cycle endlessly ( constant velocity, true is the default )
				step:1, //how many items to scroll each time ( 1 is the default, no need to specify )
				jump:false, //if true, items become clickable (or w/e 'event' is, and when activated, the pane scrolls to them)
				lazy:false,//(default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
				interval:false, //it's the number of milliseconds to automatically go to the next
				navigation:'#navigation li',
				constant:true,
				onBefore:function( e, elem, $pane, $items, pos ){
				//
				// 'this' is the triggered element 
				// e is the event object
				// elem is the element we'll be scrolling to
				// $pane is the element being scrolled
				// $items is the items collection at this moment
				// pos is the position of elem in the collection
				// if it returns false, the event will be ignored
				//
				 
				$('button#up,button#down').show();
				if( pos == 0 )
					$('button#up').hide();
				else if( pos == $items.length-1 )
					$('button#down').hide();
				 //those arguments with a $ are jqueryfied, elem isn't.
					e.preventDefault();
					if( this.blur )
						this.blur();
				},
				onAfter:function( elem ){
				//'this' is the element being scrolled ($pane) not jqueryfied
				}
			});
			
			
		}
	});
}
   			
$(document).ready(function() {

	// Based on:
	// SeViR Simple Horizontal Accordion 2007
	// http://letmehaveblog.blogspot.com
	jQuery.fn.extend({
	  haccordion: function(params){
		var jQ = jQuery;
		var params = jQ.extend({
		  speed: 500,
		  headerclass: "color-bar",
		  contentclass: "section-content",
		  contentwidth: 648
		},params);
		return this.each(function(){
		  jQ("."+params.headerclass, this).click(function(){
			var p = jQ(this).parent()[0];
			if ($('.open').length > 0){
				//	alert(p.opened);
				if ($(this).is('.open')) {
					if ($(this).next().is('#resume-content')) {
						$('#resume-pane').css('position', 'static');
						$('.jScrollPaneContainer').css('position', 'static');
					}
					$('#barcode').animate({width: params.contentwidth + "px"}, params.speed+90);
					$(this).next("div."+params.contentclass).animate({width: "0px"}, params.speed);
					$(this).removeClass('open');
				} else {
					if ($(p.opened).is('#resume')) {
						$('#resume-pane').css('position', 'static');
						$('.jScrollPaneContainer').css('position', 'static');
					} 
					if ($(this).next().is('#resume-content')) {
						$('#resume-pane').css('position', 'absolute');
						$('.jScrollPaneContainer').css('position', 'relative');
					}
					jQ(p.opened).next("div."+params.contentclass).animate({width: "0px"}, params.speed);
				//	$('#barcode').animate({width: "0px"}, params.speed);
					jQ(this).next("div."+params.contentclass).animate({width: params.contentwidth + "px"}, params.speed);
					
					jQ(p.opened).removeClass('open');
					$(this).addClass('open');
					p.opened = this;

				}
			} else {
					p.opened = this;						    							
					if ($(this).next().is('#resume-content')) {
						$('#resume-pane').css('position', 'absolute');
						$('.jScrollPaneContainer').css('position', 'relative');
					}
					$(this).addClass('open');
					$('#barcode').animate({width: "0px"}, params.speed -90);
					jQ(this).next("div."+params.contentclass).animate({width: params.contentwidth + "px"}, params.speed);
				 //   $('#resume-pane').jScrollPane();
			}
		  });
		});
	  }
	});

	$(function(){ 
	 $("#center-area").haccordion(); 
	});

	$('#portfolio-content').listen('click', 'div.thumb', function(){
		var section = $(this).attr('id');
		load_portfolio(section);	
	}); 	
	
		
});