/******************************************************************************
* autoEffects 										    	    11th June, 2010
* By Phil Carty	(exesios.co.uk)										Version 1.1
*
* When an HTML element is given an autoEffects class, this script automatically 
* handles the special effects and uses filename logic to determine the effect 
* graphics. The end-user doesn't have to do anything to make things like 
* rollovers work other than supply the graphic files.
*
* Supports;
*
*	+ Effects; rollover, mouse click, rollover zoom
*	+ Optional background preloading of effect graphics
*	+ Ability to enable and disable effects at any time
*
* 3rd Party Dependencies; 
*
*	MooTools 1.2 
*
* Examples;
*
*	<img src="logo.png" width="200" height="75" class="autoEffects roll" />
*
*	// Replaced on rollover with "logo-over.png", according to default settings.
*
*   <div class="autoEffects all"></div>
*
*	// Stylesheet definition of background image is replace for rollover.
*
******************************************************************************/

/******************************************************************************
* EDIT - SETTINGS
******************************************************************************/

var autoEffects = {
	
	/* effect file naming */	
	glueChar:		'-',				// how the effect images are saved, 
										// e.g. image-over.gif
								   
	overGfx: 		'over',				// the preset name for the rollover graphic,
										// e.g. image-over.jpg 
									   
	downGfx: 		'down',				// the preset name for the mousedown graphic,
										// e.g. image-down.jpg
									   
	zoomGfx: 		'zoom',				// the preset name for the zoom graphic,
										// e.g. image-zoom.jpg
							
	/* effect styling */											
	zoomCss:		'autoEffects-zoom',	// defines the size and offset of the zoom box
		
	/* effect options */						   
	allowDiv:		true,				// can divs have effects
	allowPreload:	true,				// should effect images be preloaded
	allowCursor:	true				// change cursor to pointer when over
	
};

/******************************************************************************
* DO NOT EDIT - CORE CODE
******************************************************************************/

