/******************************************************************************
* autoEffects 										    	  1st October, 2009
* 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.
*
* Supports;
*
*	+ Effects; rollover, mouse click
+	+ Ability to link rollover of one or more elements to a seperate image 
*	+ 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 = {
	
	glueChar:		'-',			// how the effect images are saved, 
									// e.g. image-over.gif, image_over.gif 
									   
	overGfx: 		'over',			// the preset name for the rollover graphic,
									// e.g. image-over.jpg, image-roll.jpg 
									   
	downGfx: 		'down',			// the preset name for the mousedown graphic,
									// e.g. image-down.jpg, image-click.jpg 
									   
	allowDiv:		true,			// can divs have rollover 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({
	
	/* graphic filename values */
	autoEffects_baseGfx: '',
	autoEffects_baseExt: '',
	
	/* other variables */
	autoEffects_isEnabled: false,
	autoEffects_hasRoll: false,
	autoEffects_hasClick: false,
	autoEffects_hasLink: false,
	
	/* initialisation */
	autoEffects: function(){
		
		/* parse filename */
		this.autoEffects_Parse();
		
		this.autoEffects_isEnabled = true;
		
		/* assign event handlers */
		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.hasClass('link')){
			this.addEvent('mouseenter', this.autoEffects_mouseOver.bindWithEvent(this));
			this.addEvent('mouseleave', this.autoEffects_mouseOut.bindWithEvent(this));
			this.autoEffects_hasLink = $$('.'+this.get('id'));
		}
		
		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);
			}
		} 
		
	},
	
	/* enable or disable the use of effects */
	autoEffects_Enable: function(){
		this.autoEffects_isEnabled = true;
	},
	
	autoEffects_Disable: function(){
		this.autoEffects_isEnabled = false;
	},
	
	/* 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: 4, fileName.length - ((Browser.Engine.trident) ? 7 : 5));
		} 
		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;
			}
		}
		
		/* 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(){
		if(this.autoEffects_isEnabled){
			if(this.autoEffects_hasRoll){
				this.autoEffects_setState('over');
			}
			else if(this.autoEffects_hasLink){
				this.autoEffects_hasLink.autoEffects_setState('over');
			}
			if(autoEffects.allowCursor) { 
				this.addClass('autoEffects-cursor'); 
			}
		}
	},
	
	autoEffects_mouseOut: function(){
		if(this.autoEffects_isEnabled){
			if(this.autoEffects_hasRoll){
				this.autoEffects_setState('default');
			}
			else if(this.autoEffects_hasLink){
				this.autoEffects_hasLink.autoEffects_setState('default');
			}
			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');
		}
	}
	
});

/* initialise autoEffects once page loaded */
window.addEvent('load', function(){
	
	$$('.autoEffects').autoEffects();
	
	if(Browser.Engine.trident){
		if(Browser.Engine.version == 4){
			//DD_belatedPNG.fix('div');
			//DD_belatedPNG.fix('img');
		}
	}
	
});