var picIndex = 0;

function mycarousel_initCallback(carousel) {
    
    jQuery('.slideshowNav a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        return false;
    });

	jQuery('.slideshowNav li.slideshowNext').bind('click', function() {
        carousel.next();
        return false;
    });

    jQuery('.slideshowNav li.slideshowPrev').bind('click', function() {
        carousel.prev();
        return false;
    });

};

/**
 * This is the callback function which receives notification
 * when an item becomes the first one in the visible range.
 */
function mycarousel_itemFirstInCallback(carousel, item, idx, state) {
    jQuery('.slideshowNav a.'+idx).addClass('current');
};

/**
 * This is the callback function which receives notification
 * when an item is no longer the first one in the visible range.
 */
function mycarousel_itemFirstOutCallback(carousel, item, idx, state) {
    jQuery('.slideshowNav a.'+idx).removeClass('current');
};


$(document).ready(function(){

	var $imagesBoxContent = $('#imagesBox').html();

	// click function for gallery thumbnail
	// ------------------------------------
	
	$('.galleryImage').live('click', function() {
	
		// get the picture index
		$picIndex = $(this).parent().index();
	
		// enlarge the content box
  		$('#content').removeClass('size2').addClass('size3');
  		
  		// enlarge the image box
  		$('#imagesBox').addClass('size2');
  		
  		// get all the images
  		var $images = $("#imagesBox div").children('img');
  		var $i = 1; // counter
  		var $slideshowNav = '<ul class="slideshowNav"><li class="slideshowPrev"><</li>';
  		var $slideshow = '<ul id="slideshow" class="jcarousel-skin-cotonea">';
  		var $slideshowElement;

		// create the slideshow and navigation
		$images.each(function(){
			$slideshowNav += '<li><a href="#" class="'+$i+'">'+$i+'</a></li>';
			if($(this).next('div').hasClass('videoPath')){
				$slideshowElement = '<li><video src="'+$(this).next('div').text()+'" height="325" id="video'+$i+'" poster="'+$(this).attr('src').replace('.jpg', '_large.jpg')+'" width="432"></video><script type="text/javascript">jwplayer("video'+$i+'").setup({ flashplayer: "/javascripts/mediaplayer-5.5/player.swf" });</script><p>'+$(this).attr('title')+'</p></li>';
			}
			else
			{
				$slideshowElement = '<li><img src="'+$(this).attr('src').replace('.jpg', '_large.jpg')+'" /><p>'+$(this).attr('title')+'</p></li>';
			}
			$slideshow += $slideshowElement;
			$i++;
		});
		
		$slideshowNav += '<li class="slideshowNext">></li></ul>';
		$slideshow += '</ul>';
		
		//$('#imagesBox').css('overflow', 'hidden');
		$('#imagesBox').html($slideshowNav +'<div class="clear"></div>'+ $slideshow +'<a href="#" class="imagesOverview">Zur&uuml;ck zur Bild&uuml;bersicht</a>');
		//$('#slideshow').css('background', '#ffff00');
		//$('#slideshow').css('overflow', 'auto');
		//$('#slideshow').css('width', $("#imagesBox").width() * ($i-1) + 'px');
		
		$('.imagesOverview').live('click', function() {
			$('#imagesBox').html($imagesBoxContent);
			
			// shrink the content box
  			$('#content').removeClass('size3').addClass('size2');
  		
  			// shrink the image box
  			$('#imagesBox').removeClass('size2');
		});
		
		jQuery('#slideshow').jcarousel({
        	scroll: 1,
        	start: $picIndex+1,
        	initCallback: mycarousel_initCallback,
        	itemFirstInCallback:  mycarousel_itemFirstInCallback,
        	itemFirstOutCallback: mycarousel_itemFirstOutCallback
    	});
    
	});
	
	$('.caption').live('click', function() {
		$(this).next('.galleryImage').click();
	});

});