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


/* 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();
    $('galleryTrigger').observe('mouseover', toggleIt);

	//if we are at the photoGalleryPage, roll out the gallery
	var galleryPage = $('photoGalleryPage');
	if(galleryPage != null) {
	    document.observe('load', setupSliderNav());
	}
*/
});

function setupSliderNav() {
    $$('.sliderNavItem').each(function(x) {
    	console.log(x.identify());
    	$(x).observe('mouseover', moveElToEl.bindAsEventListener(this, 'pointer', x));
//      	new Effect.Move($('pointer'), {x:0, y:0, mode: 'absolute', queue:'parallel', duration: .5});
    	new Effect.Move($('pointer'), {x:8, y:8, mode: 'absolute', queue:'parallel', duration: .5});
    });

    //observe('hover', moveElToEl.bindAsEventListener(hello));
//    document.observe('load', moveElToEl($('pointer'), $('countertopsFader')));
//    document.observe('load', moveElToEl($('pointer'), $('sidewalksFader')));
//    document.observe('load', moveElToEl($('pointer'), $('patiosFader')));
}

function moveElToEl(event, elOne, elTwo){
	var data = $A(arguments).each(function(x){console.log(x);})
	
	var elOneOffset = $(elOne).viewportOffset().left;
	var elTwoOffset = $(elTwo).viewportOffset().left;
    console.log('posoff:' + $('pointer').positionedOffset());
    var delta = elTwoOffset - elOneOffset;
    console.log('pointer' + elOneOffset);
    console.log('el2' + elTwoOffset);
    console.log(delta);
    var dur = .75;
    console.log('dur: ' + dur);
    var gamma = $(elTwo).positionedOffset().left; 
    console.log('gamma: ' + gamma);
    var queue = Effect.Queues.get('global');
    queue.each(function(e){e.cancel()});
    /* new Effect.Move(elOne, {x:delta, y:0, mode: 'relative', queue:'parallel', duration: .5}); */
    new Effect.Move(elOne, {x:gamma, y:8, mode: 'absolute', queue:'parallel', duration: dur});
    var elTwoWidth = $(elTwo).getWidth() + 'px';
    console.log('elTwoWidth: ' + elTwoWidth);
    new Effect.Morph(elOne, {style:{width:elTwoWidth}, queue:'parallel', duration: dur}); 
    /* $(elOne).morph({width:elTwoWidth, queue:'parallel'}); */ 
}

function whatever(){
    var e11 = el;
    var e12 = $('sideWalksFader');

    new Effect.Parallel([el1, el2], {duration:3});
    new Effect.Fade(el, {duration:3});
}