var clientWidth = null;

var content = null;

var contentInner= null;

var leftArrow = null;

var rightArrow = null;

function Project(el) {
	this.htmlEl = $(el);
	
	this.has2colText = false;
	this.leftBoxWidth = 315 + 35;
	
	// falls zweispaltiger Projektartikel aendern sich die Werte
	if(this.htmlEl.hasClass('text-with-manyimages-2col')) {
		this.has2colText = true;
		this.leftBoxWidth = 630 + 35;
	}
	// this.leftBoxWidth = deletePX(this.htmlEl.find('.text-with-image-leftbox').css('width')) + 35;
	
	this.id = $(el).attr('id');
	
	this.isActive = false;
	
	this.titleText = this.htmlEl.find('.text-with-image-title').text();
	
	this.images = this.htmlEl.find('.images');
	
	var imagesWidth = 0;
	this.images.children().each(function(index){
		imagesWidth += this.width + 15;
	});
	this.rightBoxWidth = imagesWidth;
	
	// this.rightBoxWidth = deletePX(this.htmlEl.find('.text-with-image-rightbox').css('width'));
	
	this.totalWidth = this.leftBoxWidth + this.rightBoxWidth;
	
	this.distanceFromLeft = this.leftBoxWidth;
	
	this.positionOfLeftArrow = this.leftBoxWidth + 30;
	
	this.positionOfRightArrow = this.positionOfLeftArrow + 20;
	
	this.scrolledPixels = 0;
	
	this.number = 0;
	
	this.scrollCounter = 0;
	
	Project.totalWidthOfAllProjects += this.totalWidth;
	
	Project.totalNumberOfProjects += 1;
	
	this.prevProject = null;
	
	this.nextProject = null;
}

Project.activeProject = null;

Project.projects = new Array();

Project.totalWidthOfAllProjects = 0;

Project.totalNumberOfProjects = 0;

Project.articleIdArray = new Array();

Project.indexArray = new Array();

// Object functions

Project.prototype.setActive = function() {
	this.isActive = true;
	this.htmlEl.css('display','block');
	this.images.addClass('activeImages');

	Project.activeProject = this;
	
	if(this.totalWidth < clientWidth) {
		leftArrow.css('display','none');		
		rightArrow.css('display','none');	
	} else {
		leftArrow.css('display','block');
		rightArrow.css('display','block');
	}
}

Project.prototype.setInactive = function() {
	this.isActive = false;
	this.htmlEl.css('display','none');
	this.images.removeClass('activeImages');
}

Project.hideAllProjects = function() {
	for(i = 0; i < Project.projects.length ; i++) {
		Project.projects[i].setInactive();
	}
}

Project.getProjectById = function(checkId) {
	for(i = 0; i < Project.projects.length ; i++) {
		if(checkId == Project.projects[i].id) {
			return Project.projects[i];
		}
	}
	
	return false;
}


var counter = 0;

var color = $('.field-box .inner-trans-inner').attr('style');

$(document).ready(function(){
	if ($('.field-box .inner-trans-inner')) {
		var color = $('.field-box .inner-trans-inner').attr('style');
		$('.field-box .inner a').each(function(index, el) {
			$(el).attr('style',color);
		});
	}
	// var li = $('<li><a onclick="showProject(\'' + project.id + '\');" style="' + color + ';">' + project.titleText + '</a></li>');
});

