/* Event that toggles the id given with a slide effect */
function toggleIt(){
   new Effect.SlideDown('innerGalleryContainer', 'slide');
   $('galleryTrigger').stopObserving('mouseover', toggleIt);
}

/* Event that highlights and hides the photoTip on the page */
function photoTip(){
	$('photoTip').hide();
	new Effect.Appear('photoTip',{duration:3, queue:{position: 'parallel', scope: 'photoTip'}, delay:7});
	new Effect.Fade('photoTip',{duration:5, queue:{position: 'end', scope: 'photoTip'}});
}

/* This is the initial event loader which calls things when the dom is ready */
document.observe('dom:loaded', function() {
    // initially hide all containers for tab content
    $('innerGalleryContainer').hide();

	//if we are at the photoGalleryPage, roll out the gallery, highliht the tip
	var galleryPage = $('photoGalleryPage');
	if(galleryPage != null) {
	    $('galleryTrigger').observe('mouseover', toggleIt);
	    setupSliderNav();
	    toggleIt();
	    photoTip();
	}
});

/* Slider moving helpers */
var mover = {
	//move the pointer to me
	fx: function(event) {
		var me = Event.element(event);
		moveElToEl($('pointer'), $(me));
	},
	//move the pointer to the home base
	gx: function() {
	    var pointerBase;
	    $$('.sliderNavItem').each(function(x){
	    	if($(x).hasClassName('pointerBase')) {
				pointerBase = x;
	    	}
	    });
		moveElToEl($('pointer'), $(pointerBase));
	}
};
mover.me = mover.fx.bindAsEventListener(mover);
mover.homeBase = mover.gx.bindAsEventListener();


/* Setup Slider Navigation on the Photo Gallery Page */
function setupSliderNav() {
	//fade everything out
	var itemBoxes = $$('.itemBox', '.itemBoxAlt');
	itemBoxes.each(function(x){x.hide()});

	//find the current box and fade it in
	itemBoxes.each(function(x){
		if($(x).hasClassName('currentSelected')) {
			new Effect.Appear($(x).identify(), {duration: 1});
		}
	});

	//move to the hovered item, move back to what we had selected, onclick Fade current and bring in new one
    $$('.sliderNavItem').each(function(x) {
    	//move the pointer to the element that was hovered over
    	$(x).observe('mouseover', mover.me);
		//move the pointer back to the home base after the cursor leaves
    	$(x).observe('mouseout', mover.homeBase);
    	//onclick fade currentSelected box and fade in newly selected one 
    	var fadeInEl = $(x).identify() + 'Box';
    	$(x).observe('click', fadeOutIn.bindAsEventListener(this, $(fadeInEl)));
    });
    
    //move to default position
//	new Effect.Move($('pointer'), {x:8, y:8, mode: 'absolute', queue:{position: 'parallel', scope: 'sliderScope', limit:2}, duration: .5});
	
	//onClick, set new pointerBase
	
}

/* Move elOne to elTwo */
function fadeOutIn(event, elOne){
	var newPointerBase = Event.findElement(event, 'div');
	var items = $$('.itemBox', '.itemBoxAlt', '.sliderNavItem');
	var currentSelected;
	var pointerBase; 
	items.each(function(x){
		if($(x).hasClassName('currentSelected')) {
			currentSelected = $(x);
		} else if($(x).hasClassName('pointerBase')) {
			pointerBase = $(x);
		}
	});
	//change class names currentSelected
	currentSelected.removeClassName('currentSelected');
	$(elOne).addClassName('currentSelected');

	//fix the slider navigation to start with the selected item
	$(pointerBase).removeClassName('pointerBase');
	$(newPointerBase).addClassName('pointerBase');


    //fade out any box that happens to be visible except for the one to fade in.
    var itemBoxes = $$('.itemBox', '.itemBoxAlt');
    itemBoxes.each(function(x){
    	if(elOne.identify() != $(x).identify()) {
			new Effect.Fade($(x), {duraton: .5, queue:'parallel'});
    	}
	});
	
	//finally, appear the correct boxes	
	new Effect.Appear(elOne.identify(), {duration: .5, queue:'end'});
}	

/* Move elOne to elTwo */
function moveElToEl(elOne, elTwo){
    var dur = .75;
    var gamma = $(elTwo).positionedOffset().left;
    //get any events in the sliderScope queue and cancel them
    var queue = Effect.Queues.get('sliderScope');
    queue.each(function(e){e.cancel()});
    //Move and morph the pointer to fit.
    new Effect.Move(elOne, {x:gamma, y:8, mode: 'absolute', queue:{position: 'parallel', scope: 'sliderScope', limit:2}, duration: dur});
    var elTwoWidth = $(elTwo).getWidth() + 'px';
    new Effect.Morph(elOne, {style:{width:elTwoWidth}, queue:{position: 'parallel', scope: 'sliderScope', limit:2}, duration: dur}); 
}