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

	if ($('telephone') != null){
		fields1 = [$('telephone'),$('telephone-area'),$('telephone-number')];
		listener1 = $('telephone-preview')
		fields1.each(function(field){
			field.addEvent('keyup', function(){
					listener1.setProperty('html','+' + fields1[0].getProperty('value') + '-' + fields1[1].getProperty('value') + '-' + fields1[2].getProperty('value'));
				})
			});
	}
	
	if ($('mobile') != null){
		fields2 = [$('mobile'),$('mobile-area'),$('mobile-number')];
		listener2 = $('mobile-preview')
		fields2.each(function(field){
			field.addEvent('keyup', function(){
					listener2.setProperty('html','+' + fields2[0].getProperty('value') + '-' + fields2[1].getProperty('value') + '-' + fields2[2].getProperty('value'));
				})
			});
	}
	
	if ($('assistanttelephone') != null){
		fields3 = [$('assistanttelephone'),$('assistanttelephone-area'),$('assistanttelephone-number')];
		listener3 = $('assistanttelephone-preview')
		fields3.each(function(field){
			field.addEvent('keyup', function(){
					listener3.setProperty('html','+' + fields3[0].getProperty('value') + '-' + fields3[1].getProperty('value') + '-' + fields3[2].getProperty('value'));
				})
			});
	}
	
	rollpops = ['young-scientist','young-scholar', 'scientist','standard','donor','groups','not-sure'];
	rollpops.each(function(rollpop){
		var button = $(rollpop + '-info-button');
		if (button != null){
			var popup = $(rollpop + "-popup");
			button.addEvent('mouseover', function(){
				popup.setStyle('display','block');
				popup.setStyle('top', popup.getStyle('top').toInt() - (popup.getStyle('height').toInt() + 70));
				popup.setStyle('left', popup.getStyle('left').toInt() + 140 );
				popup.dropShadow();
			});
			button.addEvent('mouseout', function(){
				popup.setStyle('display','none');
				popup.setStyle('top', popup.getStyle('top').toInt() + (popup.getStyle('height').toInt() + 70));
				popup.setStyle('left', popup.getStyle('left').toInt() - 140 );
				popup.smartDispose();
			});
		}
	})      
});

Element.implement({
    smartDispose: function() {
        // dispose of an element and its dropShadow (if there is one)
        var rel = this.get("data-related");
	    if ($(rel)) {
	        $(rel).dispose();
	    }
	}, // end smartDispose
	dropShadow: function(options) {
	    // creates a shadow effect to a rectangular element

	    // define defaults
        var options = $merge({
            id: "dropShadow" + $random(100,1000),
            x: 4, // offset from parent
            y: 3,
            border: "1px solid #000",
            background: "#555",
            opacity: .1,
            zIndex: this.getStyle("z-index").toInt() - 1 // behind parent
        }, options);

        // only apply shadow on absolutely positioned elements
        if (this.getStyle("position") != "absolute")
            return this;

        var c = this.getCoordinates();

        new Element("div", {
            id: options.id,
            styles: {
                position: "absolute",
                left: c.left + options.x,
                top: c.top + options.y -5,
                width: c.width,
                height: c.height,
                background: options.background,
                zIndex: options.zIndex
            },
            opacity: 0
        }).injectBefore(this).fade(0, options.opacity);

        // store the shadow id into the element
        this.set("data-related", options.id);

        return this;
    } // end dropShadow
});