var RTI;
if(!RTI) RTI = {};

window.addEvent('domready', function() { 
	RTI.mainApp = new MainApp();
	
}); // end domready


// -------------------------------------------------------------------------------------------------
// Expander Class Expands Divs and populates with Ajax content
// -------------------------------------------------------------------------------------------------
expander = new Class({
	initialize: function(el, pos) {
		this.el = el;
		//this.ajaxURL = url;
		this.tmp = $('tmp');
		this.htmlContent = '';
		this.pos = pos;
		this.expanded = 0;
		
		var spinnerClass = '';
		
		switch(pos) {
			case 'top':
				spinnerClass = "spinner-top";
				break;
			case 'bottom':
				spinnerClass = "spinner-bottom";
				break;
		};
		
		
		this.spinner = new Spinner(this.el, { 'class': spinnerClass });

		this.myRequest = new Request({});
		
		
		this.expandSpinnerFx = new Fx.Tween(this.el, {property: 'height', duration: 200, onComplete: this.triggerRequest.bind(this), transition: Fx.Transitions.Cubic.easeOut});
		
		this.contractFx = new Fx.Tween(this.el, {property: 'height', duration: 400, transition: Fx.Transitions.Cubic.easeInOut});
		
		this.populateFx = new Fx.Tween(this.el, {property: 'height', duration: 600, onComplete: this.populate.bind(this), transition: Fx.Transitions.Cubic.easeInOut});
		
		this.fadeFx = new Fx.Tween(this.el, {property: 'opacity', duration: 500, transition: Fx.Transitions.Cubic.easeInOut});
		
		
	},
	setAjaxURL: function(url) {
		this.ajaxURL = url;
	},
	expand: function(url) {
		
		this.ajaxURL = url;
		//console.log('this expand called');
		
		/*
		var elHeight = this.el.getSize();
		if(elHeight.y > 0) {
			this.contract();
		} else {
			this.expandSpinnerFx.start(0, 40);
		}
		*/
		this.expandSpinnerFx.start(0, 40);
		this.expanded = 1;
	},
	contract: function() {
		this.myRequest.cancel();
		this.spinner.hide(true);
		this.el.empty();
		this.tmp.empty();
		var elHeight = this.el.getSize();
		if(this.pos == 'bottom' || (RTI.mainApp.section == 'home' || RTI.mainApp.section == 'gallery')) this.contractFx.start(elHeight.y, 0);
		
		// Cancel Fx
		this.expandSpinnerFx.cancel();
		this.populateFx.cancel();
		
		// Fade out
		this.fadeFx.set(0);
		this.expanded = 0;
	},
	triggerRequest: function() {
		this.spinner.show(false);
		
		this.myRequest = new Request({
			url: this.ajaxURL,
			onSuccess: this.prePopulate.bind(this),
			noCache: true,
			evalScripts: true
		}).get();
		
	},
	prePopulate: function(html,xml) {
	
		if(this.pos == 'top') {
			RTI.bottomExpander.contract();
		} else {
			RTI.topExpander.contract();
		}
		
		this.spinner.hide(true);
		this.htmlContent = html;
		this.tmp.set('html', this.htmlContent);
		var dimensions = this.tmp.measure(function() { return this.getDimensions(); });
		
		//console.log(dimensions);
		
		
		var elHeight = this.el.getSize();
		this.populateFx.start(elHeight.y, (dimensions.y + 10));
	},
	populate: function() {
		this.fadeFx.set(0);
		this.tmp.empty();
		this.el.set('html', this.htmlContent);
		this.fadeFx.start(0,1);
		
		if($('gallery')) RTI.gallery = new gallery();
		
		
	}
	
});


// -------------------------------------------------------------------------------------------------
// Gallery: Manages the gallery section of the site
// -------------------------------------------------------------------------------------------------

