var App_Banner_SpotForm = qs.create();
var bannerSpotForm = null;

App_Banner_SpotForm.prototype =
{
    _containerWidth: null,
    _containerHeight: null,
    _spots: [],
    _spotIndex: 0,
    _spotErrors: [],
    _cancelUrl: '',
    _bannerId: null,

    initialize: function(options)
    {
        for (var i in options) {
            if (typeof this['_' + i] != 'undefined') {
                this['_' + i] = options[i];
            }
        }
    },

    getSpotIndex: function()
    {
        return this._spotIndex++;
    },

    addSpotItem: function(type, top, left, width, height, urlType, idPage, url)
    {
        var obj = this;
        var index = obj.getSpotIndex();

        top = intval(top);
        if (top == 0) {
            top += index * 5;
        }
        left = intval(left);
        if (left == 0) {
            left += index * 5;
        }
        width = intval(width);
        height = intval(height);
        if (width == 0 || height == 0) {
            width = height = 50;
        }

        if (urlType !== 'page' && urlType != 'url') {
            urlType = 'page';
        }
        idPage = intval(idPage);
        if (url == undefined || url == null) {
            url = '';
        }

        var item = '<div id="spot_item_' + index + '" index="' + index + '" type="' + type + '" class="ui-state-active spot_item">'
                 + '<img src="' + BASE_URL + '/images/spot_' + type + '.gif" width="100%" height="100%" border="0" style="filter:alpha(opacity=50); -moz-opacity:0.5" />'
                 + '<div>'
        $("#spot_container").append(item);

        $('#spot_item_' + index).resizable({containment: '#spot_container', stop: function (event, ui) { obj.spotResizingStop(this, event, ui); }});
        $('#spot_item_' + index).draggable({containment: '#spot_container', stop: function (event, ui) { obj.spotDraggingStop(this, event, ui); }});
        $('#spot_item_' + index).css('position', 'absolute');
        $('#spot_item_' + index).css('top', top + 'px');
        $('#spot_item_' + index).css('left', left + 'px');
        $('#spot_item_' + index).css('width', width + 'px');
        $('#spot_item_' + index).css('height', height + 'px');

        obj._spots[index] = {type: type, top: top, left: left, width: width, height: height, urlType: urlType, idPage: idPage, url: url};

        $('#spot_item_' + index).click(function() {
            $('#spot_url').blur();
            $('#spot_id_page').blur();

            $('div[class*=spot_item_active]').removeClass('spot_item_active');
            $(this).addClass('spot_item_active');

            obj.initSpotUrl();
        }).click();
    },

    deleteSpotItem: function()
    {
        var spot = $('div[class*=spot_item_active]');
        if ($(spot).size()) {
            if (confirm("Do you really want to delete this hot spot?")) {
                var index = $(spot).attr('index');
                this._spots[index] = null;
                $(spot).remove();
                this.initSpotUrl();
            }
        }
    },

    clearSpotItems: function()
    {
        var container = $('#spot_container');
        if ($(container).html() != '') {
            if (confirm("Do you really want to delete all hot spots?")) {
                this._spotIndex = 0;
                this._spots = [];
                $(container).html('');
                this.initSpotUrl();
            }
        }
    },

    changeSpotLinkType: function()
    {
        if ($('#spot_link_type').val() == 'page') {
            $('#spot_id_page').show();
            $('#spot_url, #spot_url_description').hide();
        } else {
            $('#spot_id_page').hide();
            $('#spot_url, #spot_url_description').show();
        }
        this.setSpotUrl();
    },

    initSpotUrl: function()
    {
        var spot = $('div[class*=spot_item_active]');
        var link_container = $('#spot_link_container');

        if ($(spot).size()) {
            var index = $(spot).attr('index');
            $('#spot_id_page', link_container).val(this._spots[index].idPage);
            $('#spot_url', link_container).val(this._spots[index].url);
            $('#spot_link_type', link_container).val(this._spots[index].urlType).change();

            if (typeof this._spotErrors[index] == 'string' && this._spotErrors[index] != '') {
                $('ul#spot_url_errors').html('<li>' + this._spotErrors[index] + '</li>').show();
            } else {
                $('ul#spot_url_errors').html('').hide();
            }

            $(link_container).show();
        } else {
            $(link_container).hide();
        }
    },

    setSpotUrl: function()
    {
        var spot = $('div[class*=spot_item_active]');
        if ($(spot).size()) {
            var index = $(spot).attr('index');
            this._spots[index].urlType = $('#spot_link_type').val();
            this._spots[index].idPage = $('#spot_id_page').val();
            this._spots[index].url = $('#spot_url').val();
        }
    },

    spotResizingStop: function(element, event, ui)
    {
        var index = $(element).attr('index');
        var type = $(element).attr('type');

        var top = ui.position.top;
        var left = ui.position.left;
        var width = ui.size.width;
        var height = ui.size.height;

        if (type == 'circle') {
            var imprecision = 7;
            if (width != height) {
                if (width > height) {
                    width = height;
                } else {
                    height = width;
                }

                if ((left + width) > this._containerWidth) {
                    width = width - (top + width - this._containerWidth) - imprecision;
                    height = width;
                }

                if ((top + height) > this._conteinerHeight) {
                    height = height - (left + height - this._conteinerHeight) - imprecision;
                    width = height;
                }

                $(element).css('width', width + 'px');
                $(element).css('height', height + 'px');
            }
        }

        this._spots[index].top = top;
        this._spots[index].left = left;
        this._spots[index].width = width;
        this._spots[index].height = height;
    },

    spotDraggingStop: function(element, event, ui)
    {
        var index = $(element).attr('index');
        this._spots[index].top = ui.position.top;
        this._spots[index].left = ui.position.left;
    },

    spotSave: function()
    {
        var obj = this;
        var data = "&action=save&idBanner=" + obj._bannerId;
        obj._spotErrors = [];

        for (var i in obj._spots) {
            if (obj._spots[i] != null) {
                for (var prop in obj._spots[i]) {
                    data += '&' + prop + '[' + i + ']=' + urlencode(obj._spots[i][prop]);
                }
            }
        }
        $.ajax({
            url: BASE_URL + '/' + CURRENT_PAGE,
            data: data,
            dataType: 'json',
            type: 'POST',
            error: function(XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); },
            success: function(data, textStatus) {
                if (data.status == 'ok') {
                    $('#form_cancel').click();
                } else {
                    obj._spotErrors = data.errors;
                    for (var i in data.errors) {
                        $('#spot_item_' + i).click();
                    }
                    alert("Please review the comments marked in red and make appropriate corrections.");
                }
            }
        });
    }
}

function initAppBannerSpotForm(options)
{
    bannerSpotForm = new App_Banner_SpotForm(options);

    $('#spot_add_rectangle').click(function() { bannerSpotForm.addSpotItem('rect'); });
    $('#spot_add_circle').click(function() { bannerSpotForm.addSpotItem('circle'); });
    $('#spot_delete').bind('click', function() { bannerSpotForm.deleteSpotItem(); });
    $('#spot_clear').bind('click', function() { bannerSpotForm.clearSpotItems() });
    $('#spot_link_type').bind('change', function () { bannerSpotForm.changeSpotLinkType(); });
    $('#spot_url, #spot_id_page').bind('blur', function () { bannerSpotForm.setSpotUrl(); });
    $('#form_submit').bind('click', function () { bannerSpotForm.spotSave(); });
    $('#form_cancel').click(function() { document.location = options.cancelUrl; });

    for (var i in options.spotsList) {
        bannerSpotForm.addSpotItem(
            options.spotsList[i].type,
            options.spotsList[i].top,
            options.spotsList[i].left,
            options.spotsList[i].width,
            options.spotsList[i].height,
            options.spotsList[i].urlType,
            options.spotsList[i].idPage,
            options.spotsList[i].url
        );
    }
}