/*
 * Copyright (c) 2012 Francisco Salavert (ICM-CIPF)
 * Copyright (c) 2012 Ruben Sanchez (ICM-CIPF)
 * Copyright (c) 2012 Ignacio Medina (ICM-CIPF)
 *
 * This file is part of JS Common Libs.
 *
 * JS Common Libs is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 2 of the License, or
 * (at your option) any later version.
 *
 * JS Common Libs is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with JS Common Libs. If not, see <http://www.gnu.org/licenses/>.
 */

function UrlWidget(args) {
    var _this = this;

    _.extend(this, Backbone.Events);

    this.id = Utils.genId("UrlWidget");

    this.targetId = null;
    this.title = "Custom url";
    this.width = 500;
    this.height = 400;

    _.extend(this, args);
    this.on(this.handlers);

};

UrlWidget.prototype.draw = function () {
    if (this.panel == null) {
        this.render();
    }
    this.panel.show();
};

UrlWidget.prototype.render = function () {
    var _this = this;

    this.urlField = Ext.create('Ext.form.field.Text', {
        margin: "0 2 2 0",
        labelWidth: 30,
        width: this.width - 55,
        fieldLabel: 'URL',
        emptyText: 'enter a valid url',
//		value : "http://das.sanger.ac.uk/das/grc_region_GRCh37/features",
        value: "http://www.ensembl.org/das/Homo_sapiens.GRCh37.gene/features",
        listeners: { change: {fn: function () {
            var dasName = this.value.split('/das/')[1].split('/')[0];
            _this.trackNameField.setValue(dasName);
        }}
        }
    });
    this.checkButton = Ext.create('Ext.button.Button', {
        text: 'Check',
        handler: function () {
            _this.form.setLoading();
//			var dasDataAdapter = new DasRegionDataAdapter({
//				url : _this.urlField.getValue()
//			});
//			dasDataAdapter.successed.addEventListener(function() {
//				_this.contentArea.setValue(dasDataAdapter.xml);
//				_this.form.setLoading(false);
//			});
//
//			dasDataAdapter.onError.addEventListener(function() {
//				_this.contentArea.setValue("XMLHttpRequest cannot load. This server is not allowed by Access-Control-Allow-Origin");
//				_this.form.setLoading(false);
//			});
//			dasDataAdapter.fill(1, 1, 1);

            var dasAdapter = new DasAdapter({
                url: _this.urlField.getValue(),
                featureCache: {
                    gzip: false,
                    chunkSize: 10000
                },
                handlers: {
                    'url:check': function (event) {
                        console.log(event.data);
                        _this.contentArea.setValue(event.data);
                        _this.form.setLoading(false);

                    },
                    'error': function () {
                        _this.contentArea.setValue("XMLHttpRequest cannot load. This server is not allowed by Access-Control-Allow-Origin");
                        _this.form.setLoading(false);

                    }
                }
            });

            dasAdapter.checkUrl();
        }
    });
    this.trackNameField = Ext.create('Ext.form.field.Text', {
        name: 'file',
//        fieldLabel: 'Track name',
        allowBlank: false,
        value: _this.urlField.value.split('/das/')[1].split('/')[0],
        emptyText: 'Choose a name',
        flex: 1
    });
    this.panelSettings = Ext.create('Ext.panel.Panel', {
        layout: 'hbox',
        border: false,
        title: 'Track name',
        cls: "panel-border-top",
        bodyPadding: 10,
        width: this.width - 2,
        items: [this.trackNameField]
    });
    this.contentArea = Ext.create('Ext.form.field.TextArea', {
        margin: "-1",
        width: this.width,
        height: this.height
    });
    this.infobar = Ext.create('Ext.toolbar.Toolbar', {
        height: 28,
        cls: "bio-border-false",
        items: [this.urlField, this.checkButton]
    });
    this.form = Ext.create('Ext.panel.Panel', {
        border: false,
        items: [this.infobar, this.contentArea, this.panelSettings]
    });

    this.panel = Ext.create('Ext.ux.Window', {
        title: this.title,
        layout: 'fit',
        resizable: false,
        items: [this.form],
        buttons: [
            {
                text: 'Add',
                handler: function () {
                    _this.trigger('addButton:click', {name: _this.trackNameField.getValue(), url: _this.urlField.getValue()});
                    _this.panel.close();
                }
            },
            {text: 'Cancel', handler: function () {
                _this.panel.close();
            }}
        ],
        listeners: {
            destroy: function () {
                delete _this.panel;
            }
        }
    });
};