$(function(){
//Structure of slider must be as follow
	/*	<div class="wslider"> <!-- wslider -->
			<div class="preview"> <!-- preview -->
				<div class="inner">
					<div><img src="img/albums/1/p_img1.jpg" alt="" /></div>
					<div><img src="img/albums/1/p_img2.jpg" alt="" /></div>
				</div>
			</div> <!-- end preview -->
			<div class="controll"> <!-- control -->
				<div class="toleft"><img src="img/wSlideToLeft.jpg" alt="" /></div>
				<div class="inner">
					<div><img src="img/albums/1/c_img1.jpg" alt="" /></div>
					<div><img src="img/albums/1/c_img2.jpg" alt="" /></div>
				</div>
				<div class="toright"><img src="img/wSlideToRight.jpg" alt="" /></div>
			</div> <!-- end control -->
		</div> <!-- end wslider -->
	*/
//wSlider
	//Get DOM
		var w = {};
			/* Preview DOM */
			w.slider = $("#wslider");
			w.slider.prev = $("#wslider #preview");
			w.slider.prev.inner = $("#wslider #preview #inner");
			w.slider.prev.inner.div = $("#wslider #preview #inner div");
			w.slider.prev.inner.img = $("#wslider #preview #inner img");
			/* Controll DOM */
			w.slider.controll = $("#wslider #controll");
			w.slider.controll.inner = $("#wslider #controll #inner");
			w.slider.controll.inner.div = $("#wslider #controll #inner div");
			w.slider.controll.inner.div.img = $("#wslider #controll #inner div img");
				/* left - right arrows of controll */
				w.slider.controll.toleft = $("#wslider #controll #toleft");
				w.slider.controll.toleft.img = $("#wslider #controll #toleft img");
				w.slider.controll.toright = $("#wslider #controll #toright");
				w.slider.controll.toright.img = $("#wslider #controll #toright img");
	//Set Vars
		/* editable vars */
		var set = {};
			set.width = 933; //wSlider container width
			set.prevBlockWidth = 706; //Width of one preview block in preview container
			set.leftPadding = 10; //set padding for one image block in preview and controll containers
			set.ctrlBlockWidth = 202; //image block width in controll areas
			set.duration = 750; //Scroll speed
		
		/* wSlider behavior controll settings */
		var disableControllArr = false;
		if(w.slider.prev.inner.div.length <= 4){
			disableControllArr = true;
		}
		var hideControllArr = true;
		/* get images count */
		var objectsCount = w.slider.prev.inner.div.length;
		/* inner width */
		var prevInnerWidth = (set.prevBlockWidth * objectsCount) + (objectsCount * set.leftPadding) - set.leftPadding;
		var controllInnerWidth = (set.ctrlBlockWidth * objectsCount) + (objectsCount * set.leftPadding) - set.leftPadding;
	//Set css
		/* for wSlider */
		w.slider.width(set.width);
		/* for preview area */
		w.slider.prev
			.css(
				{
					position:"relative", 
					overflow:"hidden"
				}
			);

		w.slider.prev.inner //inner
			.css(
				{
					position:"relative",
					left:0,
					width:prevInnerWidth
				}
			)
			.addClass("clearfix");

		w.slider.prev.inner.div //inner -> div
			.css(
				{
					float:"left", 
					paddingLeft:set.leftPadding
				}
			)
			.first()
				.css({paddingLeft:0});

		/* controll area */
		w.slider.controll
			.css(
				{
					position:"relative", 
					overflow:"hidden", 
					marginTop:set.leftPadding
				}
			);

		w.slider.controll.inner
			.css(
				{
					position:"relative", 
					left:0, 
					width:controllInnerWidth
				}
			)
			.addClass("clearfix");

		w.slider.controll.inner.div
			.css(
				{
					float:"left", 
					paddingLeft:set.leftPadding
				}
			)
			.first()
				.css(
					{
						paddingLeft:0
					}
				)
			/* arrows */
			if(!disableControllArr){
				w.slider.controll.toleft.css({position:"absolute", top:0, left:0, zIndex:1});
				w.slider.controll.toleft.img.css({cursor:"pointer"});
				w.slider.controll.toright.css({position:"absolute", top:0, right:0});
				w.slider.controll.toright.img.css({cursor:"pointer"});
			}else{
				w.slider.controll.toleft.remove();
				w.slider.controll.toright.remove();
			}
			
	//Logic
		/* Hide controll arrows */
		if(hideControllArr){
			w.slider.controll.toleft.css({display:"none"});
			w.slider.controll.toright.css({display:"none"});
		//Set mouse move to controll panel
			w.slider.controll
				.mousemove(function(e){
					var stop = controllInnerWidth - set.width;
					var x = e.layerX;
					var left = parseInt(w.slider.controll.inner.css("left"));
					if(left < 0) left *= -1;
					var center = ($(this).width() + left) - ($(this).width() / 2);
					if(x <= center-1 && x >= (w.slider.controll.toleft.width())){
						if(parseInt(w.slider.controll.inner.css("left")) != 0){
							$(w.slider.controll.toleft).fadeIn();
						}
						$(w.slider.controll.toright).fadeOut();
					}else if(x >= center+1 && x <= (center*2) - (w.slider.controll.toright.width())){
						if(parseInt(w.slider.controll.inner.css("left")) != -stop){
							$(w.slider.controll.toright).fadeIn();
						}
						$(w.slider.controll.toleft).fadeOut();
					}
				})
				.mouseleave(function(){
					$(w.slider.controll.toleft).fadeOut();
					$(w.slider.controll.toright).fadeOut();
				})
		}
		/* set click event on toright */
		w.slider.controll.toright.img.click(function(){
			var moveto = set.width;
			var stop = controllInnerWidth - set.width;
			var realPos = parseInt(w.slider.controll.inner.css("left"));
			if(realPos < 0) realPos *= -1;
			if(stop - realPos < set.width) moveto = stop - realPos;
			w.slider.controll.inner.stop().animate({left:"-="+moveto+"px"}, set.duration, function(){
				var left = parseInt(w.slider.controll.inner.css("left"));
				if(left < 0) left *= -1;
				if(left == stop){
					w.slider.controll.toright.fadeOut();
				}
			});
		});
		/* set click event on toleft */
		w.slider.controll.toleft.img.click(function(){
			var move = set.width;
			var stop = 0;
			var realPos = parseInt(w.slider.controll.inner.css("left"))
			if(realPos < 0) realPos *= -1;
			if(realPos < set.width) move = realPos;
			w.slider.controll.inner.stop().animate({left:"+="+move+"px"}, set.duration, function(){
				var left = parseInt(w.slider.controll.inner.css("left"));
				if(left == 0){
					w.slider.controll.toleft.fadeOut();
				}
			});
		});
		/* set click event on image */
		//To images
		w.slider.controll.inner.div.click(function(){
			var pos = parseInt($(this).index()) * ((set.prevBlockWidth * -1) - set.leftPadding);
			w.slider.prev.inner.animate({left:pos}, set.duration);
		});
		
});