function ffade(el,opac){
	switch($type(el)){
		case 'array':
			el.each(function(e){ ffade(e) });
			break;
		case 'element':
			el.get('tween', {
				property: 'opacity',
				link: 'cancel'
			}).start(el.getStyle('opacity')==0?opac:0);
			break;
	}
}

function showLightbox(elem){
	//	Put the appropriate content in the lightbox
	$('lightboxInnerContent').set('html', elem.getNext().get('html'));
	
	//show it
	$('lightboxWrapper').setStyles({
		'height': window.getScrollSize().y,
		'display':'block'
	});
	ffade($('lightboxWrapper'),1);

	var scrollX = document.body.parentNode.scrollLeft;
	var scrollY = document.body.parentNode.scrollTop;
	var lbLeft = (window.getSize().x/2) < ($('lightboxContent').getStyle('width').toInt()/2) ? scrollX : (window.getSize().x/2)-($('lightboxContent').getStyle('width').toInt()/2) + scrollX;
	var lbTop = (window.getSize().y/2) < ($('lightboxContent').getStyle('height').toInt()/2) ? scrollY : (window.getSize().y/2)-($('lightboxContent').getStyle('height').toInt()/2) + scrollY;

	$('lightboxContent').setStyles({
		'left':lbLeft,
		'top':lbTop
	});

	$('lightbox').setStyles({
		'height': window.getScrollSize().y,
		'display':'block'
	});
	ffade($('lightbox'),0.5)
}

Number.implement({
	toNearest: function(num){ return Math.round(this/num)*num }
})

function slideGalleryToPanelN(gallery, panel) {
	var sliderMarginLeft,itemWidth,spacerWidth,slideUnit,boundaryRight,slideTo,
		gSlider = $('gallerySlider-' + gallery),
		gItems = $$('div.galleryItem'),
		gSpacers = $$('div.gallerySpacer');

	sliderMarginLeft = gSlider.getStyle('margin-left').toInt();
	itemWidth = gItems.length > 0 ? gItems[0].getStyle('width').toInt() : 0;
	spacerWidth = gSpacers.length > 0 ? gSpacers[0].getStyle('width').toInt() : 0;
	slideUnit = (itemWidth*3) + (spacerWidth*3);
	// Total width of all items and spacers
	boundaryRight = (gItems.length * -itemWidth) + (gSpacers.length * -spacerWidth);
	// Minus the width of the viewspace so we always fill it.
	boundaryRight += slideUnit;
	
	slideTo = (-slideUnit*(panel)).toNearest(slideUnit);
	
	$('gallerySlider-' + gallery).get('tween', {
		property: 'margin-left',
		link: 'ignore',
		transition: 'quart:in:out',
		duration: 400
	}).start(slideTo)
}

function pageInit() {
	// Learn More button and lightbox setup.
	$(document.body).grab($('lightbox'), 'top');
	$('lightbox').grab($('lightboxWrapper'), 'after');

	$('closeLightbox').addEvents({
		'click': function(e){
			if(e){e.stop()}
			ffade($$('#lightbox','#lightboxWrapper'))
		}
	}).fireEvent('click');

	//	Replace this with the learn more stuff
	$$('.learn-more-red','.learn-more-grey').each(function(item){
		item.getElement('a').addEvent('click', function(e){
			if(e){e.stop()}
			showLightbox(this)
		})
	});

	$$('.menu li').each(function(item){
		item.getElement('a').addEvents({
			'mouseover': function(e,cursor){
				if(e){e.stop()}
				this.setStyle('cursor', $pick(cursor,'pointer'))
			},
			'mouseout': function(e){ this.fireEvent('mouseover',[e,'default']) }
		})
	});


	//	button nav setup for What's New and Special Offers section
	var galleryName,panelNumber,
		arrButtons = new Array().extend($$('#nav-whats-new ul a')).extend($$('#nav-special-offers ul a')).clean();

	arrButtons.each(function(item){
		item.addEvents({
			'click': function(e){
				if(e){e.stop()}
				galleryName = this.id.substring(0,this.id.lastIndexOf("-"));
				panelNumber = this.id.substring(this.id.length-1);
					$$('div#nav-'+galleryName+' ul a').each(function(btn){btn.removeClass('selected')});
				slideGalleryToPanelN(galleryName, panelNumber);
				item.addClass('selected')
			}
		})
	});
	
	displayCity($random(0,cityList.length-1))
}

var cityList = new Array('anaheim','losangeles');

function displayCity(nNewCityIndex) {
	nNewCityIndex = $pick(nNewCityIndex,0);
	//	Swap out the background image
	$('city-current-image').fade('hide').addClass('hidden').setStyles({
		'background-image': 'url(/homepage_new/city-' + cityList[nNewCityIndex] + '.jpg)'
	}).removeClass('hidden').get('tween', {duration: 'long'}).start('opacity',1);

	//	Swap out the menu image
	//$('city-current-menu').setStyle('background-image', 'url(/homepage_new/city-' + cityList[nNewCityIndex] + '-menu.png)');
	var classNm = $('city-current-menu');
	classNm.set('class', '');
	$('city-current-menu').addClass('current-menu-background-' + cityList[nNewCityIndex]);
	
	//	Force the new city to be clear, display it, then fade it in.
	cityNew = $('city-' + cityList[nNewCityIndex]).removeClass('hidden').fade('show');

	//	Reset the city selector image to the new city (images are 26px tall)
	// $('cities-list').setStyle('background-position','0 ' + (-26*nNewCityIndex) + 'px').set('html', '<a href=""></a>')
	$('cities-list').setStyle('background-position','0 ' + (-26*nNewCityIndex) + 'px').set('html','<a href="/'+cityList[nNewCityIndex]+'">\u00a0</a>')
}

var city,
	cityPrevious,
	cityNext,
	cityNew,
	nNewCityIndex;

function gotoCity(strDirection) {
	nNewCityIndex = 0;
	
	for(i=0; i<cityList.length;i++) {
		cityCurrent = $('city-' + cityList[i]);

		// if (cityCurrent.getStyle('display') != 'none') {
		if (!cityCurrent.hasClass('hidden')){
			
			//	Determine which direction in which we are going. 
			if(strDirection == 'prev') {
				//	If cityCurrent is the first, make cityPrevious the last in the list;
				if(i==0) { nNewCityIndex = cityList.length-1; }
				else { nNewCityIndex = i-1; }
			}
			else {
				//	If cityCurrent is the last, make the next city the first in the list;
				if(i==(cityList.length-1)) { nNewCityIndex = 0; }
				else { nNewCityIndex = i+1; }
			}

			//	Fade out the current city, then remove it.
			cityCurrent.get('tween', {
				duration:500,
				onComplete: function(el){
					this.removeEvents('complete');
					el.addClass('hidden');
					displayCity(nNewCityIndex);
				}
			}).start('opacity',0);
			//	If, for some odd reason, there are two cities being displayed,
			//	break after the first.
			break;
		}
	}
}
