/*
|----------------------------------------------------------------------------|
|                                  DemoBox                                   |
|----------------------------------------------------------------------------|
*/

DemoBoxGroup.prototype.classNameTag = "demobox";

function DemoBoxGroup() {
    var oThis = this;
    
    this.selectedId = '';
    this.boxElements = $$('.demo_box');
    this.controlElements = $$('.demo_box_control');
    this.controlElements.each(function (controlElement) {
        // copy position
        var boxElement = $('demo_box_for_' + controlElement.id);
        Position.clone(controlElement, boxElement, { offsetLeft: 15, offsetTop: 15, setWidth: false, setHeight: false });

        // set handlers
        if (controlElement.addEventListener) {
            controlElement.addEventListener('mouseover', function(ev) { oThis.mouseoverHandler(controlElement, ev) }, false);
        } else {
            controlElement.attachEvent('onmouseover', function(ev) { oThis.mouseoverHandler(controlElement, ev) });
        }
        if (controlElement.addEventListener) {
            controlElement.addEventListener('mouseout', function(ev) { oThis.mouseoutHandler(controlElement, ev) }, false);
        } else {
            controlElement.attachEvent('onmouseout', function(ev) { oThis.mouseoutHandler(controlElement, ev) });
        }
    });
}

DemoBoxGroup.prototype.mouseoverHandler = function(controlElement, event) {
    var oThis = this;
    var boxElement = $('demo_box_for_' + controlElement.id);
    this.selectedId = boxElement.id;
    if (!boxElement.visible()) {
        boxElement.appear({ duration: 0.25, afterFinish: function() {
            oThis.boxElements.each(function(it) {
                if (it.id != oThis.selectedId)
                    it.hide();
            });
        } });
    }
}

DemoBoxGroup.prototype.mouseoutHandler = function(controlElement, event) {
    var target = null;
    if(event.toElement) {
        target = event.toElement;
    } else if(event.relatedTarget) {
        target = event.relatedTarget;
    }
    if(target != null &&
       !Element.childOf(target, controlElement) &&
       controlElement != target ) {
        $('demo_box_for_' + controlElement.id).hide();
    }
}