var SlideX = new Class({
  Implements: Events,
	
	  initialize: function(theID, theMenu){
  
	  this.mover = $(theID);
		this.moverDaddy = this.mover.getParent().getParent(); // our overflow hidden div
		this.menu = $(theMenu);
		this.menuBacker = this.menu.getElement('.menuBacker');	
		this.menuBackerOffColour = '#636d81';
		this.menuBackerOnColour = '#fff';
		this.morphDuration = 1000;
		this.paneCentreMargin = 0;
		this.thePanelMorph = new Fx.Morph(this.mover, {duration: this.morphDuration, transition: Fx.Transitions.Expo.easeInOut});
		this.theMenuMorph = new Fx.Morph(this.menuBacker, {duration: this.morphDuration, transition: Fx.Transitions.Expo.easeInOut});		
		this.menuItems = this.menu.getElements('a[class=slide]');
		this.thePanels = this.mover.getElements('li');				

		//setup the first one

		this.paneCentreMargin = (this.moverDaddy.getStyle('width').toInt() / 2);
		this.paneCentreMargin = (this.paneCentreMargin - (this.thePanels[0].getStyle('width').toInt() / 2));
		this.thePanelMorph.set({
			'left': '0px',
			'margin-left': this.paneCentreMargin
		});	
		
		//setup the first menu
		this.menuCentreMargin = (this.menuCentreMargin - (this.menuItems[0].getStyle('width').toInt() / 2));
		this.theMenuMorph.set({
			'left': '0px',
			'margin-left': this.menuCentreMargin
		});	
	
		// do opacity
		this.thePanels.each(function(item){	item.set('opacity', '0.3');});
		this.menuBacker.set('opacity', '0.2');
		
		// fade out details if they exist on the others
		this.thePanels.each(function(item){
			if (item.getElement('.details')){
				item.getElement('.details').set('opacity', '0');
			}
		});
	
		
	}, // end initialize
	
	zoomTo: function(toItem){

		this.thePanelMorph.cancel();
		this.theMenuMorph.cancel();
		
		
		
		// PANELS!
		
		// fade the rest
		this.thePanels.each(function(item, index){
			item.tween('opacity', '0.3');
		});
		
		// appear the one we want
		this.thePanels[toItem].tween('opacity', '1');
		
		
		
		var thePanels = this.thePanels;
		var selectedPanel = thePanels[toItem];
		
		
		// then see where we are going...

		
		var toPos = 0;		
		for (var i = 0; i < toItem; i++){
			toPos = (toPos + thePanels[i].getStyle('width').toInt());
			toPos = (toPos + thePanels[i].getStyle('padding-left').toInt());
			toPos = (toPos + thePanels[i].getStyle('padding-right').toInt());
			toPos = (toPos + thePanels[i].getStyle('margin-left').toInt());
			toPos = (toPos + thePanels[i].getStyle('margin-right').toInt());			
		}

		// then check out where we are
		var curPos = this.mover.getStyle('left').toInt();
		
		//	console.log("current = " + curPos);
		
		// now check out the window size, and halve it for the left margin:
		this.paneCentreMargin = (this.moverDaddy.getStyle('width').toInt() / 2);
		this.paneCentreMargin = (this.paneCentreMargin - (selectedPanel.getStyle('width').toInt() / 2));
		this.paneCentreMargin = (this.paneCentreMargin - (selectedPanel.getStyle('padding-left').toInt() / 2));	
		this.paneCentreMargin = (this.paneCentreMargin - (selectedPanel.getStyle('padding-right').toInt() / 2));			
		this.paneCentreMargin = (this.paneCentreMargin - (selectedPanel.getStyle('margin-left').toInt() / 2));	
		this.paneCentreMargin = (this.paneCentreMargin - (selectedPanel.getStyle('margin-right').toInt() / 2));					
		
		/// check about changing height?
		var toSize = selectedPanel.getScrollSize();
	
	// en route!
		this.thePanelMorph.start({
			'left': [curPos, -toPos],
			'margin-left': this.paneCentreMargin,
			'height' : toSize.y
		});	
		
		// and the parent, to get the height right
		this.mover.getParent().morph({height: toSize.y});
	
		// once we've finished moving
		this.thePanelMorph.addEvent('onComplete', function(){

			// fade out details if they exist on the others
			thePanels.each(function(item){
				if (item.getElement('.details')){
					item.getElement('.details').tween('opacity', '0');
				}
			});
	
			// fade in details if they exist on selected
			if (thePanels[toItem].getElement('.details')){
					thePanels[toItem].getElement('.details').tween('opacity', '1');
			}
		});
		



	//	MENU!
		
		// set other styles to normal
		this.menuItems.each(function(item,index){
			item.setStyle('color', this.menuBackerOffColour);
		});
		
		// set the selected colour
		this.menuItems[toItem].setStyle('color', this.menuBackerOnColour);


		// declare all our menu bits
		var menuItems = this.menuItems;
		var selectedMenu = menuItems[toItem];
		
	
		// then check out where we are
		var curMenuPos = this.menuBacker.getStyle('left').toInt();


		// then see where we are going...
		var toMenuPos = 0;		
		for (var i = 0; i < toItem; i++){
			toMenuPos = (toMenuPos + menuItems[i].getStyle('width').toInt());
			toMenuPos = (toMenuPos + menuItems[i].getStyle('padding-left').toInt());
			toMenuPos = (toMenuPos + menuItems[i].getStyle('padding-right').toInt());
			toMenuPos = (toMenuPos + menuItems[i].getStyle('margin-left').toInt());
			toMenuPos = (toMenuPos + menuItems[i].getStyle('margin-right').toInt());			
		}
		
		// add on the left
		toMenuPos = (toMenuPos + this.menu.getStyle('padding-left').toInt());			


		// check out how wide our current menu item is
		var curMenuWidth = 0;
		var curMenuWidth = (curMenuWidth + this.menuItems[toItem].getStyle('width').toInt());
		curMenuWidth = (curMenuWidth + this.menuItems[toItem].getStyle('padding-left').toInt());
		curMenuWidth = (curMenuWidth + this.menuItems[toItem].getStyle('padding-right').toInt());
		curMenuWidth = (curMenuWidth + this.menuItems[toItem].getStyle('margin-left').toInt());
		curMenuWidth = (curMenuWidth + this.menuItems[toItem].getStyle('margin-right').toInt());		

	
		// en route!
		this.theMenuMorph.start({
			'left': [curMenuPos, toMenuPos],
			'width' : curMenuWidth
		});


		



	}// end zoom
	
});