gallery = new Class({
	initialize: function() {
		this.initializeGalleryButtons($('cats'));
		this.designator = $('designator');
		this.designator.setStyle('opacity', 0);
		this.frame = $('frame');
		this.frame.setStyle('opacity', 0);
		
		this.currentCatId = 0;
		this.iconsDiv = $('icons');
		
		this.fadeFx = new Fx.Tween(this.iconsDiv, {property: 'opacity', duration: 800, transition: Fx.Transitions.Cubic.easeInOut});
		
		this.fadeFx.set(0);
		
		//console.log('cat width: ' + this.catDivWidth);
	},
	initializeGalleryButtons: function(btnContainer) {
		var ctr = btnContainer;
		
		//console.log(ctr);
		
		ctr.addEvent('click', function(e) {
			new Event(e).stop();
			var tgt = e.target;
			
			if(tgt.className == 'cat-button') {
			
				//console.log('you clicked button: ' + tgt.id);
				this.btnImg = $(tgt.id);
				this.currentCatId = tgt.id.substring(3);
				this.moveDesignator();
				this.fadeFx.set(0);
			}
			
		}.bind(this));
		
		$$('.cat-button').addEvents({
			'mouseenter': function(e) {
				this.setStyles({
					'opacity': .9,
					'cursor': 'pointer'
				});
			},
			'mouseleave': function() {
				this.setStyles({
					'opacity': 1,
					'cursor': 'default'
				});
			}
		});
		
	},
	moveDesignator: function() {
	
		//RTI.topExpander.contract();
		
	
		// some vars should be set each time in case the window is resized
		var trackTop = $('icon-bar').getCoordinates($('cats')).top;
		//console.log('trackTop: ' + trackTop);
		this.designator.setStyle('opacity', 1);
		//console.log(this.btnImg);
		var imgCoords = this.btnImg.getCoordinates($('cats'));
		var designatorCoords = this.designator.getCoordinates($('cats'));
		
		var loc = imgCoords.left + 58;
		
		var designatorFx = new Fx.Tween(this.designator, {property: 'left', duration: 300, transition: Fx.Transitions.Cubic.easeOut});
		
		var frameFx = new Fx.Tween(this.frame, {property: 'opacity', duration: 1000, transition: Fx.Transitions.Cubic.easeOut}).set(0);

		
		designatorFx.start(designatorCoords.left, loc);
		
		this.frame.setStyle('left', loc - 78);
		frameFx.start(0, 1);
		//console.log(imgCoords);
		//console.log(loc);
		//console.log(this.outerContainerOffset);
		this.getThumbnails();
	},
	getThumbnails: function() {
	
		this.ajaxURL = '/services.php?p=template&id=' + this.currentCatId;
		
		//console.log(this.ajaxURL);
	
		var myRequest = new Request({
			url: this.ajaxURL,
			onSuccess: this.getThumbnailsCallback.bind(this),
			noCache: true,
			evalScripts: true
		}).get();
	},
	getThumbnailsCallback: function(html, xml) {
		this.iconsDiv.set('html', html);
		this.fadeFx.start(0, 1);
		
		// assign the thumbnail scripts
		$$('.icon').addEvents({
			'mouseenter': function(e) {
				this.myFx = new Fx.Morph(this, {duration: 50, link: 'cancel'});
				this.myFx.start({
					'height': ['31px','35px'],
					'width' : ['31px','35px'],
					'margin': '-2px 0 0 -2px'
				});
			},
			'mouseleave': function(e) {
				this.myFx.start({
					'height': ['35px','31px'],
					'width' : ['35px','31px'],
					'margin': '0 0 0 0'
				});
			},
			'click': function(e) {
				this.thumbnailClicked(e);
			}.bindWithEvent(this)
		});
	},
	thumbnailClicked: function(e) {
		var tgtId = e.target.id.substring(4);
		//console.log(tgtId);
		var imgPath = '/images_gallery/cat' + this.currentCatId + '/fullsize' + tgtId + '.jpg';
		
		//console.log(imgPath);
		
		var bigImg = new Element('img', {
			'src': imgPath,
			'width': '900',
			'height': '460'
		});
		this.swapImages(bigImg);
	},
	swapImages: function(img) {
		
		var newImg = img;
		
		var imgContainerTop = $('main-image-top-div');
		var imgContainerBottom = $('main-image-bottom-div');
	
		var imgFade = new Fx.Tween(imgContainerTop, {property: 'opacity', duration: 800, transition: Fx.Transitions.Cubic.easeInOut});
		
		var imgTop = imgContainerTop.getChildren()[0];
	
		imgContainerBottom.empty().adopt(imgTop);
		imgFade.set(0);
		
		imgContainerTop.empty().adopt(newImg);
		imgFade.start(0,1);
	}
});