/* extend elements */
Element.implement({
	
	/* filename */
	autoEffects_baseGfx: 		'',
	autoEffects_baseExt: 		'',
	
	/* elements */
	autoEffects_eZoom: 			false,
	
	/* states */
	autoEffects_isEnabled: 		true,
	autoEffects_isOver: 		false,
	
	/* functionalities */
	autoEffects_hasRoll: 		false,
	autoEffects_hasClick: 		false,
	autoEffects_hasZoom: 		false,
	
	/* initialisation */
	autoEffects: function(){
		
		/* parse filename */
		this.autoEffects_Parse();
		
		/* assign event handlers */
		if(this.hasClass('zoom') || this.hasClass('all')){
			this.addEvent('mousemove', this.autoEffects_mouseMove.bindWithEvent(this));
			this.autoEffects_hasZoom = true;
		}
		
		if(this.hasClass('roll') || this.hasClass('all')){
			this.addEvent('mouseenter', this.autoEffects_mouseOver.bindWithEvent(this));
			this.addEvent('mouseleave', this.autoEffects_mouseOut.bindWithEvent(this));
			this.autoEffects_hasRoll = true;
		}
		
		if(this.hasClass('click') || this.hasClass('all')){
			this.addEvent('mousedown', this.autoEffects_mouseDown.bindWithEvent(this));
			this.addEvent('mouseup', this.autoEffects_mouseUp.bindWithEvent(this));
			this.autoEffects_hasClick = true;
		}
		
		if(!this.autoEffects_hasRoll && autoEffects.allowCursor){
			this.addEvent('mouseenter', this.autoEffects_mouseOver.bindWithEvent(this));
			this.addEvent('mouseleave', this.autoEffects_mouseOut.bindWithEvent(this));
		}
		
		/* preload graphics */
		if(autoEffects.allowPreload){
			if(this.autoEffects_hasRoll){
				//new Asset.image(this.autoEffects_baseGfx + autoEffects.glueChar + autoEffects.overGfx + this.autoEffects_baseExt);
			}
			if(this.autoEffects_hasClick){
				//new Asset.image(this.autoEffects_baseGfx + autoEffects.glueChar + autoEffects.downGfx + this.autoEffects_baseExt);
			}
			if(this.autoEffects_hasZoom){
				//new Asset.image(this.autoEffects_baseGfx + autoEffects.glueChar + autoEffects.zoomGfx + this.autoEffects_baseExt);
			}
		} 
		
		/* additional initialisation */
		if(this.autoEffects_hasZoom){
			
			/* create zoom element with user-defined class */
			this.autoEffects_eZoom = new Element('div', {'class': autoEffects.zoomCss});
			
			/* add image to element */
			this.autoEffects_eZoom.adopt(new Element('img', {
				'src': this.autoEffects_baseGfx + autoEffects.glueChar + autoEffects.zoomGfx + this.autoEffects_baseExt
			}));
			
			/* initial forced styling */
			this.autoEffects_eZoom.setStyles({
				'position': 'absolute',
				'display': 'none',
				'z-index': 1000,
				'overflow': 'hidden',
				'opacity': 0
			});
			
			/* add to document */
			$(document.body).adopt(this.autoEffects_eZoom);
			
		}
		
	},
	
	/* enable or disable the use of effects */
	autoEffects_Enable: function(){
		this.autoEffects_isEnabled = true;
	},
	
	autoEffects_Disable: function(){
		this.autoEffects_isEnabled = false;
	},
	
	/* change image */
	autoEffects_Set: function(fileName){
		
		var tagName = this.get('tag');
		
		if(tagName == 'div' && autoEffects.allowDiv){
			this.setStyle('background-image', 'url('+fileName+')');
		}
		else if(tagName == 'img'){
			this.set('src', fileName);
		}
		
		this.autoEffects();
		
	},
	
	/* initial parsing of filename */
	autoEffects_Parse: function(){
		
		var tagName = this.get('tag');
		var fileName = '';
		
		/* extract graphic filename */
		if(tagName == 'div' && autoEffects.allowDiv){
			fileName = this.getStyle('background-image');
			fileName = fileName.substr((Browser.Engine.trident) ? 5: 5, fileName.length - ((Browser.Engine.trident) ? 7 : 7));
		} 
		else if(tagName == 'img'){
			fileName = this.get('src');
		}
		
		/* determine base graphic and extension */
		this.autoEffects_baseGfx = fileName.substr(0, fileName.length - 4);
		this.autoEffects_baseExt = fileName.substr(fileName.length - 4);
		
	},
	
	/* change the image */
	autoEffects_setState: function(state){
		
		/* build new graphics filename */
		var fileName = this.autoEffects_baseGfx;
		var tagName = this.get('tag');
		
		/* if special state... */
		if(state != 'default'){
			
			fileName = fileName + autoEffects.glueChar;
			
			switch(state){
				case 'over':
					fileName = fileName + autoEffects.overGfx;
					break;
				case 'down':
					fileName = fileName + autoEffects.downGfx;
					break;
				case 'up':
					fileName = fileName + autoEffects.overGfx;
					break;
				default:
					fileName = fileName + state;
					break;
			}
		}
		
		/* add extension */
		fileName = fileName + this.autoEffects_baseExt;
		
		/* assign new value */
		if(tagName == 'div' && autoEffects.allowDiv){
			this.setStyle('background-image', 'url('+fileName+')');
		} 
		else if(tagName == 'img'){
			this.set('src', fileName);
		}
		
	},
	
	/* mouse events */
	autoEffects_mouseOver: function(e){
		this.autoEffects_isOver = true;
		if(this.autoEffects_isEnabled){
			
			if(this.autoEffects_hasRoll){
				this.autoEffects_setState('over');
			}
			
			if(this.autoEffects_hasZoom){
				
				/* set styling */
				this.autoEffects_eZoom.setStyles({
					'left': e.page.x,
					'top': e.page.y,
					'opacity': 0,
					'display': 'block'
				});
				
				/* fade in */
				this.autoEffects_eZoom.fade(1);
				
			}
			
			if(autoEffects.allowCursor) { 
				this.addClass('autoEffects-cursor'); 
			}
			
		}
	},
	
	autoEffects_mouseOut: function(e){
		this.autoEffects_isOver = false;
		if(this.autoEffects_isEnabled){
			
			if(this.autoEffects_hasRoll){
				this.autoEffects_setState('default');
			}
			
			if(this.autoEffects_hasZoom){
				this.autoEffects_eZoom.fade(0);
			}
			
			if(autoEffects.allowCursor) { 
				this.removeClass('autoEffects-cursor'); 
			}
			
		}
	},	
	
	autoEffects_mouseDown: function(){
		if(this.autoEffects_isEnabled){
			this.autoEffects_setState('down');
		}
	},
	
	autoEffects_mouseUp: function(){
		if(this.autoEffects_isEnabled){
			this.autoEffects_setState((this.autoEffects_hasRoll) ? 'over' : 'default');
		}
	},
	
	autoEffects_mouseMove: function(e){
		if(this.autoEffects_isEnabled){
			if(this.autoEffects_hasZoom){
				
				/* calculate focal point */
				var x = (this.autoEffects_eZoom.getScrollSize().x / 100) * 
							((100 / this.get('width')) * (e.page.x - this.getPosition().x)) 
						- (this.autoEffects_eZoom.getSize().x / 2);
						
				var y = (this.autoEffects_eZoom.getScrollSize().y / 100) * 
							((100 / this.get('height')) * (e.page.y - this.getPosition().y)) 
						- (this.autoEffects_eZoom.getSize().y / 2);
						
				/* set to focal point */
				this.autoEffects_eZoom.scrollTo(x, y);
				
				/* set position */
				this.autoEffects_eZoom.setStyles({
					'left': e.page.x,
					'top': e.page.y
				});
				
			}
		}
	}
	
});

function nextImage(currentImage){ 
	this.getChildren()[currentImage].fade(0); 
	newImage = (currentImage == this.getChildren().length - 1) ? 0 : currentImage + 1;
	this.getChildren()[newImage].fade(1);
	nextImage.delay(5000, this, newImage);
}

/* initialise autoEffects once page loaded */
window.addEvent('domready', function(){
	
	$$('.autoEffects').autoEffects();
	
	if($('home')){
		$$('.home-box').addEvent('click', function(){
			window.location = this.getElement('a').get('href');
		});
	}
	
});