var Phone = Class.create();

Phone.prototype = {
	
	initialize: function(container, phone, over, ring1, ring2) {
		this.container = $(container);
		this.phone = phone;
		this.over = over;
		this.ring1 = ring1;
		this.ring2 = ring2;

		this.tmShowRing1 = null; this.tmHideRing1 = null;
		this.tmShowRing2 = null; this.tmHideRing2 = null;

		this.registerEvents();
	},

	registerEvents: function() {
		Event.observe(this.container, 'mouseover', this.show.bind(this));
		Event.observe(this.container, 'mouseout', this.hide.bind(this));
	},
	clearTimers: function() {
		$clear(this.tmShowRing1);
		$clear(this.tmHideRing1);
		$clear(this.tmShowRing2);
		$clear(this.tmHideRing2);
	},

	show: function() {
		this.showOver();
		this.startShowRings();
	},
	hide: function() {
		this.hideOver();
		this.hideRing1();
		this.hideRing2();
		this.clearTimers();
	},

	startShowRings: function() {
		this.tmShowRing1 = function(phone) {
			$clear(phone.tmShowRing1);
			phone.showRing1();
			phone.tmShowRing2 = function(phone2) {
				$clear(phone2.tmShowRing2);
				phone2.showRing2();
				phone2.startHideRings();
			}.delay(0.5, phone);
		}.delay(0.5, this);
	},
	startHideRings: function() {
		this.tmHideRing2 = function(phone2) {
			$clear(phone2.tmHideRing2);
			phone2.hideRing2();
			phone2.tmHideRing1 = function(phone) {
				$clear(phone.tmHideRing1);
				phone.hideRing1();
				phone.startShowRings();
			}.delay(0, phone2);
		}.delay(0.5, this);
	},

	showOver: function() {
		this.over.setStyle({ display: 'block' });
	},
	hideOver: function() {
		this.over.setStyle({ display: 'none' });
	},
	showRing1: function() {
		this.ring1.setStyle({ display: 'block' });
	},
	hideRing1: function() {
		this.ring1.setStyle({ display: 'none' });
	},
	showRing2: function() {
		this.ring2.setStyle({ display: 'block' });
	},
	hideRing2: function() {
		this.ring2.setStyle({ display: 'none' });
	}
}

function loadPhone() {
	new Phone(
		'phone_container',
		$('phone'),
		$('phone_over'),
		$('phone_ring_1'),
		$('phone_ring_2')
	);
}

Event.observe(window, 'load', function() { loadPhone(); });