window.addEvent('domready', function() {

	var patient_titles = $$('div.patientgallery-wrapper div.titlebar')
	var photos_panels = $$('div.patientgallery-wrapper div.photos-panel')
	var photos_panels_fx = new Array();
	var clinic_panels = $$('div.patientgallery-wrapper div.clinic-panel')
	var clinic_panels_fx = new Array();
	var patient_toggle = $$('div.patientgallery-wrapper a.toggle')
	
	photos_panels.each( function(el, i) {
		photos_panels_fx[i] = new Fx.Slide(el, {duration: 250, link: 'chain', transition: Fx.Transitions.Sine.easeOut}).show();
	});
	clinic_panels.each( function(el, i) {
		clinic_panels_fx[i] = new Fx.Slide(el, {duration: 250, link: 'chain', transition: Fx.Transitions.Sine.easeOut}).hide();
	});
	
	patient_toggle.each( function(el, i) {
		el.addEvent('click', function(e) {
			e.stop();
			
			if ( photos_panels_fx[i].open ) {
				photos_panels_fx[i].slideOut().chain(
				function() {
					clinic_panels_fx[i].slideIn();
				});

				patient_titles[i].addClass('clinic');
			} else {
				clinic_panels_fx[i].slideOut().chain(
				function() {
					photos_panels_fx[i].slideIn();
				});

				patient_titles[i].removeClass('clinic');
			}
		});

	});


	var photo_thumbnails = new Array();
	
	$$('div.photos-panel ul li').each( function(el, i) {
		var myEffect = new Fx.Morph(el, {duration: 150, link: 'chain', transition: Fx.Transitions.Sine.easeOut});
		photo_thumbnails[i] = myEffect;
		var width = el.getChildren('a').getChildren('img')[0].getSize()[0].x;

		el.addEvents({
			'mouseenter' : function(e) {
				photo_thumbnails[i].start({
				    'background-color': '#6593bb',
				    'padding-left': [0, 5],
				    'padding-right': [0, 5]
				});
			},
			'mouseleave' : function(e) {
				photo_thumbnails[i].start({
				    'background-color': '#ffffff',
				    'padding-left': [5, 0],
				    'padding-right': [5, 0]
				});
			}
		});
	});

});