var homeScroller;
var spriteImageHeight = 373; // Height of 1 image in pixels
var spriteImageContent = { // Team sprite locations
	dimmy: 1,
	ingrid: 2,
	mark: 3,
	frederieke: 4,
	henk: 5,
	ilse: 6,
	patrick: 7,
	steven: 8

}; 
var actionButtonMorpher = null;
var actionButtonContentMorpher = null;
var actionButtonDirection = 1;
var isIE = false;

window.addEvent('domready', function() {
	// Activate CSS3 shadow if you're not using a buggy IE browser
	// Goto: getfirefox.com to get a decent browser.
    if ($('interesse')) {
    	if (!Browser.Engine.trident) {
    		$('interesse').set('class', 'interesse-css3');
    	} else {
    		isIE = true;	
    	}
    	var actionButtonWidth = $('interesse').getStyle('width');
     }

	// Chrome lineheight fix
    if ($('scroller-buttons')) {
    	if (window.navigator.userAgent.toString().indexOf('Chrome') != -1 || window.navigator.userAgent.toString().indexOf('Safari') != -1) {
    		$('scroller-buttons').setStyle('line-height', '1px');	
    	}
    }
	
	if ($('home_portfolio')) {
		// Init the scroller
		homeScroller= new scroller({scrollDelay: 3000});
		
		var image = new Asset.image('/gfx-NIEUW/fade/team_sprite.jpg');
		
		// Make the team hoverable ;-)
		if ($('home_team')) {
			var elements = $('home_team').getElements('a[class^=medewerker]');
			elements.each(function(item, key) {
				var itemClass = item.get('class').split('-');	
				itemClass = itemClass[1].split(' ');
	
				item.addEvent('mouseover', function() {
					var itemClass = this.get('class').split('-');
					itemClass = itemClass[1].split(' ');	
					var spriteLocation = eval('spriteImageContent.'+itemClass[0]);
					spriteLocation = (spriteLocation * spriteImageHeight);
	
					$('home_team').setStyle('background-position', '0px -'+spriteLocation+'px');
				});
				
				item.addEvent('mouseleave', function() {
					$('home_team').setStyle('background-position', '0px 0px');
				});
			});		
		}
		
		new Tips('.teamTip');
	}
	
	actionButtonMorpher = new Fx.Morph($('interesse'), {
		link: 'cancel',
		duration: 350,
		transition: 'bounce:out',
		onComplete: function() {
			if (actionButtonDirection == 1) {
				$('interesse-content').setStyle('display', 'block');	
				actionButtonContentMorpher.start({opacity: 1});	
			}
		},
		onStart: function() {
			if (actionButtonDirection == 0) {
				actionButtonContentMorpher.start({opacity: 0});	
			}
		}
	});
	
	actionButtonContentMorpher = new Fx.Morph($('interesse-content'), {
		link: 'cancel',
		duration: 250,
		onComplete: function() {
			if (actionButtonDirection == 0) {
				$('interesse-content').setStyle('display', 'none');
				actionButtonMorpher.start({
					width: actionButtonWidth,
					'-moz-box-shadow': '2px 0px 5px #666',
					'-webkit-box-shadow': '2px 0px 5px #666',
					'box-shadow': '2px 0px 5px #666'
				});
			}
		}
	});
	
	$('interesse-content').setStyles({
		opacity: 0
	});
	
	// Activate the "action button"
	$('interesse').addEvent('mouseenter', function() {
		actionButtonDirection = 1;
		actionButtonMorpher.start({
			width: 300
		});
	});
	
	$('interesse').addEvent('mouseleave', function() {
		actionButtonDirection = 0;
		actionButtonContentMorpher.start({
			opacity: 0
		});
	});
});

var scroller = new Class({
	options: {
		scrollDelay: 3000
	},
	initialize: function(options) {
		this.setOptions(options);

		this.buttonContainer = $('scroller-buttons');
		this.currentElement = 0;
		
		this.timer = null;
		this.loading = false;
		
		// Fetch all elements
		this.elements = $$('div[class^=random_portfolio]');
		this.elements.setStyles({
			'display': 'none'
			//'position': 'relative'
		});
		
		this.elements[0].setStyle('display', 'block');
		
		for(var i = 0; i < this.elements.length; i++ ){
			this.buttonContainer.set('html', this.buttonContainer.get('html') + '<br /><br /><a style="cursor: pointer;" onmouseover="homeScroller.hover(this, true);" onmouseout="homeScroller.hover(this, false);" onclick="homeScroller.showElement('+i+', true);">&bull;</a>');
		}
		
		this.buttonContainer.getElements('a')[0].setStyle('color', '#0989ca');
		this.buttonContainer.getElements('a')[0].addClass('active');
		
		this.buttonContainer.addEvent('mousedown', function(event) {
			event.stop();
			event.preventDefault();
			return false;
		});
		
		this.timer = (function() {
			this.scrollElement();
		}.bind(this)).periodical(this.options.scrollDelay);
	},
	scrollElement: function() {
		var nextElement = (this.currentElement+1);
		if (nextElement >= (this.elements.length)) {
			nextElement = 0;	
		}
		this.showElement(nextElement, false);
	},
	showElement: function(i, manualClick) {
		if (i == this.currentElement || this.loading) {
			return true;	
		}
		if (manualClick) {
			$clear(this.timer);	
		}
		this.loading = true;
		this.currentElement = i;
		this.buttonContainer.getElements('a').setStyle('color', '#cccccc');
		this.buttonContainer.getElements('a').removeClass('active');
		this.buttonContainer.getElements('a')[i].setStyle('color', '#0989ca');
		this.buttonContainer.getElements('a')[i].addClass('active');
		this.elements.each(function(item, key) {
			if (item.getStyle('display') == 'block') {
				new Fx.Morph(item, {
					duration: 180,
					transition: 'sine:out',
					onComplete: function() {
						item.setStyle('margin-left', 0);
						homeScroller.elements[i].setStyles({
							'opacity': 0,
							'display': 'block',
							'margin-left': 0
						});
						new Fx.Morph(homeScroller.elements[i], {
							duration: 350,
							transition: 'sine:out',
							onComplete: function() {
								homeScroller.loading = false;	
							}
						}).start({
							'margin-left': 0,
							'opacity': 1
						});
					}.bind(this)
				}).start({
					'margin-left': -60,
					'opacity': 0
				});
			}
		}.bind(this));
	},
	hover: function(el, mouseover) {
		if (el.hasClass('active')) {
			return true;	
		}
		if (mouseover) {
			el.setStyle('color', '#aaaaaa');	
		} else {
			el.setStyle('color', '#cccccc');	
		}
	}
});
scroller.implement(new Events);
scroller.implement(new Options);