/**************************************************************

	Script		: mooCrumbs
	Version		: 1.0
	Author		: Liam Smart
	Licence		: Open Source MIT Licence
	Usage		: window.addEvent('domready', function(){
					//call mooCrumbs
					if($('mainMenuContainer'))//only triggered if 'mooCrumbs' id is found on page
					{
						var initCrumbs = new mooCrumbs({
							container: $('mooCrumbs'),//menu to apply class to
							initWidth: 50,//initial width of menu (must be greater than 0 to have something to hover over)
							rightMargin: 5,//right margin of each li
							leftMargin: 0,//left margin of each li
							rightPadding: 10,//right padding of each li
							leftPadding: 0,//left padding of each li
							addArrow: true,//adds small arrow.gif to each li apart from last
							injectLi: true,//inject new li to hold the text below
							displayMsg: 'view crumbs:',//set html of new li injected
							background: '#fff'//hex colour or path to an image (eg: 'url(./Images/myBG.gif) left top repeat-x' full CSS style supported
						}).start();
					};
				});

**************************************************************/

//start mooCrumbs class
var mooCrumbs = new Class({

	//implements
	Implements: [Options],

	//options
	options:{
		//options
		initWidth: 50,//initial width of menu (must be greater than 0 to have something to hover over)
		sldDuratation: 700,//duration of slide
		sldTransitionIn: Fx.Transitions.Cubic.easeOut,//transtion type showing crumbs (Expo.easeOut, Expo.easeIn, linear etc)
		sldTransitionOut: Fx.Transitions.Cubic.easeIn,//transtion type hiding crumbs (Expo.easeOut, Expo.easeIn, linear etc)
		rightMargin: 5,//right margin of each li
		leftMargin: 0,//left margin of each li
		rightPadding: 10,//right padding of each li
		leftPadding: 0,//left padding of each li
		addArrow: true,//adds small arrow.gif to each li apart from last
		pathToArrow: './Graphics/mc_Components/Arrow.gif',//provide path to arrow image (remember and use 'Arrow_reverse.gif' if reverse option is set to true
		posArrow: 'right',//position the arrow on the right or left of the li
		injectLi: true,//inject new li to hold the text below
		displayMsg: 'view crumbs:',//set html of new li
		reverseSlide: false,//option to have the sliding effect in reverse (right to left)
		background: '#fff'//can be hex colour or path to an image (eg: 'url(./Images/myBG.gif) left top repeat-x' full CSS style supported
	},

	//initialization
	initialize: function(options)
	{
		//set options
		this.setOptions(options);
	},
	
	//start the mooCrumbs
	start: function()
	{
		//declare variables
		var mainUl = this.options.container.getElement('ul');
		var eachLi = this.options.container.getElements('li');
		var lastLiWidth = 0;
		var fullWidth = 0;
		var newCoordsLeft = new Array();//array to store left coordinates in
		
		//set styles of the menu container to hide crumbs now we know javascript is enabled
		this.options.container.setStyle('overflow','hidden');
		
		//inject new li into menu to be used as button
		if(this.options.injectLi == true)
		{
			var newLi = new Element('li').inject(mainUl,'top');
			newLi.addClass('newLi');
			newLi.setStyles({
				'padding-right':this.options.rightPadding,
				'padding-left':this.options.leftPadding
			},this);
			if(this.options.background != null)
			{
				newLi.setStyles({
					'background':this.options.background,
					'position':'relative'
				});
			};
			if(this.options.reverseSlide == true)
			{
				newLi.setStyle('float','right');
			};
			newLi.set('html',this.options.displayMsg);
			fullWidth = newLi.getSize().x;
			this.options.initWidth = fullWidth;
		};
		
		//loop through each li setting new properties
		eachLi.each(function(el,i)
		{
			//float each li right if reverse option is true
			if(this.options.reverseSlide == true)
			{
				el.setStyle('float','right');
			};
			
			//check whether its last li or not
			if(i < eachLi.length-1)
			{
				//add arrow if set to true in the options
				if(this.options.addArrow == true)
				{
					el.setStyles({
						'background':'url('+this.options.pathToArrow+') '+this.options.posArrow+' no-repeat'
					});
				};
				
				//its not the last li so add margins and padding
				el.setStyles({
					'margin':'0 '+this.options.rightMargin+'px 0 '+this.options.leftMargin+'px',
					'padding-right':this.options.rightPadding+'px',
					'padding-left':this.options.leftPadding+'px'
				});
				
				//update full width variable
				fullWidth = fullWidth + el.getSize().x + this.options.rightMargin + this.options.leftMargin;
			}
			else
			{
				//it is the last li so dont add margins and padding but still update full width
				fullWidth = fullWidth + el.getSize().x;
			};
		},this);
	
		//set styles of the UL inside the container
		mainUl.setStyle('width',fullWidth+5);
		
		//(if reverse option is selected float it right)
		if(this.options.reverseSlide == true)
		{
			mainUl.setStyle('float','right');
		};
		
		//grab and store their coordinates
		eachLi.each(function(el,i)
		{
			//all the li's apart from last one
			if(i < eachLi.length-1)
			{
				//save left coordinate
				newCoordsLeft[i] = (fullWidth+(this.options.rightPadding+this.options.leftPadding+this.options.leftMargin+this.options.rightMargin))-(el.getCoordinates().left-mainUl.getCoordinates().left);
			};
		},this);
		
		//shift all li's (now we have the full width of the menu and each li's coordinates) so they arent seen
		eachLi.each(function(el,i)
		{
			//apply new negative margin to each li apart from last one as that is your current location (and shouldnt be a link)
			if(i < eachLi.length-1)
			{
				//check what way to pull the li's
				if(this.options.reverseSlide != true)
				{
					el.setStyle('margin-left','-'+newCoordsLeft[i]+'px');
				}
				else
				{
					el.setStyle('margin-right','-'+newCoordsLeft[i]+'px');
				};
			};
		},this);

		//add event listener to the container so it acts as a button
		this.options.container.addEvents
		({
			'mouseenter': function()
			{
				//need to loop through each li shifting it back to original position
				eachLi.each(function(el,i)
				{
					//create effect
					var hoverOn = new Fx.Morph(el,{duration:this.options.sldDuratation,transition:this.options.sldTransitionIn,link:'cancel'});
					
					//all the li's apart from last one
					if(i < eachLi.length-1)
					{
						hoverOn.start({
							'margin-left': this.options.leftMargin,
							'margin-right': this.options.rightMargin
						});
					};
				},this);
			}.bind(this),
			
			'mouseleave': function()
			{
				//need to loop through each li shifting it out of sight
				eachLi.each(function(el,i)
				{
					//create effect
					var hoverOff = new Fx.Morph(el,{duration:this.options.sldDuratation,transition:this.options.sldTransitionOut,link:'cancel'});
					
					//all the li's apart from last one
					if(i < eachLi.length-1)
					{
						if(this.options.reverseSlide != true)
						{
							hoverOff.start({
								'margin-left': '-'+newCoordsLeft[i]+'px'
							});
						}
						else
						{
							hoverOff.start({
								'margin-right': '-'+newCoordsLeft[i]+'px'
							});
						};
					};
				},this);
			}.bind(this)
		},this);
	}
});