Event.observe(window, 'load', function()
{
	if ($('topmenu'))
    {
//		newNavigator = new NavigatorCollection();
//		newNavigator.getNavigator(
//		{
//			'id'					: "topmenu",
//			'submenu'				: "downblind",
//			'effect'				: "slide",
//			'autocollapsechildren'	: true,
//			'effectopenspeed'		: 300,
//			'effectclosespeed'		: 200
//		});
		
		newMenuCollection = new MenuCollection('topmenu');
    }
	
	if ($('carrousel_1')) { var portfolioscroll = new PortfolioScroll('carrousel_1', 1); }
	if ($('carrousel_2')) { var portfolioscroll = new PortfolioScroll('carrousel_2', 2); }
	if ($('carrousel_3')) { var portfolioscroll = new PortfolioScroll('carrousel_3', 3); }
	
	if ($('map')) { loadGoogleMaps(); }
	
	if ($('block_right').select('.errors').length > 0)
	{
		$('errormessage').style.display = 'block';
	}
});

function loadGoogleMaps()
{
	if (GBrowserIsCompatible())
	{
		var map = new GMap2(document.getElementById("map"));
			map.addControl(new GSmallMapControl());
			map.setCenter(new GLatLng(51.94732, 4.86526), 15);
			
		var marker = new GMarker(new GLatLng(51.94732, 4.86526));
		
			GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<div style=\"font-family:arial;font-size:12px;\"><b>Reprovinci</b><br>Achterwetering 31<br>2871 RK Schoonhoven<br>T 0182 - 38 42 33</div>"); });
        
			map.addOverlay(marker);
	}
}

var MenuCollection = Class.create(
{
	initialize: function(id)
	{
		this.ul	= null;
		this.id	= id;
		
		// find root ul
		this.findroot();

		// set all ul's to display block
		this.ul.select('ul').each(function(ul) { ul.show(); }.bind(this));
		
		// all
		this.ul.childElements().each(function(li)
		{
			// div's 
			var div = li.down('div'); if(div) { div.hide(); }
			
			var menuitem	= new MenuItem(li, div);
			
			if (li.hasClassName('active'))
			{
				menuitem.activated = true;
			}
			
			this.addBehaviour(menuitem);
			
		}.bind(this));
	},
	findroot: function()
	{
		//findroot vind uit het ul element aan de hand van het id
		if($(this.id).tagName != "UL")
		{
			this.id = $(this.id).down('ul').id;
			this.ul = $(this.id);
		}
		else
		{
			this.ul = $(this.id);
		}
	},
	addBehaviour: function(menuitem)
	{
		if (menuitem.animationcontainer)
		{
			Event.observe(menuitem.id, 'mouseover', function(event) { menuitem.slideOut(); }.bind(this));
			Event.observe(menuitem.id, 'mouseout', function(event) { menuitem.onmouseover = false; window.setTimeout(function(){menuitem.slideIn();}.bind(this), 100); }.bind(this));
		}
	}
});

var MenuItem = Class.create(
{
	initialize: function(elm, animationcontainer)
	{
		this.elm				= elm;
		this.id					= elm.id;
		
		this.opened				= false;
		this.closed				= true;
		
		this.onmouseover		= false;
		
		this.activated			= false;
		
		this.animationcontainer	= animationcontainer;
		
		this.parentid;
	},
	slideOut: function()
	{
		this.onmouseover = true;
		
		if (this.opened == false && this.closed == true)
		{
			this.elm.addClassName('active');
			
			this.closed = false;
			this.opened = true;
			
			Effect.SlideDown(this.animationcontainer,{duration:0.4, queue: { position: 'end', scope: this.id, limit:0 }});
		}
	},
	slideIn: function()
	{
		if (this.onmouseover == false && this.opened == true && this.closed == false)
		{
			if (!this.activated)
			{
				this.elm.removeClassName('active');
			}
			
			this.closed = true;
			this.opened = false;
			
			Effect.SlideUp(this.animationcontainer,{duration:0.2, queue: { position: 'end', scope: this.id, limit:0 }});
		}
	}
});
		

