var project = $.klass({
	duration: 750,
	openedHeight: 371,
	open: false,
	selected: 0,
	flashWidth: "524",
	flashHeight: "371",
	flashQuality: "best",
	flashMenu: false,

	initialize: function() {
		var project = this;
		var images = [];
		var sublines = [];

		this.element.find('.column.right').prepend('<ul class="controls"><li class="prev"><a href="#previous"></a></li><li class="next"><a href="#next"></a></li></ul>').prepend('<p class="subline"></p>').prepend('<div class="fullsize"></div>');

		this.element.addClass('project');

		this.image = this.element.find('.fullsize');
		this.description = this.element.find('.description');
		this.controls = this.element.find('.controls');
		this.subline = this.element.find('.subline');
		this.info = this.element.find('p.title');
		this.cached = [];
		this.initialHeight = this.element.height();

		this.controls.css('opacity', '0').css('display', 'none');
		//this.subline.css('opacity', '0').css('display', 'none');
		
		this.element.find('.thumbnails li a').each(function(i, el) {
			images.push($(el).attr('href'));
			sublines.push($(el).find('img').attr('alt'));

			$(el).click(function() {
				if (!project.open) {
					project.select(i);
					project.toggle();
				};
				
				return false;
			});

			$(el).mouseover(function() {
				if (!project.open)
					return;

				project.select(i);
			});
		});

		this.info.click(function(e) {
			project.toggle();
			return false;
		});

		this.controls.find('.prev a').click(function(e) {
			project.select(project.selected - 1);
			return false;
		});

		this.controls.find('.next a').click(function(e) {
			project.select(project.selected + 1);
			return false;
		});

		this.images = images;
		this.sublines = sublines;
	},

	select: function(index, force) {
		if ((index == this.selected || (index > this.selected && this.selected == (this.images.length - 1)) || (index < 0 && this.selected == 0)) && !force)
			return;

		var img = new Image();
		var imgs = this.element.find('ul.thumbnails li');
		var image = this.image;
		var images = this.images;
		var project = this;
		var isImage = true;

		if (images[index]) {
			var ilc = images[index].toLowerCase();
			isImage = (ilc.indexOf('.jpg') > 0 || ilc.indexOf('.gif') > 0 || ilc.indexOf('png') > 0);
		}

		if (index >= images.length) {
			index = images.length - 1;
		} else if (index < 0) {
			index = 0;
		}

		this.subline.html(this.sublines[index]);

		imgs.removeClass('selected');
		$(imgs[index]).addClass('selected');

		img.onload = function() {
			project.cache(images[index]);
			image.css('background', 'top left no-repeat url(' + images[index] + ')');
		}

		if (!isImage) {
			image.html("<embed src='" + images[index] + "'menu='" + this.flashMenu + "' quality='" + this.flashQuality + "' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='" + this.flashWidth + "' height='"+ this.flashHeight + "'></embed>");
		
			image.css('background', 'none');

		} else if (this.isCached(images[index])) {
			img.onload();
		} else {
			image.css('background', '250px 156px no-repeat url(http://www.gfg-bremen.de/fileadmin/templates/img/loader.gif) #f7f7f7');
			img.src = this.images[index];		
		}

		if (isImage)
			image.html('');


		this.selected = index;
	},

	cache: function(image) {
		if (!this.isCached(image)) {
			this.cached.push(image);
		}
	},

	isCached: function(image) {
		for (var i = 0; i < this.cached.length; i++) {
			if (this.cached[i] == image) {
				return true;
			}
		}
		
		return false;
	},

	onclick: function() {

		if (!this.open)
			this.toggle();

	},

	toggle: function() {
		this.open = !this.open;
		var info = this.info.find('.toggle');

		if (this.open) {
			if (info)
				info.html('weniger Informationen');	

			this.info.addClass('opened');
			this.element.addClass('opened');
			this.select(this.selected, true);
			this.toggleImage();
		} else {
			if (info)
				info.html('mehr Informationen');	

			this.toggleDescription();

			this.image.html('');
		}
	},

	toggleImage: function() {
		var project = this;

		if ($.browser.msie && $.browser.version == '7.0')
			this.element.animate({ height: this.open ? (this.openedHeight + (this.initialHeight * 2) + 7) : this.initialHeight}, this.duration, 'swing', function() { project.onimage(); }); 		

		this.image.animate({ height: this.open ? this.openedHeight : 0, marginBottom : this.open ? 5 : 0}, this.duration, 'swing', function() { project.onimage(); }); 		
		this.controls.animate({ opacity : this.open ? 1 : 0}, this.duration / 2, 'swing').css('display', this.open ? 'block' : 'none'); 		
		this.element.find('ul li').animate({ marginBottom : this.open ? 11 : 0, marginTop : this.open ? 34 : 0}, this.duration / 2, 'swing'); 		
		this.subline.animate({ height: this.open ? '1em' : 0 }, this.duration, 'linear' ); 

		if (this.open)
			this.subline.css('display', 'block');

		this.image.click(function(e) {
			project.select(project.selected + 1);
		});
		
	},
		 
	toggleDescription: function() {
		var project = this;
		
		this.description.css('display', 'block');

		this.description.animate({ opacity : this.open ? 1 : 0 }, this.duration, 'linear', function() { project.ondescription(); }); 
	},

	onimage: function() {
		if (this.open) {
			this.toggleDescription();
			$.scrollTo(this.element.offset()['top'] - 10, 600);			
		} else {
			this.subline.css('display', 'none');
		}
	},
	
	ondescription: function() {
		if (!this.open) {
			this.description.css('display', 'none');
			this.toggleImage();

			this.info.removeClass('opened');
			this.element.removeClass('opened');
		} else {
		}
	}
});



$(document).ready(function() {
	$('ul.projects .description').css('opacity', '0').css('display', 'none');

	$('ul.projects > li').attach(project);
});