// -------------------------------------------------------------------------------------------------
// Reviews: Put some testimonials on the front page
// -------------------------------------------------------------------------------------------------
reviews = new Class({
	initialize: function() {
	
	this.container = $('main-image-container');
	this.maxRequests = 15;
	this.counter = 0;	
		
		this.mask = new Element('div', {
			'id':'quote-mask',
			'styles': {
				'position': 'absolute',
				'left':'0',
				'bottom':'0',
				'padding': '10px',
				'opacity': .4,
				'width': '880px',
				'height': '55px',
				'background-color':'#000000',
				'z-index':'10'
			}
		}).inject(this.container, 'top');
		
		this.quote = new Element('div', {
			'id':'quote',
			'styles': {
				'position': 'absolute',
				'left':'0',
				'bottom':'0',
				'padding': '10px',
				'text-align':'right',
				'width': '880px',
				'height': '55px',
				'z-index':'100'
			}
		}).inject(this.container, 'top');
		
		this.quoteFadeUp = new Fx.Tween(this.quote, {property: 'opacity', duration: 500, transition: Fx.Transitions.Cubic.easeIn});
		
		this.quoteFadeUp.set(0);
		
		this.quoteFadeOut = new Fx.Tween(this.quote, {property: 'opacity', duration: 500, transition: Fx.Transitions.Cubic.easeIn, onComplete: this.populate.bind(this)});
		
		this.ajax();
	},
	ajax: function() {
		
	
		this.myRequest = new Request.JSON({
			method: 'get',
			url: '/services.php?p=testimonials',
			initialDelay: 3000,
			delay: 15000,
			limit: 100000,
			onComplete: this.ajaxCallback.bind(this)
		}).startTimer({});
		
		
	},
	ajaxCallback: function(responseJSON, responseText) {
	
		this.quoteFadeUp.set(0);
		
		this.quoteBody = responseJSON[0];
		this.quoteAttribution = responseJSON[1];
		
		
		var body = '<div>' + this.quoteBody + '</div>';
		var attribution = '&mdash;<em>' + this.quoteAttribution + '</em>';
		
		this.quote.set('html', body + attribution);
		
		this.populate();
		
		if(this.counter >= this.maxRequests){
			this.myRequest.stopTimer();
			//console.log('stopping timer...');
		} else {
			//console.log('incrementing counter');
			this.counter++;
		}
	},
	populate: function() {
		this.quoteFadeUp.start(0,1);
	},
	stop: function() {
		this.myRequest.stopTimer();
		this.quote.dispose();
		this.mask.dispose();
	}
});



