


jQuery.fn.scrollq = function(options) 
{
	var set = {
		Lbtn: "#ScrollQLeftButton",
		Rbtn: "#ScrollQRightButton",
		mask: "#ScrollMask",
		strape: "#ScrollMask ul",
		itemsID: "#ScrollMask li",
		step: 5,
		speed:300,
		ajax: false,
		
		/*technical parameters*/
		ajaxstep: 10, /*number of steps will be downloaded to the line per one click. 1 by default*/
		LBufer: 20, /*number of images from the left side in overflow zone.  all others will be deleted/uploaded */
		RBufer: 20 /*number of images from the right side in overflow zone.  all others will be deleted/uploaded */
	}
	set = jQuery.extend(set, options);
	
	var strape_width=0;
	var items = $(set.itemsID);
	
	var str_position = 0;
	var l_ind=0;
	var l_x =0;
	var r_ind=0;
	var r_x=0;
	var r_ind =0;
	var mask = $(set.mask).width();
	var itmarg = parseInt($(set.itemsID).css('marginLeft')) 
				+ parseInt($(set.itemsID).css('marginRight')) 
				+ parseInt($(set.itemsID).css('paddingLeft')) 
				+ parseInt($(set.itemsID).css('paddingRight'))
				+ parseInt($('a',set.itemsID).css('marginLeft')) 
				+ parseInt($('a',set.itemsID).css('marginRight'))
				+ parseInt($('a',set.itemsID).css('paddingLeft')) 
				+ parseInt($('a',set.itemsID).css('paddingRight'));
	
	
	/*set strape width*/
	var updImgList = function() {
		items = $(set.itemsID);
		strape_width = 0;
		items.each(function(a,b){strape_width+=$(b).width();});
		$(set.strape).css('width',strape_width);
	}
	updImgList();
	
	if (strape_width<=mask) {$(set.Lbtn).hide();$(set.Rbtn).hide();return true;}
	if (strape_width>mask) {$(set.Lbtn).show();$(set.Rbtn).show();}
	
	$(set.strape).css('width',strape_width);
	
	var gStapePos = function() {return Math.abs(parseInt($(set.strape).css('marginLeft')))}
	var pScrPos = function() {
		var w=0;
		var l_stop=r_stop= true;
		
		items.each(function(a,b){
			w += $(b).width();
			if(gStapePos() < w && l_stop) {
				l_ind = a;
				l_x= $(b).width() - (w-gStapePos());
				l_stop=false;
			}
			if((gStapePos()+mask) < w && r_stop ) {r_ind = a;r_x= w-(gStapePos()+mask);r_stop=false;}
		})
	}
	
	$(set.Rbtn).unbind("click");
	$(set.Rbtn).click(function(){
		pScrPos();
		if (set.ajax) doajaxreq('r');
		else rmove();
	})
	
	$(set.Lbtn).unbind("click");
	$(set.Lbtn).click(function(){
		pScrPos();
		if (set.ajax) doajaxreq('l')
		else lmove();
	})
	
	
	var rmove = function() {
		var temp_step = set.step;
		var move_x=0;
		items.each(function(a,b){if (a>r_ind && a<(r_ind+temp_step)) {move_x += $(b).width();} });
		move_x = move_x+ gStapePos()+r_x
		if(move_x > strape_width-mask) {move_x = strape_width-mask;}
		$(set.strape).animate({marginLeft:-move_x}, set.speed)
	}
	
	var lmove = function() {
		var temp_step = set.step;
		var move_x=0;
		var lb=(l_ind-temp_step<=0)?0:l_ind-temp_step;
		if(l_x==0&&(lb-1)>=-1) lb--;
		items.each(function(a,b){if (a<l_ind && a>lb)move_x += $(b).width() ;});
		move_x = gStapePos()-(move_x+l_x);
		if(move_x < 0) {move_x = 0;}
		$(set.strape).animate({marginLeft:-move_x}, set.speed)
	}
	
	
	var doajaxreq = function(dir) {
		//right button
		if(dir == 'r') {
			if ((items.length - r_ind) <= set.RBufer) {
				$.ajax({
					url:"json_request.json",
					type: "get",
					dataType: "json",
					success: function(data){
						/*add images*/
						for (i=0;i< (set.step*set.ajaxstep);i++){
							if (data.images[i])
								$(set.strape).append(
									$('<li>').append(
										$('<a href="#"></a>').attr('title',data.images[i].name).append(
											$('<img/>').attr({'src':data.images[i].src,'alt':data.images[i].name}).css({'width':data.images[i].size.w,'height':data.images[i].size.h})
										)
									)
								);
						}
						if (l_ind > set.LBufer) {
							var odd =  l_ind - set.LBufer;
							
							$(set.itemsID+':lt('+odd+')').each(function(){
								$(set.strape).css('marginLeft',-(gStapePos()-$(this).width()));
								$(this).remove();
							});
						}
						
						updImgList();
						pScrPos();
						rmove();
					},
					error: function() {alert('scroller image update faled');rmove();return false}
				})
			}
			else rmove();
		}
		
		//left button
		if (dir == 'l') {
			if (l_ind <= set.LBufer) {
				$.ajax({
					url:"json_request.json",
					type: "get",
					dataType: "json",
					success: function(data){
						/*add images*/
						var ml = 0;
						for (i=0;i< (set.step*set.ajaxstep);i++){
							if (data.images[i]) {
								$(set.strape).prepend(
									$('<li>').append(
										$('<a href="#"></a>').attr('title',data.images[i].name).append(
											$('<img/>').attr({'src':data.images[i].src,'alt':data.images[i].name}).css({'width':data.images[i].size.w,'height':data.images[i].size.h})
										)
									)
								);
								ml += (data.images[i].size.w + itmarg)
							};
						}
						$(set.strape).css('marginLeft',-(gStapePos() + ml));
						
						updImgList();
						pScrPos();
						
						if ((items.length - r_ind) > set.RBufer) {
							var odd = r_ind + set.RBufer;
								
							$(set.itemsID+':gt('+odd+')').each(function(){								
								$(this).remove();
							});
						}
						updImgList();
						pScrPos();
						lmove();
					},
					error: function() {alert('scroller image update faled');lmove();return false}
				})
			}
			else lmove();
		}
	};
 
};



