var PortfolioScroll = Class.create(
{
	initialize: function(id, nr)
	{
		if ($A($(id).getElementsByClassName('portfolio_list')).length > 0)
		{
			this.frames 	= $A($(id).getElementsByClassName('portfolio_list'));
		}
		else
		{
			this.frames 	= $A($(id).getElementsByClassName('small'));
		}
		
		this.nr				= nr;
		
		this.frame			= 1;
		this.frame_count	= this.frames.length;
		this.frame_width	= 0;
		
		var width			= 0;

		// findout the frame which is selected
		
		if ($('portfolio_pagecount_' + this.nr))
		{
			var bullets			= $A($('portfolio_pagecount_' + this.nr).getElementsByClassName('dot'));
			
			bullets.each(function(bullet, index)
			{
				if (bullet.hasClassName('active'))
				{
					var id 		= bullet.id.split('_');
					this.frame 	= parseInt(id[1]);
				}
			}.bind(this));
		}
		
		// calculate the width of the carrousel...
		this.frames.each(function(frame, index)
		{
			this.frame_width	= frame.getWidth() + parseInt(frame.getStyle('margin-left')) + parseInt(frame.getStyle('margin-right'));
			width 				= width + frame.getWidth();
		}.bind(this));
		
		$('carrousel_images_' + this.nr).style.width = width + 'px';
		
		// attach event to button up and down
		this.attachEventsToButtons();
		
		// attach event to bullets
		this.attachEventsToBullets();
		
		// attach event to viewcard
		this.attachEventsToViewCard();
	},
	attachEventsToButtons: function()
	{
		$('button_right_' + this.nr).stopObserving();
		$('button_left_' + this.nr).stopObserving();
		
		// next button
		if (this.frame_count > 1 && this.frame < this.frame_count)
		{
			// add classname
			$('button_right_' + this.nr).addClassName('button_right');
			$('button_right_' + this.nr).removeClassName('button_right_inactive');
			
			// attach the events
			Event.observe('button_right_' + this.nr, 'mouseover', function(event) { $('button_right_' + this.nr).addClassName('button_right_active'); }.bind(this));
			Event.observe('button_right_' + this.nr, 'mouseout', function(event) { $('button_right_' + this.nr).removeClassName('button_right_active'); }.bind(this));
			Event.observe('button_right_' + this.nr, 'click', function(event) { this.goToFrame(this.frame + 1); }.bind(this));
		}
		else
		{
			$('button_right_' + this.nr).addClassName('button_right_inactive');
			$('button_right_' + this.nr).removeClassName('button_right');
			$('button_right_' + this.nr).removeClassName('button_right_active');
		}
		
		// previous button
		if (this.frame_count > 1 && this.frame > 1)
		{
			// add classname
			$('button_left_' + this.nr).addClassName('button_left');
			$('button_left_' + this.nr).removeClassName('button_left_inactive');
			
			// attach the events
			Event.observe('button_left_' + this.nr, 'mouseover', function(event) { $('button_left_' + this.nr).addClassName('button_left_active'); }.bind(this));
			Event.observe('button_left_' + this.nr, 'mouseout', function(event) { $('button_left_' + this.nr).removeClassName('button_left_active'); }.bind(this));
			Event.observe('button_left_' + this.nr, 'click', function(event) { this.goToFrame(this.frame - 1); }.bind(this));
		}
		else
		{
			$('button_left_' + this.nr).addClassName('button_left_inactive');
			$('button_left_' + this.nr).removeClassName('button_left');
			$('button_left_' + this.nr).removeClassName('button_left_active');
		}
	},
	attachEventsToBullets: function()
	{
		if ($('portfolio_pagecount_' + this.nr))
		{
			// search for all bullets
			var bullets			= $A($('portfolio_pagecount_' + this.nr).getElementsByClassName('dot'));
			
			bullets.each(function(bullet, index)
			{
				Event.observe(bullet, 'click', function(event) { this.goToFrame(index + 1); }.bind(this));
			}.bind(this));
		}
	},
	attachEventsToViewCard: function()
	{
		if ($('viewcard'))
		{
			Event.observe('viewcard', 'mouseover', function(event) { $('viewcard').addClassName('viewcard_hover'); }.bind(this));
			Event.observe('viewcard', 'mouseout', function(event) { $('viewcard').removeClassName('viewcard_hover'); }.bind(this));
			Event.observe('viewcard', 'click', function(event) { this.goToFrame(2); }.bind(this));
		}
	},
	nextFrame: function()
	{
		var new_frame		= this.frame + 1;
		
		this.goToFrame(new_frame);
	},
	previousFrame: function()
	{
		var new_frame		= this.frame - 1;
		
		this.goToFrame(new_frame);
	},
	slide: function()
	{
		
	},
	goToFrame: function(frame)
	{
		if (this.frame != frame)
		{
			var forward			= (frame > this.frame) ? true : false;
			var frame_current	= this.frame;
			var frame_steps		= this.frame - frame;
			
			this.frames.each(function(image)
			{
				new Effect.Move(	image, 
									{
										x: (frame_steps * this.frame_width), 
										y: 0, mode: 'relative', 
										duration: 0.4
									}
								);
			}.bind(this));
			
			// keep current frame in memory
			this.frame	= frame;
			
			// reset events for next and previous buttons
			this.attachEventsToButtons();
			
			var path = this.findPath();
			
			// save selected frame into a cookie
			cookie.create('selected_frame_' + this.nr, path + '|' + this.frame);
		}
		
		this.setBull();
	},
	setBull: function()
	{
		if ($('portfolio_pagecount_' + this.nr))
		{
			var bullets			= $A($('portfolio_pagecount_' + this.nr).getElementsByClassName('dot'));
			
			bullets.each(function(bullet, index)
			{
				if (bullet.id == 'dot_' + this.frame) { bullet.addClassName('active'); } else { bullet.removeClassName('active'); }
			}.bind(this));
		}
	},
	findPath: function()
	{
		var location	= window.location.toString();
		var parts		= location.split("/");
		var path		= '';
		
		parts.each(function(part, index)
		{
			if (!part.include('.') && !part.include(':') && part.length > 0)
			{
				path = path + '/' + part;
			}
		}.bind(this));
		
		return path;
	}
});