var interval = {};

var Icon = Class.create({

	initialize: function(iconDiv,iconImage,iconImageGrey,iconLogo,iconTitle,iconText,iconActive) {
		this.iconDiv = iconDiv;
		this.iconImage = iconImage;
		this.iconImageGrey = iconImageGrey;
		this.iconLogo = iconLogo;
		this.iconTitle = iconTitle;
		this.iconText = iconText;
		this.iconActive = true;
		this.cache;
	},
	
	switchImage: function(iconImageGrey,what) {
			
		if(what==1) {
			this.cache = this.iconImageGrey.readAttribute('src');
			iconImageGrey.writeAttribute('src',this.iconLogo.readAttribute('src'));
		} else {
			iconImageGrey.writeAttribute('src',this.cache);
		}
		
	}
	
});
	
var iconSlider = Class.create({

	// cons
	initialize: function() {
	
		
		this.items = new Array();
		this.itemPageCount = 1;
		this.currentVisibleIndex = 1;
		this.readyState = true;
		this.toolTipLeftMargin = 0;
		this.totalItems = 0;
		this.lastMoveDiv;
	},
	
	addIcon: function(Icon) {
	
		this.items.push(Icon);
		
	},
	
	showIcons: function() {
		this.items.each(function(item) {
		
			
		});
	},
	
	setAmount: function(amount,totalItems) {
		this.totalItems = totalItems;
		this.amount = amount;
		this.maxPages = (totalItems / this.amount).ceil();
		
	
		
	},

	slideIn: function() {
		
		
		
		new Effect.Move($('tableProjects'), { x: 0, y: 0, mode: 'absolute'});
	
	},
	
	resetItems: function() {
	
		
		
	},	
	
	resetReadyState : function() {
	
		iconSlider.readyState = true;	
	
	},
	
	nextItems: function(method) {
	
	
	
		this.itemPageCount = this.itemPageCount + 1;
		
		if(this.maxPages == this.itemPageCount) {
			// disable volgende button
			$('nextSliderLink').className = 'disabled';
			
			// het aantal items opde laatste pagina is het totaal aantal paginas maal 5
			var totalPagesItems = this.itemPageCount*5;
			var itemsLastPage = 5 - (totalPagesItems - this.totalItems);
		
		
			
			var moveDiv = 84*itemsLastPage;
		} else {
			var moveDiv = 420;
		}
		this.lastMoveDiv = moveDiv;
		// verplaatst de div precies 420 pixels
		var lastpos = $('tableProjects').style.left.replace("px","");
		
		var newPos = lastpos - moveDiv;
	
		new Effect.Move($('tableProjects'), { x: newPos, y: 0, mode: 'absolute'});
		// set de css positie
	},
	
	prevItems: function() {
		
		if(this.lastMoveDiv !== 420 && this.lastMoveDiv !== -420) {
			var dif = 420 - this.lastMoveDiv;
			var movePrevDiv = 420 - dif;
			this.lastMoveDiv = 420; // reset
		} else {
			var movePrevDiv = 420;
		}

		this.itemPageCount = this.itemPageCount - 1;
		
		// verplaatst de div precies 420 pixels
		var lastpos = $('tableProjects').style.left.replace("px","");
		
		if(lastpos == -420) {
			$('prevSliderLink').className = 'disabled';
		}
		var newPos = Math.floor(lastpos) + movePrevDiv;

		new Effect.Move($('tableProjects'), { x: newPos, y: 0, mode: 'absolute'});	
		
	},
	
			
	generateTooltip: function(item) {
		
		
		if($('tooltipHolder')) {
			// start positie van de tooltip is het midden van de image
			var imagePosition = item.iconDiv.cumulativeOffset();
			
			// divPosLeft is afhankelijk van de breedte van de image
			var imgWidth = item.iconImageGrey.readAttribute('width');
			
			var divPosLeft = (imagePosition.left - 370);
		
			
			var ttDiv = new Element('div', {'class':'projToolTip'});
			
			ttDiv.style.left = divPosLeft+'px';
			ttDiv.style.bottom = '100px';
			
		} else {
			
			// positioneer op een andere manier
			// start positie van de tooltip is het midden van de image
			var imagePosition = item.iconDiv.cumulativeOffset();
			
			// divPosLeft is afhankelijk van de breedte van de image
			var imgWidth = item.iconImageGrey.readAttribute('width');
		
			var divPosLeft = (imagePosition.left - 375);
	
			var divPosTop = 620 - (imagePosition.top + 85);
			
			var ttDiv = new Element('div', {'class':'projToolTip'});
			ttDiv.style.left = divPosLeft+'px';
			ttDiv.style.bottom = divPosTop+'px';
		}
		
		ttDiv.innerHTML = '<div class="toolTipTop"></div><div class="toolTipCenter"><table><tr><td><img src="'+item.iconImage.readAttribute('src')+'" class="thumb"/></td><td>'+item.iconText+'</td></tr></table></div><div class="clear"></div><div class="toolTipBottom"></div>';
	
		if($('tooltipHolder')) {
				
			$('tooltipHolder').appendChild(ttDiv);
		} else {
			$('defaultVervolg').appendChild(ttDiv);

		}

		
		
		return ttDiv;
	},
	
	initTooltip: function() {
		
		this.items.each(function(itemObject) {
			
			
			itemObject.iconDiv.observe('mouseover',function(event) {
			
				
				this.lastTooltip = iconSlider.generateTooltip(itemObject);
				
			});
			
			itemObject.iconDiv.observe('mouseout',function(event) {
			
				this.lastTooltip.remove();
				
			});
			
		});
	
	}
	
	
	
}); // end class definition