var slider_navi = {
	selector: 'img',
	singleWidth: 500,
	setup: function( slider, viewport, inside, width ) {
		// setters
		this.viewport = $(viewport);
		this.inside = $(inside);
		this.slider = $(slider);
		this.width = width;
		this.images = this.inside.find(this.selector);
		
	/*
		this.sum = this.images.length * 3;
		this.images.each(function() {
			slider_navi.sum += $(this).width();
		});
	*/
	
		this.sum = ( this.sum ? this.sum : this.images.length * this.singleWidth );
		
		// appliers
		this.viewport.css({
			width: this.width
		});

		this.viewport.css({
			'position': 'relative',
			'overflow': 'hidden'
		});
		
		this.inside.width( this.sum ).css({
			'position': 'absolute',
			'top': '0px',
			'left': '0px'
		});
		
		$(slider).slider({
			slide: function(event, ui) { slider_navi.updateView( ui.value ); },
			step: 0.01,
			max: 1,
			min: 0
		})
	},
	updateView: function(value) {
		this.inside.css('left', value * -1 * ( this.sum - this.width ) );
	}
}