var myimages=new Array();
var photopreview;
var currentImageIndex = 0;
var isPresentationMode = false;
var currentSection = "preview-pane";
var currentTag = "education-tag";
var tabTag = "-tab";

var SectionScroller = {
	scroll : function(link) {
		var type = link.split("-")[1];
		
		if (type == "pane") {
			if (currentSection == link) {
				return;
			}
		
			lastSection = currentSection;
			currentSection = link;

		    sectionTab = currentSection.split("-")[0] + tabTag;
		    $(sectionTab).className = "active";
		    if (lastSection) {
			    lastTab = lastSection.split("-")[0] + tabTag;
			    $(lastTab).className = "inactive";
			}
		} else {
			if (currentTag == link) {
				return;
			}
		
			lastTag = currentTag;
			currentTag = link;

		    sectionTab = currentTag.split("-")[0] + tabTag;
		    $(sectionTab).className = "active";
		    if (lastTag) {
			    lastTab = lastTag.split("-")[0] + tabTag;
			    $(lastTab).className = "inactive";
			}
		}
		
		var scroll = new Fx.Scroll('presentationview', {
			wait: false,
			duration: 800,
			transition: Fx.Transitions.Quad.easeInOut
		});
		
		scroll.toElement($(link));
	}
};

var ToggleFx = {
	
	setPhotoViewer : function() {
		var fadeFx = new Fx.Style('photopreview', 'opacity', {duration: 600, 
			onComplete: function swapState() {
				isPresentationMode = true;
				
				// create and insert photopresenter
				var photopresenter = new Element('img', {'id': 'photopresenter', 'style': 'opacity:0'});
				photopreview = $('photopreview');
				photopreview.replaceWith(photopresenter);
				
				$('preview-tab').removeClass('active');
				$('preview-tab').addClass('inactive');
				
				ToggleFx.fadeInNextImage();
				
				new Fx.Style(photopresenter, 'opacity', {duration: 800}).start(0,1);
				
				photopresenter.addEvent('click', function(e) {
					new Event(e).stop();
					var fadeEffect = new Fx.Style(photopresenter, 'opacity', {duration: 700, 
						onComplete: ToggleFx.fadeInNextImage });
					fadeEffect.start(1,0);
				});
			}
		});
		fadeFx.start(1,0);
	},
	
	setPreviewer : function() {
		var moveFx = new Fx.Style('canvas', 'padding-top', {
			duration:300, 
			transition: Fx.Transitions.Sine,
			onComplete: function() {
				// swap sectiontype
				var previewpane = $('preview-pane');
				previewpane.removeClass('largesection');
				previewpane.addClass('smallsection');
				
				// remove photopresenter and insert previewer 
				var photopresenter = $('photopresenter');
				photopresenter.replaceWith(photopreview);
				
				$('preview-tab').removeClass('inactive');
				$('preview-tab').addClass('active');
				new Fx.Style(photopreview, 'opacity', {duration: 800}).start(0,1);
			} });
		moveFx.start(145);
		isPresentationMode = false;
	},
	
	setInfo : function() {
		var moveFx = new Fx.Style('canvas', 'padding-top', {
			duration:300, 
			transition: Fx.Transitions.Sine,
			onComplete: function() {
				// swap sectiontype
				var previewpane = $('preview-pane');
				previewpane.removeClass('largesection');
				previewpane.addClass('smallsection');
				
				// remove photopresenter and insert previewer 
				var photopresenter = $('photopresenter');
				photopresenter.replaceWith(photopreview);
				
				$('preview-tab').removeClass('inactive');
				$('preview-tab').addClass('active');
				
				var scrollFx = new Fx.Style(photopreview, 'opacity', {
					duration: 800 });
					
				scrollFx.start(0,1);
			} });
		moveFx.start(145);
		isPresentationMode = false;
	},
	
	fadeInNextImage : function() {
		presenter = $('photopresenter');
		if (currentImageIndex + 1 >= myimages.length)
			currentImageIndex = 0;
		else
			currentImageIndex++;
		presenter.src = myimages[currentImageIndex].src;
		new Fx.Style('photopresenter', 'opacity', {duration: 800}).start(0,1);
	},
	
	setPhotoViewMode : function() {
		var resizeFx = new Fx.Style('presentationview', 'height', {
			duration: 300, 
			transition: Fx.Transitions.Quad,
			onComplete: ToggleFx.setPhotoViewer });
		resizeFx.start(475);
	},
	
	setPreviewMode : function() {
		var fadeImageFx = new Fx.Style('photopresenter', 'opacity', {
			duration: 800,
			onComplete: function() {
				var resizeFx = new Fx.Style('presentationview', 'height', {
					duration: 300, 
					transition: Fx.Transitions.Quad,
					onComplete: ToggleFx.setPreviewer });
				resizeFx.start(340);
			}});
		fadeImageFx.start(1,0);
	},
	
	setInfoMode : function() {
		var fadeImageFx = new Fx.Style('photopresenter', 'opacity', {
			duration: 800,
			onComplete: function() {
				var resizeFx = new Fx.Style('presentationview', 'height', {
					duration: 300, 
					transition: Fx.Transitions.Quad,
					onComplete: ToggleFx.setInfo });
				resizeFx.start(340);
			}});
		fadeImageFx.start(1,0);
	}
};

