// JavaScript Document

//init
window.addEvent('domready', function() {
	var hTables = new TableHighlight('occasions');
	var objFocus = new FormFocus('contact');
	var objTabImage = new tabImage($$('a.image'), $$('img.large'));
	
	if($('photoslide'))
	{
		var objPhotoSlide = new photoSlide($('photoslide'));
	}
});

Cufon.set('fontFamily', 'TheSans');
Cufon.replace('h2');

Cufon.set('fontFamily', 'TheSans-Two');
Cufon.replace('h2.brand');
Cufon.replace('div.spotlight-caravan');
Cufon.replace('#occasions .main table tbody tr td span');
Cufon.replace('#occasions .main table tbody tr td');
Cufon.replace('#verhuur .main table tbody tr td');

//table highlighting
var TableHighlight = new Class({
	initialize: function(table_class) 
	{
		$$('table.' + table_class + ' tbody tr').each(function(el,i) 
		{
			var strCurClass = el.get('class');

			el.addEvent('mouseenter',function() 
			{
				el.removeClass(strCurClass);
				el.addClass('highlight-' + strCurClass);
			});

			el.addEvent('mouseleave',function() 
			{ 
				if(el.hasClass('highlight-' + strCurClass)) 
				{ 
					el.removeClass('highlight-' + strCurClass);
					el.addClass(strCurClass);
				} 
			});
		});
	}
});


var FormFocus = new Class({
	initialize: function(form) 
	{
		var self = this;
				
		$$('form.' + form).getChildren('.f').each(function(elInput,i)
		{
			elInput.addEvents({
				'focus': function()
				{
					self.doFocus(this);
				},
				'blur': function()
				{
					self.doFocus(this);
				}
			});
		});
	},
	doFocus: function(elInput)
	{
		elInput.getPrevious('label').toggleClass('focus');
		elInput.toggleClass('focus');	
	}
});

var tabImage = new Class(
{
	intCurrent:0,
	arrBut:false,
	arrImg:false,
	initialize:function( argArrButtons, argArrImages )
	{
		var self = this;
		
		this.arrBut = $A(argArrButtons);
		this.arrImg = $A(argArrImages);

		$A(this.arrImg).each(function(node,i)
		{
			node.set('morph');
			if( this.intCurrent != i )
			{
				node.morph({opacity:0});
			}
			
			var elLink = node.getParent();
			
			elLink.addEvent('click', function(event)
			{
				event.stop();
				//self.showPhoto(elLink);
			});
			
		}.bind(this));
		
		$A(this.arrBut).each(function(node,i)
		{
			node._parent = this;
			node.i = i;
			node.addEvent('mouseenter',function(event)
			{
				event.stop();
				
				if( this._parent.intCurrent != this.i )
				{
					this._parent.arrImg[ this._parent.intCurrent ].morph({opacity:0});
					this._parent.arrImg[ this.i ].morph({opacity:1});
					
					this._parent.intCurrent = this.i;
				}
			});
			node.addEvent('click',function(event)
			{
				event.stop();
			});

		}.bind(this));
	},
	showPhoto: function(argElPhoto)
	{
		var self = this;
		var objImage = new Image();
		
		// this particular order (onload then src) is needed, else IE will crash (addEvent fails too)
		objImage.onload = function()
		{
			var intScrollTop = getScrollTop();
			var intHeight = getHeight();
			var intImageHeight = objImage.height;
			var intTop = intScrollTop + ((intHeight / 2) - (intImageHeight / 2));

			elOverlayerContent.setStyle('top', intTop + 'px');
			elOverlayerFake.fade(0.8);
			elOverlayerContent.fade('in');
			elOverlayerContent.set('html', '<img src="' + argElPhoto.get('href') + '" alt="" />');
			
			objOverlayer.doShow();
		};
		
		objImage.src = argElPhoto.get('href');
	}
});

var photoSlide = new Class(
{
	elPhotoSlide: null,
	elPrevious: null,
	elNext: null,
	elTotal:null,
	elCurrent: 0,
	elSlideContainer: null,
	intWidth: 145,
	intShowNr: 3,
	objContainerFx: null,
	objPhotos: null,
	elOverlayerDiv1: null,
	elOverlayerDiv2: null,
	initialize:function(argElPhotoSlide)
	{
		var self = this;

		this.elPhotoSlide = argElPhotoSlide;
		this.elTotal = this.elPhotoSlide.getElements('ul li').length;
		this.elSlideContainer = this.elPhotoSlide.getElements('ul')[0];
		this.objContainerFx = new Fx.Tween(this.elSlideContainer);
		this.objPhotos = argElPhotoSlide.getElements('a.image');

		this.elPrevious = this.elPhotoSlide.getElements('.nav-left')[0];
		this.elPrevious.addEvent('click', function(event)
		{
			event.stop();
			self.showPrevious();
		});
		
		this.elNext = this.elPhotoSlide.getElements('.nav-right')[0];
		this.elNext.addEvent('click', function(event)
		{
			event.stop();
			self.showNext();
		});
		
		this.makeViewable();
		this.checkButtons();
	},
	makeViewable: function()
	{
		var self = this;
		
		this.objPhotos.each(function(elPhoto)
		{
			elPhoto.addEvent('click', function(event)
			{
				event.stop();
				self.viewPhoto(elPhoto);
			});
		});
	},
	viewPhoto: function(argElPhoto)
	{
		var self = this;
		var objImage = new Image();
		
		// this particular order (onload then src) is needed, else IE will crash (addEvent fails too)
		objImage.onload = function()
		{
			var intScrollTop = getScrollTop();
			var intHeight = getHeight();
			var intImageHeight = objImage.height;
			var intTop = intScrollTop + ((intHeight / 2) - (intImageHeight / 2));

			elOverlayerContent.setStyle('top', intTop + 'px');
			elOverlayerFake.fade(0.8);
			elOverlayerContent.fade('in');
			elOverlayerContent.set('html', '<img src="' + argElPhoto.get('href') + '" alt="" />');
			
			objOverlayer.doShow();
		};
		
		objImage.src = argElPhoto.get('href');
	},
	showPrevious: function()
	{
		if(this.elCurrent > 0)
		{
			this.elCurrent--;
			this.setPosition();
		}
	},
	showNext: function()
	{
		if((this.elCurrent + this.intShowNr) < this.elTotal)
		{
			this.elCurrent++;
			this.setPosition();
		}
	},
	setPosition: function()
	{
		var intLeft = -1 * (this.intWidth * this.elCurrent);
		this.objContainerFx.start('left', intLeft);
		this.checkButtons();
	},
	checkButtons: function()
	{
		// check if we got 3 or more images
		if(this.elTotal >= 3)
		{
			// hide next?
			if((this.elCurrent + this.intShowNr) == this.elTotal)
			{
				this.elNext.fade('out');
			}
			else
			{
				this.elNext.fade('in');
			}
		}
		else
		{
			// 3 or less
			this.elNext.fade('out');
		}
		
		// hide previous if position = 0
		if(this.elCurrent == 0)
		{
			this.elPrevious.fade('out');
		}
		else
		{
			this.elPrevious.fade('in');
		}	
	}
});