// -------------------------------------------------------------------------------------------------
// ButtonManager Class: Sets events and initial conditions for main Nav
// -------------------------------------------------------------------------------------------------
buttonManager = new Class({
	initialize: function(main) {
	
	// Since the Donna section is completely javascript driven, we'll only create the nav link if javascript is available
	
	var DonnaLi = new Element('li', {
			'class':'left',
			'id':'donna-li'
		});
	var navDonna = new Element('a', {
			'id':'nav-donna',
			'class':'navlink',
			'href':'/',
			'title':"About Donna"
		}).set('html', 'Donna').inject(DonnaLi, 'top');
	
		// Donna Link
		navDonna.addEvent('click', function(e) {
			this.selectMe(e);
			RTI.mainApp.select('donna');
			//RTI.topExpander.expand();
		}.bind(this));
		
		// Price List link
		var PriceListLi = new Element('li', {
			'class':'left',
			'id':'pricelist-li'
		});
		var navPricelist = new Element('a', {
			'id':'nav-pricelist',
			'class':'navlink',
			'href':'/',
			'title':"Wedding Package Pricing"
		}).set('html', 'Price-List').inject(PriceListLi, 'top');
	
		
		navPricelist.addEvent('click', function(e) {
			this.selectMe(e);
			RTI.mainApp.select('pricelist');
		}.bind(this));
		
		
		// Home Link
		$('nav-home').addEvent('click', function(e) {
			this.selectMe(e);
			RTI.mainApp.select('home');
			//RTI.topExpander.contract();
		}.bind(this)); 
		
		var GalleryLi = new Element('li', {
			'class':'left',
			'id':'gallery-li'
		});
		
		var navGallery = new Element('a', {
			'id':'nav-gallery',
			'class':'navlink',
			'href':'/',
			'title':"Gallery: Samples of Donna's work"
		}).set('html', 'Gallery').inject(GalleryLi, 'top');
		
		// Since the Gallery is completely javascript driven, we'll only create the nav link if javascript is available
		// Gallery Link
		navGallery.addEvent('click', function(e) {
			this.selectMe(e);
			RTI.mainApp.select('gallery');
			//RTI.bottomExpander.expand();
		}.bind(this));
		
		navGallery.inject($('contact-li'), 'after');
		navDonna.inject($('contact-li'), 'after');
		navPricelist.inject($('contact-li'), 'after');
		
		
	},
	selectMe: function(e) {
		new Event(e).stop();
		t = e.target;
		this.unselectButtons();
		this.selectButton(t);
	},
	selectButton: function(btn) {
		if(!btn.hasClass('selected')) btn.addClass('selected');
	},
	unselectButtons: function() {
		$$('.navlink').removeClass('selected');
	}
});

// -------------------------------------------------------------------------------------------------
// MainApp: Just what it says!
// -------------------------------------------------------------------------------------------------
MainApp = new Class({
	initialize: function() {
		RTI.topExpander = new expander($('top-expander'), 'top', 'services.php?p=paragraph&id=about_donna');
		RTI.bottomExpander = new expander($('bottom-expander'), 'bottom', 'services.php?p=gallery');
		
		RTI.buttonManager = new buttonManager();
		//RTI.reviews = new reviews();
		
		this.section = 0; // initialized when called later
		
		this.hideNoJavascript();
	},
	select: function(sct) {
		
		if(this.section !== sct) {
		
		this.section = sct;	
		
			switch(this.section) {
				case 'home':
					//this.sectionAjaxURL = 'services.php?p=paragraph&id=about_donna';
					//RTI.topExpander.expand(this.sectionAjaxURL);
					//RTI.reviews = new reviews();
					RTI.bottomExpander.contract();
					RTI.topExpander.contract();
					break;
				case 'donna':
					this.sectionAjaxURL = 'services.php?p=paragraph&id=about_donna';
					RTI.topExpander.contract();
					RTI.topExpander.expand(this.sectionAjaxURL);
					//RTI.reviews.stop();
					break;
				case 'pricelist':
					this.sectionAjaxURL = 'services.php?p=paragraph&id=price-list';
					RTI.topExpander.contract();
					RTI.topExpander.expand(this.sectionAjaxURL);
					break;
				case 'gallery':
					this.sectionAjaxURL = 'services.php?p=gallery';
					RTI.bottomExpander.expand(this.sectionAjaxURL);
					//RTI.reviews.stop();
					break;
			}
		}
	},
	hideNoJavascript: function() {
		$('nojavascript').dispose();
	}
});