window.addEvent('domready', function() {
	if ($defined($('photopreview'))) {
		$('photopreview').addEvent('click', function(e) {
			new Event(e).stop();
			// swap sectiontype
			var previewpane = $('preview-pane');
			previewpane.removeClass('smallsection');
			previewpane.addClass('largesection');
			
			var combinendFx = new Fx.Style('canvas', 'padding-top', {
				duration:300, 
				transition: Fx.Transitions.Sine,
				onComplete: ToggleFx.setPhotoViewMode });
			combinendFx.start(0);
		});
	}
	
	if ($defined($('previewpresenter'))) {
		$('previewpresenter').addEvent('click', function(e) {
			new Event(e).stop();
			presenter = $('previewpresenter');
			var fadeEffect = new Fx.Style('previewpresenter', 'opacity', {duration: 700, 
				onComplete: function fadeInNext() {
					if (currentImageIndex + 1 >= myimages.length)
						currentImageIndex = 0;
					else
						currentImageIndex++;
					presenter.src = myimages[currentImageIndex].src;
					new Fx.Style('previewpresenter', 'opacity', {duration: 700}).start(0,1);
			} });
			fadeEffect.start(1,0);
		});
	}
	
	if ($defined($('preview-tab'))) {
		$('preview-tab').addEvent('click', function(e) {
			new Event(e).stop();
			if (isPresentationMode)
				ToggleFx.setPreviewMode();
			else
				SectionScroller.scroll('preview-pane');
		})
	}
	
	if ($defined($('info-tab'))) {
		$('info-tab').addEvent('click', function(e) {
			new Event(e).stop();
			if (isPresentationMode) {
				ToggleFx.setInfoMode();
			} else 
				SectionScroller.scroll('info-pane');
		})
	}
	
	if ($defined($('credit-tab'))) {
		$('credit-tab').addEvent('click', function(e) {
			new Event(e).stop();
			SectionScroller.scroll('credit-pane');
		})
	}
	
	if ($defined($('education-tab'))) {
		$('education-tab').addEvent('click', function(e) {
			new Event(e).stop();
			SectionScroller.scroll('education-tag');
		})
	}
	
	if ($defined($('exhibition-tab'))) {
		$('exhibition-tab').addEvent('click', function(e) {
			new Event(e).stop();
			SectionScroller.scroll('exhibition-tag');
		})
	}
	
	if ($defined($('screening-tab'))) {
		$('screening-tab').addEvent('click', function(e) {
			new Event(e).stop();
			SectionScroller.scroll('screening-tag');
		})
	}
	
	if ($defined($('award-tab'))) {
		$('award-tab').addEvent('click', function(e) {
			new Event(e).stop();
			SectionScroller.scroll('award-tag');
		})
	}
	
	if ($defined($('<script type="text/javascript" charset="utf-8" src="script/effects.js"></script><script type="text/javascript" charset="utf-8" src="script/effects.js"></script>'))) {
		$('videology-tab').addEvent('click', function(e) {
			new Event(e).stop();
			SectionScroller.scroll('videology-tag');
		})
	}
	
	if ($defined($('bibliography-tab'))) {
		$('bibliography-tab').addEvent('click', function(e) {
			new Event(e).stop();
			SectionScroller.scroll('bibliography-tag');
		})
	}
});

function preloadImages(){
	for (i = 0; i < preloadImages.arguments.length; i++) {
		myimages[i]=new Image();
		myimages[i].src=preloadImages.arguments[i];
	}
}