﻿var PatientCenter = {
	initialize: function(options){
		this.options = Object.extend({
			triggerId: "panel_trigger",
			panelId: "patient_center_panel_wrapper"
		});
		
		this.trigger = $(this.options.triggerId);
		this.panel = $(this.options.panelId);
		this.panel.setStyle({height: "46px"});	
		this.panel.fire("patientCenter:initialized");

		
		this.trigger.observe("click", this.__triggerClick.bindAsEventListener(this));
		this.trigger.observe("mouseenter", this.__animate.bindAsEventListener(this, this.trigger, "height", "46px", "0.1"));
		this.trigger.observe("mouseleave", this.__animate.bindAsEventListener(this, this.trigger, "height", "41px", "0.1"));
	},
	__triggerClick: function(){
		if(this.panel.hasClassName("open")){
			this.panel.addClassName("closed").removeClassName("open");
			this.__animate(null, this.panel, "height", "46px", "0.35");
			this.panel.fire("patientCenter:closed");
		} else {
			this.panel.addClassName("open").removeClassName("closed");
			this.__animate(null, this.panel, "height", "244px", "0.35");
			this.panel.fire("patientCenter:opened");
		}
	},
	__animate: function(e, element, property, value, duration){
		var cssStyle = {}
		cssStyle[property] = value;
		
		clearTimeout(this.timer);
		this.timer = null;
		this.timer = setTimeout(function() {
			this.animation = new Effect.Morph(element,{
				style: cssStyle,
				duration: duration,
				fps: 30,
				transition: Effect.Transitions.easeInOutQuad
			});				
		}.bind(this), 150);
	}
}

$(document).observe('dom:loaded', function () {
    PatientCenter.initialize();
    if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPad/i))){
        $$('div#patient_center_panel_wrapper').invoke('hide');
    }
});



