(function($){
	
	$.widget("sg.sg_siteloader", {
		options: {
			containerClass: 'tmp-scrollcontainer',
			arr_container: [],
			
			total_container: false, //total number
			start_container: 0, //index
			active_container: 0, //index
			
			total_window: false, //total number
			active_window: 0, //index
			
			width_window: 860,
			width_container: 650,
			width_scroll: false
		},
		
		_create: function(){
			var $widget = this;
			var $wrapper = this.element;
			var $options = this.options;
			
			$options.total_container = 0;
			var $tag_container = $wrapper.find('.'+$options.containerClass);
			$tag_container.each(function(){
				$options.arr_container.push({
					tag_container: $(this)
				});
				$options.total_container++;
			});
			
			$options.active_container = $options.start_container;
			$options.active_window = ($options.total_container - 1) - $options.start_container;
			$options.total_window = $options.total_container - $options.start_container;
			$options.width_scroll = $widget.getWindowWidth( $options.active_window );
			
			$widget.positionWrapper();
			$(window).resize(function() {
				$widget.resizeWrapper();
				$widget.positionWrapper();
			});
		},
		
		getWrapper: function(){
			return this.element;
		},
		
		//#####################################################################################################################
		// config
		getWindowWidth: function(index_window){
			var $widget = this;
			var $wrapper = this.element;
			var $options = this.options;
			
			var $index = index_window + $options.start_container;
			var $width_scroll = 0;
			var $tag_container = $wrapper.find('.'+$options.containerClass);
			$tag_container.each(function(){
				if($(this).index() <= $index){
					$width_scroll += $(this).outerWidth(true);
				}
			});
			return $width_scroll;
		},
		
		getContainerWidth: function(index_container){
			var $widget = this;
			var $wrapper = this.element;
			var $options = this.options;
			
			var $width_scroll = 0;
			var $tag_container = $wrapper.find('.'+$options.containerClass);
			$tag_container.each(function(){
				if($(this).index() <= index_container){
					$width_scroll += $(this).outerWidth(true);
				}
			});
			return $width_scroll;
		},
		
		//#####################################################################################################################
		// position wrapper
		positionWrapper: function(){
			var $widget = this;
			var $wrapper = this.element;
			
			$wrapper.css('left', $widget.getNewPosition()+'px');
			
			$wrapper.trigger('sg_siteloader.resize');
		},
		
		animatePositionWrapper: function(){
			var $widget = this;
			var $wrapper = this.element;
			
			$wrapper.animate({
				left: $widget.getNewPosition()+'px'
			}, 500, 'swing');
			
			$wrapper.trigger('sg_siteloader.resize');
		},
		
		getNewPosition: function(){
			var $widget = this;
			var $wrapper = this.element;
			var $options = this.options;
			
			$options.width_scroll = $widget.getContainerWidth( $options.active_container );
			var $center = ($(window).width() - $options.width_window) / 2;
			
			//get full width
			if($options.width_scroll > $options.width_window){
				var $window_center = $(window).width() / 2;
				var $width_fullwindow = $window_center + ($options.width_window / 2);
				var $overflow_window = $options.width_scroll - $width_fullwindow + 10;
			}else{
				var $overflow_window = $options.width_scroll - $options.width_window;
			}
			
			var $scroll_left = $center - $overflow_window;
			return $scroll_left;
		},
		
		//#####################################################################################################################
		// resize and animate functions
		resizeWrapper: function(){
			var $widget = this;
			var $wrapper = this.element;
			var $options = this.options;
			
			var $wrapper_width = $widget.getWindowWidth( ($options.total_window - 1) );
			
			$wrapper.width( $wrapper_width );
		},
		
		//#####################################################################################################################
		// container index getters
		getThisContainer: function($tag){
			var $options = this.options;
			var $tag_selcontainer = $tag.parents('.'+$options.containerClass);
			return $tag_selcontainer.index();
		},
		
		getNextContainer: function($tag){
			var $options = this.options;
			var $tag_selcontainer = $tag.parents('.'+$options.containerClass);
			return ($tag_selcontainer.index() + 1);
		},
		
		getPrevContainer: function($tag){
			var $options = this.options;
			var $tag_selcontainer = $tag.parents('.'+$options.containerClass);
			if($tag_selcontainer.index() <= 1){
				$index = 0;
			}else{
				$index = $tag_selcontainer.index() - 1;
			}
			return $index;
		},
		
		//#####################################################################################################################
		// container functions
		reloadWindow: function(){
			
		},
		
		reloadContainer: function(index, loadedFunction){
			var $options = this.options;
			var $url = $options.arr_container[index].url;
			
			if($url==null || $url==false){
				console.log('can not reload container (index: '+index+')- url: '+$url+' - reloading page instead');
				window.location.reload();
			}else{
				console.log('reload container: '+index+' - url: '+$url);
			}
			
			$.get($url, function(data)
			{
				//$options.arr_container[index].tag_container.html( '' );
				$options.arr_container[index].tag_container.empty();
				$options.arr_container[index].tag_container.html( data );
				if(loadedFunction){
					loadedFunction();
				}
			});
		},
		
		showWindow: function(index_window){
			var $widget = this;
			var $options = this.options;
			
			var $index = index_window + $options.start_container;
			$widget.showContainer($index);
		},
		
		showContainer: function(index){
			var $widget = this;
			var $wrapper = this.element;
			var $options = this.options;
			
			if(index < $options.start_container){
				$options.active_container = $options.start_container;
				$options.active_window = 0;
			}else{
				$options.active_container = index;
				$options.active_window = index - $options.start_container;
			}
			
			$widget.resizeWrapper();
			$widget.animatePositionWrapper();
			
			$wrapper.trigger('sg_siteloader.changeview', $options.active_window);
		},
		
		countContainers: function(){
			var $options = this.options;
			return $options.total_container;
		},
		
		countWindows: function(){
			var $options = this.options;
			return $options.total_window;
		},
		
		insertContainer: function(data, index, $url){
			var $widget = this;
			var $options = this.options;
			
			if(!index && index!==0){
				alert('no index found: insertContainer');
			}
			
			if(!index && index!==0){
				$widget.insertContainer(data, ($options.total_container-1), $url);
			}else{
				if(index!=0){
					$widget.deleteFollowingContainer((index-1));
				}
					
				if(($options.total_container-1) < index){
					$widget.createContainer(index, $url);
				}
				
				console.log('insert container: '+index+' - url: '+$url);
				//$options.arr_container[index].tag_container.html(data);
				$options.arr_container[index].tag_container.empty();
				$options.arr_container[index].tag_container.html(data);
				$options.arr_container[index].url = $url;
			}
			
			$widget.showContainer( index );
		},
		
		deleteFollowingContainer: function(index){
			var $widget = this;
			var $wrapper = this.element;
			var $options = this.options;
			
			var $index_lastcontainer = ($options.total_container - 1);
			
			if(!index && index!=0){
				alert('no index found: deleteFollowingContainer');
			}
			
			if(index < $index_lastcontainer){
				for( $i=$index_lastcontainer; $i>index; $i-- ){
					//alert('index last container: '+$index_lastcontainer+' - delete index '+$i);
					$widget.deleteContainer($i);
				}
			}
			
			$wrapper.trigger('sg_siteloader.containerremoved', $options.total_window);
		},
		
		createContainer: function(index, $url){
			var $wrapper = this.element;
			var $options = this.options;
			var $new_index;
			
			console.log('create container: '+index);
			
			var $tag_container = $('<div class="'+$options.containerClass+'" style="width:'+$options.width_container+'px"></div>');
			$wrapper.append( $tag_container );
			
			if(!index){
				$new_index = $options.total_container;
			}else{
				$new_index = index;
			}
			$options.arr_container[$new_index] = {
				tag_container: $tag_container,
				url: $url
			};
			$options.total_container++;
			$options.total_window++;
			
			$wrapper.trigger('sg_siteloader.containeradded', $options.total_window);
		},
		
		deleteContainer: function($index){
			var $widget = this;
			var $wrapper = this.element;
			var $options = this.options;
			
			if(!$index){
				//index = $options.total_container-1;
				alert('no index found to remove (container)');
			}
			console.log('delete container: '+$index);
			
			var $tag_container = $wrapper.find('.'+$options.containerClass+':eq('+$index+')');
			$tag_container.remove();
			
			//$widget.showContainer( index-1 );
			$options.total_container = $options.total_container - 1;
			$options.total_window = $options.total_container - $options.start_container;
		},
	});
}( jQuery ) );