/**
 * @author koenbuekenhout
 */
/**
 * @author koenbuekenhout
 */
var Board = new Class({
    initialize: function(wrapper, list){
        this.wrapper = wrapper;
		this.list = list;
		this.currentIndex = 0;
    },
	
	buildRow: function() {
		var startIndex = this.currentIndex;
		var endIndex = this.currentIndex + 5;
		if(endIndex>this.list.length) {
			endIndex = this.list.length;
		}
		
		//Declare variables
		var boardElement = null; var imageElement = null;
		var nameElement = null; var functionElement = null;
		var item = null;
		
		//Create a div that wraps all members
		var membersElement = new Element('div', {'id':'board'});
		
		for(startIndex; startIndex<endIndex; startIndex++) {
			item = this.list[startIndex];
			
			//Create div for the member
			boardElement = new Element('div', {'id':startIndex,'class':'member'});
			
			//Create div containing the image
			imageWrapperElement = new Element('div', {'class':'image'});
			imageElement = new Element('img', {'src':'images/members/small/' + item.image});
			imageElement.inject(imageWrapperElement);
			imageWrapperElement.inject(boardElement);
			
			//Create div containing the member name
			nameElement = new Element('div', {'class':'text'});
			nameElement.appendText(item.firstname + " " + item.lastname);
			nameElement.inject(boardElement);
			
			//Create div containing the restaurant name
			functionElement = new Element('div', {'class':'text'});
			functionElement.appendText(item.role);
			functionElement.inject(boardElement);
			
			//Add events to toggle the image size
			var that = this;
			boardElement.addEvent("mouseenter", function(event) {
				that.toggleImageSize(this, true);
			});
			boardElement.addEvent("mouseleave", function(event) {
				that.toggleImageSize(this, false);
			});
			
			//Add the member div to the others
			boardElement.inject(membersElement);
		}
		
		//Inject the members div in the page
		if(this.wrapper) {
			membersElement.inject(this.wrapper);
		}
		
		//Check if next or previous navigation is allowed
		this.checkNavigationButtons();
	},
	
	start: function() {
		this.currentIndex = 0;
		if(this.wrapper) {
			this.wrapper.empty();
			this.buildRow();
		}
	},
	
	previous: function() {
		if(this.wrapper && (this.currentIndex - 5)>=0) {
			this.currentIndex = this.currentIndex - 5;
			this.wrapper.empty();
			this.buildRow();
		}
	},
	
	next: function() {
		if(this.wrapper && (this.currentIndex + 5)<=this.list.length) {
			this.currentIndex = this.currentIndex + 5;
			this.wrapper.empty();
			this.buildRow();
		}
	},
	
	toggleImageSize: function(member, grow) {
		var image = member.getElement('img');
		var imageSrc = image.getProperty('src');
		var parts = imageSrc.split('/');
		var index = parts.length-1;
		
		if(grow) {
			image.setProperty('src','images/members/large/' + parts[index]);
			member.removeClass("member");
			member.addClass("member_hover");
		} else {
			image.setProperty('src','images/members/small/' + parts[index]);
			member.removeClass("member_hover");
			member.addClass("member");
		}
	}, 
	
	checkNavigationButtons: function() {
		if(this.currentIndex + 5 >= this.list.length) {
			$('next2').set({'styles':{'visibility': 'hidden'}});
		} else {
			$('next2').set({'styles':{'visibility': 'visible'}});
		}
		if(this.currentIndex - 5 < 0) {
			$('previous2').set({'styles':{'visibility': 'hidden'}});
		} else {
			$('previous2').set({'styles':{'visibility': 'visible'}});
		}
		
	}
});