(function($){
	
	var baseClass = "sg-ui-tileview",
		itemClass = "sg-item",
		lastItemClass = "sg-last",
		firstItemClass = "sg-first";
	
	$.widget( "sg.sg_ui_tileview", {
		options: {
			itemSelector: '.sg-item',
			resizeFunction: function($item_width){},
			width_min: 130,
			width_max: 999,
			fixed_columns: false,
			fixed_width: false,
			width_separator: 0,
			width_padding: 4,
			mark_last: true,
			mark_first: false,
			resizeFunction: false
		},
		
		vars:{
			width_tile: null
		},
	 
		_create: function() {			
			var $widget = this;
			var $wrapper = this.element;
			var $options = this.options;
			
			$wrapper.addClass( baseClass );
			
			var $tag_item = $wrapper.find( $options.itemSelector );
			$tag_item.addClass( itemClass );
			
			// set tile dynamic width
			//$widget.setTileWidth();
			$(window).resize(function() {
				$widget.setTileWidth();
			});
			
			$wrapper.resize(function(){
				//alert('resize');
				$widget.setTileWidth();
			});
			
			$wrapper.ready(function(){
				//alert('resize');
				$widget.setTileWidth();
			});
		},
		
		setTileWidth: function() {
			var $widget = this;
			var $wrapper = this.element;
			var $options = this.options;
			
			var $tag_item = $wrapper.find( $options.itemSelector );
			
			// max tiles in row
			if($options.fixed_columns){
				var $max_columns = $options.fixed_columns;
			}else{
				var $max_columns = Math.floor( $wrapper.innerWidth() / ($options.width_min + $options.width_separator + ($options.width_padding * 2)) );
			}
			if($max_columns<1){
				$max_columns = 1;	
			}
			
			// mark last item
			if($options.mark_last){
				$tag_item.each(function(){
					$(this).removeClass( lastItemClass );
				});
				$wrapper.find( $options.itemSelector+':nth-child('+$max_columns+'n)' ).each(function(){
					$(this).addClass( lastItemClass );
				});
			}
			
			// mark first item
			if($options.mark_first){
				$tag_item.each(function(){
					$(this).removeClass( firstItemClass );
				});
				$wrapper.find( $options.itemSelector+':nth-child('+$max_columns+'n+1)' ).each(function(){
					$(this).addClass( firstItemClass );
				});
			}
			//var $width_column = Math.floor( ($wrapper.width() / $max_columns) - $options.width_separator );
			
			// set column width
			var $width_separator = ($options.width_separator * ($max_columns - 1)) / $max_columns;
			var $width_column = ($wrapper.innerWidth() / $max_columns) - $width_separator;
			if($options.width_padding){
				$width_column = $width_column - ($options.width_padding * 2);
			}
			if($max_columns == 1){
				if(!$options.fixed_width){
					$options.fixed_width = $wrapper.innerWidth() - $options.width_separator - ($options.width_padding * 2);
				}
				$width_column = $options.fixed_width;
			}
			if($width_column < $options.width_min){
				$width_column = $options.width_min;
			}
			if($width_column > $options.width_max){
				$width_column = $options.width_max;
			}
			
			// set width
			$tag_item.each(function(){
				//$(this).width( $width_column );
				$width_column = Math.floor($width_column);
				$(this).css('width', $width_column+'px');
			});
			
			// resize Function
			if($options.resizeFunction)
			{
				var $vars = this.vars;
				if($vars.width_tile == null){
					$vars.width_tile = $width_column;
				}else if($vars.width_tile != $width_column){
					$vars.width_tile = $width_column;
					$options.resizeFunction( $vars.width_tile );
				}
			}
		}
	});
	
}(jQuery));