function Box(data, parent){
    this.size = data.value ? data.value : "100";
    this.position = data.position;
    this.parent = parent;
    this.uid = data.uid;
    this.styleClass = "box " + (!parent ? "boxMain" : "boxChild");
    this.title = jQuery("<p>" + data.title + "</p>");
    this.structure = jQuery('<a href="#" id="b_' + this.uid + '" class="' + this.styleClass + '"></a>');
    this.structure.css({
        "width": this.size + "px",
        "height": this.size + "px",
        "left": this.position.x + "px",
        "top": this.position.y + "px"
    });
    
    //	this.structure.style.borderRadius=this.size/2+"px";
    if (this.size < 40) {
        this.structure.css({
            "overflow": "visible"
        });
        this.title.css({
            "color": "#333"
        });
        if (this.position.x < 150) {
            this.title.css({
                "left": "-110px",
                "width": "100px",
                "textAlign": "right"
            });
        }
        else {
            this.title.css({
                "left": this.size + "px"
            });
        }
    }
    this.structure.append(this.title);
    this.active = false;
    var that = this;
    if (!parent) {
        this.childWrapper = jQuery('<div id="c_' + this.uid + '"></div>');
        this.childWrapper.addClass("childWrapper");
        this.childWrapper.addClass("hidden");
        
        this.wrapper = jQuery(document.createElement("div"));
        this.wrapper.addClass("boxWrapper");
        
        this.wrapper.append(this.structure);
        
        jQuery(this.structure).mouseenter(function(){
            jQuery(that.childWrapper).fadeIn();
            jQuery("[id*='_"+data.uid+"_']").show();
        });
        jQuery(this.structure).mouseleave(function(){
            if (!that.active) {
                jQuery(that.childWrapper).fadeOut();
                jQuery("[id*='_"+data.uid+"_']").hide();
            }
        });
        jQuery(this.structure).click(function(){
            if (that.active) {
                //                that.childWrapper.className = "childWrapper hidden";
                stateCounter--;
                that.structure.removeClass("active");
            }
            else {
                stateCounter++;
                that.structure.addClass("active");
                //                that.childWrapper.className = "childWrapper";
            }
            that.active = !that.active;
        });
    }
    else {
        this.childWrapper = parent.childWrapper;
    }
}

Box.prototype.getWrapper = function(){
    return this.wrapper;
}

Box.prototype.getStructure = function(){
    return this.structure;
}

Box.prototype.getChildWrapper = function(that){
    return this.childWrapper;
}