/* mouse wheel scroll */
	var hoverscroll = undefined;
	function handlewheel(delta) {
		if (hoverscroll) hoverscroll.scrolltodelta(delta);
	}
	
	function wheel(event){
        var delta = 0;
        if (!event) event = window.event; // Событие IE.
        // Установим кроссбраузерную delta
        if (event.wheelDelta) { 
                // IE, Opera, safari, chrome - кратность дельта равна 120
                delta = -event.wheelDelta/120;
        } else if (event.detail) { 
                // Mozilla, кратность дельта равна 3
                delta = event.detail/3;
        }
        // Вспомогательня функция обработки mousewheel
        if (delta && typeof handlewheel == 'function') {
                handlewheel(delta);
                // Отменим текущее событие - событие поумолчанию (скролинг окна).
                if (event.preventDefault)
                        event.preventDefault();
                event.returnValue = false; // для IE
        }
	}
	
	function setwheelhandler() {
		// Инициализация события mousewheel
		if (window.addEventListener) // mozilla, safari, chrome
		    window.addEventListener('DOMMouseScroll', wheel, false);
		// IE, Opera.
		window.onmousewheel = document.onmousewheel = wheel;
	}
/* end of mouse wheel scroll */


	function scrolltobevisible($pane, $elem) {
		var dontscroll = true;
		var desiredscroll = 0;
		
		if ($elem.offset().left < $pane.offset().left) {
			dontscroll = false;
			desiredscroll = $elem.offset().left - $pane.offset().left - 4;
		} else if ($elem.offset().left + $elem.width() >= $pane.offset().left + $pane.width()) {
			dontscroll = false;
			desiredscroll = ($elem.offset().left + $elem.width()) - ($pane.offset().left + $pane.width()) + 4;
		}
		
		if (!dontscroll) {
			var desiredscrollpos = $pane.scrollLeft() + desiredscroll;
			if (desiredscrollpos < 0) desiredscrollpos = 0;
			if (desiredscrollpos > $pane[0].scrollWidth) desiredscrollpos = $pane[0].scrollWidth;
			
			if ($pane[0].myscroll != undefined)
				$pane[0].myscroll.scrollto(desiredscrollpos, true, true);
		}
	}
	
	function makescroller($pane, $vertoffset, $scrollerwidth) {
		var $scrollbar = $('<div class="scrollbar"><div class="scrollbg"><div class="scroller"></div></div></div>').insertAfter($pane);
		var $scroller = $('.scroller', $scrollbar);
		var $scrollbg = $('.scrollbg', $scrollbar);
		var $paneinner = $pane.children();
		
		$pane.css('overflow', 'hidden');
		
		$scrollbar.css('width', $pane.width() + 'px');
		$scrollbg.css('width', $pane.width() + 'px');
//		$scrollbar.css('top', ($pane.position().top + $vertoffset) + 'px');
//		$scrollbar.css('left', ($pane.position().left) + 'px');
			
		$scroller.css('width', $scrollerwidth);

		$scrollbar.show();
		
		var scrollobj = { 
			mousestate: 0,
			scrollbar: $scrollbar,
			scroller: $scroller,
			scrollerwidth: $scrollerwidth,
			scrollmax: $pane.width() - $scrollerwidth,
			pane: $pane,
			panemin: 0,
			panemax: 0,
			panepos: 0,
			wheelstep: 30,
			
			update: function() {
				this.panemax = this.pane[0].scrollWidth - this.pane.width();
				if (this.panemax < 0) this.panemax = 0;
//				this.scrollto(0, false);
			},

			interact: function(event, anim) { //process mouse event and call scroll
				var clickposx = event.pageX - this.scrollbar.offset().left;
				var desiredpos = Math.floor(clickposx - this.scrollerwidth / 2);
				this.scrollto(desiredpos, anim);
			},
			
			scrolltodelta: function(deltapos) {
				var desiredpos = this.panepos += deltapos * this.wheelstep;
				if (desiredpos < this.panemin) desiredpos = this.panemin;
				if (desiredpos >= this.panemax) desiredpos = this.panemax - 1;
				this.scrollto(desiredpos, false, true);
			},
			
			scrollto: function(pos, anim, thatspanepos) { //panepos optional
				var desiredpos = thatspanepos? Math.floor(pos / this.panemax * this.scrollmax): pos;

				if (desiredpos < 0) desiredpos = 0;
				if (desiredpos >= this.scrollmax) desiredpos = this.scrollmax - 1;

				this.panepos = thatspanepos? pos: Math.floor(desiredpos / this.scrollmax * this.panemax);
					
				if (anim) {
					this.scroller.stop().animate({ left: desiredpos + 'px' }, 150);
					this.pane.stop().animate({scrollLeft: this.panepos}, 150);
				} else {
					this.scroller.stop().css('left', desiredpos + 'px');
					this.pane.stop().scrollLeft(this.panepos);
				}
			}
		};
		
		scrollobj.update();
		
		$pane[0].myscroll = scrollobj;

		$pane.hover(function() {
			hoverscroll = this.myscroll;
		}, function() {
			hoverscroll = undefined;
		});
		
		$scrollbar.mousedown(function(event) {
			scrollobj.interact(event, 1);
			scrollobj.mousestate = true;
			event.preventDefault();
		});

		$('body').mouseup(function(event) {
			if (scrollobj.mousestate)
				scrollobj.interact(event, 0);
			scrollobj.mousestate = false;
			event.preventDefault();
		}).mousemove(function(event) {
			if (scrollobj.mousestate)
				scrollobj.interact(event, 0);
			event.preventDefault();
		});
	}

$(function() {
	$('#devlogo a').click(function() {
		window.open(this.href);
		return false;
	});
	
	$('.thumbs a').click(function() {
		$('.thumbs a').removeClass('active');
		$(this).addClass('active');
		
		scrolltobevisible($('#thumbsscroll'), $(this));
		
		$('#preview').delay(400).html(data.code[$(this).attr('id')]);
		
		return false;
	});

	$('.btnl').click(function() {
		$('#' + data.prev[$('.thumbs a.active').attr('id')]).click();
		return false;
	});
	
	$('.btnr').click(function() {
		$('#' + data.next[$('.thumbs a.active').attr('id')]).click();
		return false;
	});

	$('.thumbs a').last().css('margin-right', 0);
	
	makescroller($('#thumbsscroll'), 90, 148);

	setwheelhandler();

	$('.thumbs a').first().click();
});