$(document).ready(function(){
	var x = true;
	
	var $panels = $('.panel');
	var $container = $('.scrollContainer');
	var $scroll = $('.scroll').css({overflow: 'hidden'});
		
	if(x){
		$panels.css({
			float : 'left',
			position : 'relative'
		});
		
		$container.css('width', $panels[0].offsetWidth * $panels.length);
	};
	
	// Create Divs for the Navigation Arrows (IE Fix)
	var oDiv = document.createElement('div');
	var iDiv = document.createElement('div');
	
	// Give the 2 Divs classes for posisitioning.
	$(oDiv).addClass('leftnav').addClass('arrow');
	$(iDiv).addClass('rightnav').addClass('arrow');
	
	// Insert the Arrow GFX into the DIV we just created and Append it to the outside of our Scroll Obj.
	$(oDiv).append('<img src="images/leftnav.png" alt="previous" />').appendTo('#framewrap');
	$(iDiv).append('<img src="images/rightnav.png" alt="Next" />').appendTo('#framewrap');
	
	var scrollOptions = {
		target: $scroll,		
		items: $panels,			// Whats going to be Scrolled.
		prev: '.leftnav',		// Unique idenifier for the navigation arrows.
		next: '.rightnav',		
		axis: 'xy',				// Support both X and Y Axis
		duration: 500, 			// how long the effect will take!
		easing: 'easeInOutExpo'	// The easing effect we are using!
	};
	// Active the Slider Functions.
	$('#framewrap').serialScroll(scrollOptions);
	
	
	// Check if the browser can support opacity correctly. (IE cannot)
	if(jQuery.support.opacity){
		$('.picture').css({cursor: 'pointer'});
		$('.picture').hover(function(){
			$(this).stop().animate({opacity: '.5'});
		}, function(){
			$(this).stop().animate({opacity: '1'});
		});
		$('.picture').click(function(){
			var $picture = $(this).attr('src');
			var $contentid = '.' + $(this).attr('id');
		
			// Change the larger image to match the preview image that was clicked! (DEGRADED!!!!)
			$('.bigpicture').animate({opacity: '0'}, 300).queue(function(){
					$(this).attr({src: $picture.replace('_s.jpg', '_b.jpg')});
					$(this).load(function(){ // This function helps with the preloader to check that the image has loaded before displaying it.
						$(this).animate({opacity: '1'}, 300);
						$(this).dequeue();
					});
			});
			
			// Change the text for the image preview that was clicked!
			$('.active').animate({opacity: '0'}, 250).queue(function(){
				$(this).removeClass('active');
				$($contentid).addClass('active').animate({opacity: '1'}, 250);
				$(this).dequeue();
			});
			return false;
		});
		
		// Set the opacity to 0 as the animation default on the text panels.
		$('.contentpanel').css({'opacity' : '0'});
		$('.active').css({opacity: '0'}).animate({opacity: '1'});

	// If the Brwoser cannot support opacity correctly (IE).
	}else{
		$('.picture').css({cursor: 'pointer'});
		
		// Once the preview image has been clicked...
		$('.picture').click(function(){
			var $picture = $(this).attr('src');
			var $contentid = '.' + $(this).attr('id');
		
			// Change the larger image to match the preview image that was clicked! (DEGRADED!!!!!)
			$('.bigpicture').css({display: 'none'}).attr({src: $picture.replace('_s.jpg', '_b.jpg')}).css({display: 'block'});
			
			// Change the text for the image preview that was clicked!
			$('.active').css({display: 'none'}).queue(function(){
				$(this).removeClass('active');
				$($contentid).addClass('active').css({display: 'block'});
				$(this).dequeue();
			});
			return false;
		});
	
		$('.contentpanel').css({'display' : 'none'});
		$('.active').css({display: 'block'});
		
	};
	
	// Lets Preload the Big pictures for each Image in the portfolio
	$('.picture').each(function(){
		var op = $(this).attr('src').replace('_s.jpg', '_b.jpg');
		var img = new Image();
		img.src = op;
	});
});