$(window).ready(function () { new MolchSlider; });

var MolchSlider = function() {
	_this = this;
	_dom = {
		'slider':          $('#slider'),
		'slider_images':   $('#slider img'),
		'slider_li':       $('#slider li'),
		'preview':         $('#preview'),
		'scroll':          $('#scroll'),
		'sb':              $('.ui-slider-handle')
	};
	
	
	this.slider_width = 0; // Ширина блока с большими фотками
	this.preview_width = 0; // ширина блока с маленькими фотами
	this.preview_img_height = 25; // Высота превьюшки
	this.scrollbar_width = 0; // Ширина ползунка
	this.shadow_w = 0;
	this.scroll_pos = 0;
	
	this.__init__ = function() {
		var margin = 0 //сдвиг галереи
	
		// Считаем ширину блока со всеми большими фотками
		this.calcSliderWidth();
		// Собираем маленькие превьющки
		this.makeThumbs();

		// Инициализируем скроллбар
		var max =  _this.slider_width - $(document).width();

		_dom.scroll.slider({
			range:  "min",
			value:  0,
			min:    0,
			max:    max,   
			slide:  function( event, ui ) { 
				_this.shadow(); 
				$('#slider').css('margin-left', '-' + ui.value + 'px');
			},
			change: function( event, ui ) {
				_this.shadow(); 
				$('#slider').css('margin-left', '-' + ui.value + 'px');
				margin = ui.value;
			}
		});
		
		// Задаем размеры и позицию полосе со скроллбаром
		this.scrollbarInit();
		
		// А что, если изменят размер окна?
		$(window).resize( function() {
			_dom.scroll.slider({ 
				max: max,
			});
			_this.scrollbarInit();
		} );
		
		
		//Скроллинг мышью
		_dom.slider.mousewheel(function(event, delta) {
			var percent_prev = parseInt($('.ui-slider-handle').css('left'));
			var percent = Math.round (margin * 100 / max);

   			margin = margin - Math.round(delta*20);
   			if (margin > max) 
   				margin = max
   			else if (margin < 0) margin = 0;
   			
		   	_dom.slider.css('margin-left', '-' + margin + 'px');
		   	
		   	if (percent - percent_prev > 2 || percent_prev - percent >2)
		   	{
	 		   	$('.ui-slider-handle').css('left', percent + '\%');
 			   	_this.shadow(); 
 			   	console.log(percent_prev, percent)
			}
		});


	}
	
	
	// Задаем размеры и позицию полосе со скроллбаром
	this.scrollbarInit = function() {
		//Скрываем Скроллбар если его ширина меньше ширины экрана
		if ( _this.slider_width < $(document).width())
			$('#scroll , #preview').hide()
		else 
			$('#scroll , #preview').show();

		// Считаем ширину скроллбара
		this.calcScrollbarWidth();
		var domScroll = Math.ceil(this.preview_width - this.scrollbar_width);

		// Устанавливаем ширину скроллбара
		_dom.scroll.width(domScroll);
		// Рассчитываем положение шторок (теней)
		_this.shadow(); 
		// Определяем местоположение скроллбара
		$('#scroll').css({
			'margin-left': '-' + (domScroll /2) + 'px'
		});
	}
	
	
	// Расчет ширины слайдера (там где фотки двигаются)
	this.calcSliderWidth = function() {
		var li_margin = parseInt( $('#slider li').css('padding-right') );
		_dom.slider_li.each(function(){
			_this.slider_width += $(this).width() + li_margin;
		});
		_dom.slider.width( this.slider_width );
	}
	
	// Собираем список превьюшек
	this.makeThumbs = function() {
		var h = this.preview_img_height;
		_dom.slider_images.each(function() {
			var w = Math.ceil( $(this).attr('width') * ( h / $(this).attr('height') ) );
			_dom.preview.append( $(this).clone().attr( {'width': w, 'height': h} ));
			_this.preview_width += w;
		});
	}
	 
	// Расчет ширины скроллбара
	this.calcScrollbarWidth = function() {
		this.scrollbar_width = this.preview_width * ( $(document).width() / this.slider_width );
		$('.ui-slider-handle').css({
			'width': this.scrollbar_width + 'px',
			'margin': '0 -' + Math.ceil( this.scrollbar_width / 2 ) + 'px'
		});
		this.shadow_w = Math.ceil(this.scrollbar_width/2);
	}
	
	// Расчет местоположения тени над превьющками
	this.shadow = function() {

    	var scroll_pos = parseInt( $('a.ui-slider-handle').css('left') );
    	//var w = Math.ceil(this.scrollbar_width/2);
		var l = _dom.scroll.width()*(100-scroll_pos)/100 + this.shadow_w;
		var r = _dom.scroll.width()*(scroll_pos)/100 + this.shadow_w;
		
        $('.left.shadow').css({
        	'right': l + 'px',
        	'left': '-' + this.shadow_w + 'px'

        });
        $('.right.shadow').css({
        	'left': r + 'px',
        	'right': '-' + this.shadow_w + 'px'
        });
	}
	
	
	// Run! 
	this.__init__();
}