//var setElement = null;
var formBuilder = null;

var Qs_FormBuilder = qs.createObject();

Qs_FormBuilder.prototype =
{
    id: null,
    _toolBarClass: 'toolbar',
    _containerClass: 'container',
    elements: new Array(),
    options: {},

    setElement: function(event, link, type)
    {
        var positionX = event.pageX - this.getContainer().offset().left;
        var positionY = event.pageY - this.getContainer().offset().top;
        positionX = Math.round(positionX / this.options.grid) * this.options.grid;
        positionY = Math.round(positionY / this.options.grid) * this.options.grid;
        this.elements.push(new Qs_FormBuilder_Element(type, 0, this, positionX, positionY));
        link.toggleClass('selected');
        this.getContainer().css('cursor', 'auto').unbind('click.setElement');
    },

    initialize: function(id, type, options)
    {
        this.options = options;
        this.id = id;
        this.type = type;
        var self = this;
        $('.' + this._toolBarClass + ' a').click(function(){
            self.addElement($(this)); return false;
        });
        $('form input#height').keyup(function(){
            var value = parseInt($(this).val(), 10);
            if (isNaN(value)) {
                value = self.options.defaultFormHeight;
            } else {
                $(this).val(value);
            }
            $(self.getContainer().css('height', value + 'px'));
        }).keyup();
        for (i in this.options.elements) {
            var element =
                new Qs_FormBuilder_Element(this.options.elements[i].type, this.options.elements[i].id, this, 0, 0);
            this.elements.push(element);
        }
        delete this.options.elements;
    },

    getElementById: function(id)
    {
        for (var i = 0; i < this.elements.length; i++) {
            if (this.elements[i].id == id) {
                return this.elements[i];
            }
        }
        return false;
    },

    addElement: function(link)
    {
        var self = this;
        var type = link.get(0).className;
        var selected = link.hasClass('selected')
        $('.' + this._toolBarClass + ' a').removeClass('selected');
        this.getContainer().css('cursor', 'auto').unbind('click.setElement');
        if (!selected) {
            link.addClass('selected');
            this.getContainer().css('cursor', 'move').bind('click.setElement', function(event) {
                self.setElement(event, link, type)}
            );
        }
    },

    getContainer: function()
    {
        return $('.' + this._containerClass);
    }
};