$(document).ready(function() {


	$('.accordion').accordion({
		'autoHeight': false,
		'header': 'h2',
		'changestart': function(evt, ui) {
			ui.newHeader.addClass('active');
			ui.oldHeader.removeClass('active');

			createHashLink(ui.newHeader.attr('id'));
		}
	});

	var projectsContainer = $('.accordion-projects');
	projectsContainer.accordion({
		'autoHeight': false,
		'header': 'h4',
		'collapsible': true,
		'active': -1,
		'changestart': function(evt, ui) {
			ui.newHeader.addClass('active');
			ui.oldHeader.removeClass('active');
			
			// make sure that the first image is really loaded
			var img = $('img', $(ui.newContent)).first();
			if (img.length) {
				loadImage(img);
			}
			
			createHashLink(ui.newHeader.attr('id'));
		}
	});

	// load the img with something else
	$('.csc-textpic-imagewrap img', projectsContainer).attr('src', '/clear.gif');


	// fixing "text w/ pic": add the numbers to navigate through each block
	// only show the first image and hide the others
	$('.csc-textpic-imagewrap', projectsContainer).each(function() {
		var numPics = $(this).children().length;
		if (numPics > 1) {
			$(this).children().not(':first').hide();
		}
		
		var html = '';
		for (var i = 0; i < numPics; i++) {
			html += '<span class="csc-textpic-link' + (i == 0 ? ' active' : '') + '">' + (i+1) + '</span>';
		}
		
		$(this).after('<div class="csc-textpic-links">' + html + '</div>')
	});
	
	$('.csc-textpic-link').click(function(evt) {
		var selectedPosition = $(this).html();
		var allImages = $(this).parent().prev().children();
		var img = allImages.hide().eq(selectedPosition-1).show().find('img');
		$(this).addClass('active').siblings().removeClass('active');
		if (img) {
			loadImage(img);		
		}
	});


	function loadImage(imgTag) {
		if ($(imgTag).attr('id')) {
			var flashId  = $(imgTag).attr('id');
			var flashUrl = $(imgTag).attr('longdesc');
			$(imgTag).replaceWith('<a id="' + flashId + '" class="video" style="display:block;width:800px;height:450px;" href="/' + flashUrl + '"></a>');
			startFlash(flashId);
		} else {
			$(imgTag).attr('src', $(imgTag).attr('longdesc')).show();
		}
	}
	
	
	function startFlash(id) {
		flowplayer(id, "typo3conf/ext/miflowplayer/res/flowplayer/flowplayer-3.1.5.swf", {	
			key: '#@83a75ea4430d1d7b316',
			clip: {
				autoPlay: true,
				scaling: "fit",
				loop: false,
				autoBuffering: false,
				fadeInSpeed: 2000,
				fadeOutSpeed: 2000
			},
			canvas: {
					background: '#ffffff',
					backgroundGradient: 'none'
			},
			plugins: {
					controls: {
						autoHide: "always",
						play: true,
						volume: true,
						mute: true,
						time: true,
						stop: false,
						playlist: false,
						fullscreen: true,
						scrubber: true,
						width: '98%',
						bottom: 5,
						left: '50%',
						borderRadius: 15
					}
			}
		});
	}



		// resolve the hash functionality when loading a page with the hash #page-33
	resolveHashLink = function() {
		var hash = window.location.hash;
		if (hash.length > 0) {
			var hashParts = hash.split('-');
			var pageId = hashParts[1];
			if (hashParts[0] == '#page' && $('#pageheader-' + pageId).length > 0) {
				var header = $('#pageheader-' + pageId);
				if (header.parents('.subpagecontent').length > 0) {
					header.parents('.subpagecontent').prev().click();
				}
				header.click();
			}
		}
	}


	createHashLink = function(id) {
		var hashParts = id.split('-');
		var pageId = parseInt(hashParts[1]);
		if (pageId > 0) {
			window.location.hash = '#page-' + pageId;
		}
	}

		// check if we need to resolve a hash link
	resolveHashLink();

});