App_Slide = qs.createObject();
var appSlide = null;
App_Slide.prototype =
{
    options: null,
    form: null,

    initialize: function(options)
    {
        this.options = options;
    },

    getForm: function()
    {
        if (this.form == null) {
            var formObj = $('form#' + this.options.formId);
            if ($(formObj).size()) {
                this.form = formObj;
            } else {
                alert('Form "' + this.options.formId + '" is not found.');
            }
        }
        return this.form;
    },

    changeType: function()
    {
        var linkType = $('#linkType', this.getForm()).val();
        var type = $('#type', this.getForm()).val();

        var htmlElements = ['html', 'backgroundImage'];
        if ('none' != linkType) {
            htmlElements.push('linkText')
        }

        if (type == 'image') {
            this.hide(htmlElements, true);
            this.hide(['image'], false);
        } else if (type == 'html') {
            this.hide(['image'], true);
            this.hide(htmlElements, false);
        }
    },

    changeLinkType: function()
    {
        var linkType = $('#linkType', this.getForm()).val();
        var type = $('#type', this.getForm()).val();

        this.hide(['url', 'pageId', 'linkText'], true);

        if ('none' != linkType) {
            var elements = [];
            if ('html' == type) {
                elements.push('linkText')
            }
            if (linkType == 'url') {
                elements.push('url');
            } else if (linkType == 'cms') {
                elements.push('pageId');
            }
            this.hide(elements, false);
        }
     },

    hide: function(elements, value)
    {
        for (var i in elements) {
            if (value) {
                $('#' + elements[i] + '-label').hide();
                $('#' + elements[i] + '-element').hide();
            } else {
                $('#' + elements[i] + '-label').show();
                $('#' + elements[i] + '-element').show();
            }
        }
    }
};

function initAppSlide(options)
{
    appSlide = new App_Slide(options);
    var formObj = appSlide.getForm();
    if (formObj) {
        $('#type', formObj).bind('change', function() { appSlide.changeType(); });
        $('#linkType', formObj).bind('change', function() { appSlide.changeLinkType(); });
        appSlide.changeType();
        appSlide.changeLinkType();
    }
};

/* ****************************************************************************************************************** */

var App_Slide_SpotForm = qs.createObject();
var appSlideSpotForm = null;

App_Slide_SpotForm.prototype =
{
    _containerWidth: null,
    _containerHeight: null,
    _spots: [],
    _spotIndex: 0,
    _spotErrors: [],
    _cancelUrl: '',
    _slideId: 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, pageId, url)
    {
        var obj = this;
        var index = obj.getSpotIndex();

        top = (top) ? +top : index * 5;
        left = (left) ? +left : index * 5;
        width = (width) ? +width : 50;
        height = (height) ? +height : 50;

        if (urlType !== 'page' && urlType != 'url') {
            urlType = 'page';
        }
        pageId = +pageId;
        url = url || '';

        var item = '<div id="spot_item_' + index + '" index="' + index + '" type="' + type + '" class="ui-state-active spot_item">'
                 + '<img src="' + qs.constant('BASE_URL') + '/images/slide/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, pageId: pageId, 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].pageId);
            $('#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].pageId = $('#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&slideId=" + obj._slideId;
        obj._spotErrors = [];

        for (var i in obj._spots) {
            if (obj._spots[i] != null) {
                for (var prop in obj._spots[i]) {
                    data += '&' + prop + '[' + i + ']=' + encodeURIComponent(obj._spots[i][prop]);
                }
            }
        }
        $.ajax({
            url: qs.constant('BASE_URL') + '/' + qs.constant('CURRENT_PAGE'),
            data: data,
            dataType: 'json',
            type: 'POST',
            error: function(XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); },
            success: function(data, textStatus) {
                if (data.isLocked) {
                    alert(data.error);
                } else if (data.status == 'ok') {
                    if (data.backUrl) {
                        document.location = data.backUrl;
                    } else {
                        $('#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 initAppSlideSpotForm(options)
{
    appSlideSpotForm = new App_Slide_SpotForm(options);

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

    for (var i in options.spotsList) {
        appSlideSpotForm.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].pageId,
            options.spotsList[i].url
        );
    }
};