/*
 * Depends:
 *	ui.core.js
 *	ui.draggable.js
 *	ui.resizable.js
 */
(function($) {

$.widget("dcms.template_ajaxScroll", {
	_init:function() {
		var self = this;
		
		$('.side_arrow', self.element).clickable() ;
		
		$('.scroll > .scrollable', self.element).scrollable(self.options) ;
		self._setData('scroll', $('.scroll > .scrollable', self.element).scrollable()) ;
	},
	load:function(data_) {
		var data = $.extend({}, $.dcms.template_ajaxScroll.load_settings, data_) ;
		this._setData('last_request', data) ;
		
		this.element.find('.menu .state span')
			.toggleClass('ui-icon-check')
			.toggleClass('ui-icon-refresh') ;
		
		if (data.clear) {
			this.clear() ;	
		}
		
		if (this._getData('fetch_url') != '') {
			var self = this ;
			$.ajax({
				type:'POST',
				url:this._getData('fetch_url'),
				data:data,
				success:function(data) {
					try {
						if (data.getElementsByTagName('entry').length > 0) {
							var entries = data.getElementsByTagName('entry') ;
							for (i = 0 ; i < entries.length ; i++) {
								var args = {
									id:entries[i].getAttribute('id')
								} ;
								if (entries[i].getAttribute('image') != null && entries[i].getAttribute('image') != '') {
									args.image = entries[i].getAttribute('image') ;
								}
								else {
									args.image = self._getData('default_image') ;
								}
								if (entries[i].getAttribute('label') != null) {
									args.label = entries[i].getAttribute('label') ;
								}
								if (entries[i].getAttribute('label2') != null) {
									args.label2 = entries[i].getAttribute('label2') ;
								}
								if (entries[i].getAttribute('label3') != null) {
									args.label3 = entries[i].getAttribute('label3') ;
								}
								self.add(args) ;
							}
						}
					} catch(e) {
						$.data_creator.error('template-ajaxScroll-load-'+e+'<br/>'+(new XMLSerializer()).serializeToString(data)) ;
					}
				},
				complete:function() {
					self.element.find('.menu .state span')
						.toggleClass('ui-icon-check')
						.toggleClass('ui-icon-refresh') ;	
				}
			}) ;
		}
	},
	add:function(data_) {
		var data = $.extend({}, $.dcms.template_ajaxScroll.thumb_settings, data_) ;
		
		var self = this ;
		
		var table = $('<table></table>')
			.attr('id', data.id)
			.click(function() {
				self._trigger('thumb_click', 0, {id:$(this).attr('id')}) ;
			}) ;
		
		var row1 = $('<tr></tr>')
			.appendTo(table) ;
			
		var td11 = $('<td></td>')
			.attr('rowspan', 3)
			.addClass('image')
			.appendTo(row1) ;
			
		var image = $('<image />')
			.attr('src', this._getData('js_root')+data.image)
			.attr('alt', 'image')
			.attr('height', 50)
			.attr('width', 50)
			.appendTo(td11) ;
			
		var td12 = $('<td></td>')
			.addClass('label')
			.html(data.label)
			.appendTo(row1) ;
			
		var row2 = $('<tr></tr>')
			.appendTo(table) ;
			
		var td21 = $('<td></td>')
			.addClass('label2')
			.html(data.label2)
			.appendTo(row2) ;
			
		var row3 = $('<tr></tr>')
			.appendTo(table) ;
			
		var td31 = $('<td></td>')
			.addClass('label3')
			.html(data.label3)
			.appendTo(row3) ;
			
		var api = this._getData('scroll') ;
		api.getItemWrap().append(table) ;
		api.reload() ;
	},
	clear:function() {
		var api = this._getData('scroll') ;
		api.getItemWrap().html('') ;
		api.reload() ;
	},
	remove:function(id) {
		var api = this._getData('scroll') ;
		api.getItems().filter('[id='+id+']').remove() ;
		api.reload() ;
	},
	next:function() {
		var data_ = this._getData('last_request') ;
		data_.begin += data_.end ;
		data_.clear = false ;
		this.load(data_) ;
	}
}) ;

//$.dcms.template_ajaxScroll.getter = "getUrl";

$.dcms.template_ajaxScroll.thumb_settings = {
	id:0,
	image:'Themes/Default/Images/avatar_default.jpg',
	label:'',
	label2:'',
	label3:''
} ;

$.dcms.template_ajaxScroll.load_settings = {
	begin:0,
	end:10,
	clear:true 
} ;

$.extend($.dcms.template_ajaxScroll, {
	defaults: {
		items:'.thumbs',
		vertical:true,
		size:3,
		hoverClass:'ui-state-disabled',
		activeClass:'ui-state-highlight',
		fetch_url:'',
		js_root:'./',
		last_request:$.dcms.template_ajaxScroll.load_settings,
		default_image:''
	},
});

})(jQuery);