var twLayoutPreview = new Class({

    Implements: [Options],

    options: {
        trigger: 'change',
        selector: '',
        preview: '',
        spinatt: '',
        relbase: document.body,
        apiurl: 'api.php',
        apiqs: '?action=query&export&exportnowrap&titles=',
        spinimg: 'extensions/uniwiki/Layouts/spinner.gif',
        spinner: null,
        spinxy: null,
    },

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

    attach: function() {
        // First set up the spinner...
        this.options.spinner = new Element('img', {
                                               src: this.options.spinimg,
                                               styles: {
			                                       position: 'absolute',
                                                   'z-index': 10000,
		                                       },
		                                       opacity: 0
	                                       }).inject(document.body);
        this.options.spinxy = this.options.spinatt.getCoordinates(this.options.relbase);

        // Attach the change event
        this.options.selector.addEvent(this.options.trigger, function() {
            var othis = this;
            var layout = othis.options.selector.value;

            var request = new Request({url: othis.options.apiurl + othis.options.apiqs + 'Layout:' + layout,
                                       method: 'get',
                                       data: '',
                                       onRequest: function() {
                                           othis.options.spinner.setStyles({left: othis.options.spinxy.right + 10,
					                                                        top: othis.options.spinxy.top + 5
				                                                           }).fade('in');
                                       },
                                       onComplete: function() {
                                           othis.options.spinner.fade('out');
                                       },
                                       onSuccess: function(responseText, responseXML) {
                                           // We should only have one text element in the response on success
                                           var text = responseXML.getElementsByTagName('text')[0];
                                           // If we have a text element, set the preview to its contents
                                           if(text) {
                                               othis.options.preview.value = text.firstChild.data;
                                           } else {
                                               othis.options.preview.value = '';
                                           }
                                       }
                                                                         
            }).send();
        }.bind(this));
    },


});


window.addEvent('domready', function() {
    if(document.getElementById('sellayout')) {
        var preview = new twLayoutPreview({selector: document.getElementById('layid'),
		                                   preview: document.getElementById('preview'),
                                           spinatt: document.getElementById('sellayout'),});
    }
});