$(document).ready(function(){
	content = $('#content');
	contentInner= $("#content-inner");
	leftArrow = $('#leftarrow');
	rightArrow = $('#rightarrow');
	clientWidth = document.body.clientWidth;
	
	if ($(".text-with-image-project").length > 0) {
		var previous = null;
		$('.text-with-image-project').each(function(index, el){
			// Mehrfach verkettete Listen
			// damit man feststellen kann, was das Folge- und Vorgängerprojekt zu einem Projekt ist
			var project = new Project(el);
			project.prevProject = previous;
			if(project.prevProject != null) {	
				project.prevProject.nextProject = project;
			}
			previous = project;
			
			project.number += index;
			project.htmlEl.css('display','block');
			
			project.images.children().each(function(img){
				this.width;
			});

			Project.projects[project.number] = project;
			
			var color = $('.field-box .inner-trans-inner').attr('style');
			
			var li = $('<li><a onclick="showProject(\'' + project.id + '\');" style="' + color + ';">' + project.titleText + '</a></li>');
			li.appendTo('#linklist-ul');
			
			li.find('a').hover(function(){
				var tags = project.htmlEl.find(':first').attr('class');
				if(tags != 'text-with-image-leftbox') {
					var taggedItemsCount = 0;
					$('#menu-innerbox a').each(function(index2, menuEl){
						var alias = $(menuEl).attr('class');
						if(alias && (tags.indexOf(alias) != -1)) {
							$(menuEl).addClass('highlight');
							taggedItemsCount += 1;
						}
					});
				}
			}, function(){
				var tags = project.htmlEl.find(':first').attr('class');
				if(tags != 'text-with-image-leftbox') {
					$('#menu-innerbox a').each(function(index2, menuEl){
						var alias = $(menuEl).attr('class');
						$(menuEl).removeClass('highlight');
					});
				}
			});
		}); // end of foreach
		
		Project.hideAllProjects();
		
		if(Project.totalNumberOfProjects > 0) {
			$('#linklist').css('display','block');
		}
		
		var korrekteHoehe = $('.field-box').height()-20;
		$('.field-box .inner-trans-inner').css('height', korrekteHoehe + 'px');
		
		$('#closebutton').click(function(){
			content.removeClass('whitebg');
			for(i = 0; i < Project.projects.length ; i++) {
				$('#' + Project.projects[i].id).css('display','none');
				contentInner.css('margin-left','0');
			}
			
			return false;
		});
	}
	
	rightArrow.hover(function(){
		var to = Project.activeProject.totalWidth;
		
		rightArrow.everyTime(25,'myTimer',function() {
			
			var scrolledPixels = -1 * Project.activeProject.scrollCounter;
			
			if(scrolledPixels >= ((clientWidth - to)) ) {
				Project.activeProject.scrollCounter += 25;
				
				Project.activeProject.images.animate({
					marginLeft: "-=25px"
				}, 25 );
			}

		});
	},function(){
		rightArrow.stopTime('myTimer');
	});

	leftArrow.hover(function(){
		leftArrow.everyTime(25,'myTimer',function() {
			if(Project.activeProject.scrollCounter > 0) {
				Project.activeProject.scrollCounter -= 25;
				Project.activeProject.images.animate({
			        marginLeft: "+=25px"
			    }, 25 );
			}
		});
	},function(){
		leftArrow.stopTime('myTimer');
	});
});

function showProject(idString) {
	if(Project.activeProject) {
		// place the next two lines at the end of closebutton function to achieve new feature
		Project.activeProject.images.css('margin-left','0');
		Project.activeProject.scrollCounter = 0;
		// bugfix, notwendig weil: bei offenem projekt -> klick auf anderes projekt ohne vorher zu closen -> absturz
		Project.activeProject.setInactive();
	}
	
	// hole mir das entsprechende Projekt Objekt fuer das angeklickte Projekt
	var project = Project.getProjectById(idString);
	// setze das angeklickte Projekt als das derzeit (immer einzige) aktive fest
	project.setActive();

	$('#leftarrow').css('left',project.positionOfLeftArrow + 'px');
	$('#rightarrow').css('left',project.positionOfRightArrow + 'px');
	
	showWhiteBackground();
}

function showWhiteBackground() {
	content.addClass('whitebg');
	content.addClass('projectview');
	
	content.css('width',(clientWidth+20) + 'px');
	
	contentInner.css('width', Project.activeProject.totalWidth + 'px');
}