// JavaScript Document

$(document).ready(function(){

$("a[rel=example_group]").fancybox({
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'titlePosition' 	: 'over',
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
			});

			/*
			*   Examples - various
			*/

			$("#various1").fancybox({
				'titlePosition'		: 'inside',
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});

			$("#various2").fancybox();

			$("#various3").fancybox({
				'width'				: '75%',
				'height'			: '75%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe'
			});

			$("#various4").fancybox({
				'padding'			: 0,
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});
			
	var currentPosition = 0;
	var slideWidth = 740;
	var slides = $('.slide');
	var numberOfSlides = slides.length;

	var currentPosition2 = 0;
	var slideWidth2 = 740;
	var slides2 = $('.slide2');
	var numberOfSlides2 = slides2.length;

	// Remove scrollbar in JS
	$('#slidesContainer').css('overflow', 'hidden');
	$('#slidesContainer2').css('overflow', 'hidden');
	
	// Wrap all .slides with #slideInner div
	slides
	.wrapAll('<div id="slideInner"></div>')
	// Float left to display horizontally, readjust .slides width
	.css({
	  'float' : 'left',
	  'width' : slideWidth
	});

	slides2
	.wrapAll('<div id="slideInner2"></div>')
	// Float left to display horizontally, readjust .slides width
	.css({
	  'float' : 'left',
	  'width' : slideWidth2
	});
	
	// Set #slideInner width equal to total width of all slides
	$('#slideInner').css('width', slideWidth * numberOfSlides);
	$('#slideInner2').css('width', slideWidth2 * numberOfSlides2);
	
	// Insert controls in the DOM
	$('#slideshow')
	.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
	.append('<span class="control" id="rightControl">Clicking moves right</span>');

	$('#slideshow2')
	.prepend('<span class="control" id="leftControl2">Clicking moves left</span>')
	.append('<span class="control" id="rightControl2">Clicking moves right</span>');

	// Hide left arrow control on first load
	manageControls(currentPosition, "", numberOfSlides);
	manageControls(currentPosition2, "2", numberOfSlides2);
	
	// Create event listeners for .controls clicks
	$('.control')
	.bind('click', function(){
		// Determine new position
		if ($(this).attr('id')=='rightControl') {	currentPosition = currentPosition+1 };
		if ($(this).attr('id')=='leftControl') {	currentPosition = currentPosition-1 };
		
		if ($(this).attr('id')=='rightControl2') {	currentPosition2 = currentPosition2+1 };
		if ($(this).attr('id')=='leftControl2') {	currentPosition2 = currentPosition2-1 };
		
		//alert("curPos:" + currentPosition + ", curPos2:" + currentPosition2);
		
		// Hide / show controls
		manageControls(currentPosition, "", numberOfSlides);
		manageControls(currentPosition2, "2", numberOfSlides2);
	
		// Move slideInner using margin-left
		$('#slideInner').animate({
		  'marginLeft' : slideWidth*(-currentPosition)
		});
		// Move slideInner using margin-left
		$('#slideInner2').animate({
		  'marginLeft' : slideWidth2*(-currentPosition2)
		});
	});

	// manageControls: Hides and Shows controls depending on currentPosition
	function manageControls(position, slideIndex, numberOfSlides){
		var rightControl = "#rightControl"+slideIndex;
		var leftControl = "#leftControl"+slideIndex;
		// Hide left arrow if position is first slide
		if(position==0){ $(leftControl).hide() } else{ $(leftControl).show() }
		// Hide right arrow if position is last slide
		if(position==numberOfSlides-1){ $(rightControl).hide() } else{ $(rightControl).show() }
	}	

});