if(jS_vscroller == 1) {

    $(document).ready(function(){
        $("#jS_pic0, #jS_pic1, #jS_pic2").click(function() {
          var adImg = $("#img"+this.id).attr("src");
          showFully(adImg);
        });
        
        $('#jSlider_back').click(function(){
            step_back();
        });
        $('#jSlider_forward').click(function(){
            step_forward();
        });
        
        addImg('jS_pic0', jS_p_dir+jS_list1[0], false);
        addImg('jS_pic1', jS_p_dir+jS_list1[1], false);
        addImg('jS_pic2', jS_p_dir+jS_list1[2], false);
        showFully(jS_p_dir+jS_list1[0]);
    
    });
    
    //////////////////////////
    // pre-def var's
    /////////////////////////
    var jS_startPos = 0;
    
    
    //previous pic
    function step_back() {
        jS_startPos = step_m(jS_startPos);
        hideControl();
        for(var i=jS_startPos, j=0; i<(jS_startPos+jS_pcount); i++, j++) {
            if(i != jS_startPos) {
                var nt_id = step_m2(i);
                //alert("numb pic - "+nt_id+"\nposition - "+j+"\npic - "+jS_p_dir+jS_list1[nt_id]+jS_p_ext);
                var sidd = "#jS_pic"+j;
                var remover = sidd + " img";
                $(remover).remove();
                if(i == (jS_startPos+jS_pcount)-1) {
                  addImg("jS_pic"+j, jS_p_dir+jS_list1[nt_id], true);
                }
                else {
                  addImg("jS_pic"+j, jS_p_dir+jS_list1[nt_id], false);
                }
            }
            else {
                //alert("numb pic - "+jS_startPos+"\nposition - "+j+"\npic - "+jS_p_dir+jS_list1[jS_startPos]+jS_p_ext);
                var sidd = "#jS_pic0";
                var remover = sidd + " img";
                $(remover).remove();
                addImg("jS_pic0", jS_p_dir+jS_list1[jS_startPos], false);
            }
        }
    }
    
    
    //next pic
    function step_forward() {
        jS_startPos = step_p(jS_startPos);
        hideControl();
        //for(var i=jS_startPos, j=0; i<(jS_startPos+jS_pcount); i++, j++) {
        for(var i=(jS_startPos+jS_pcount)-1, j=2; i>=jS_startPos; i--, j--) {
            if(i != jS_startPos) {
                var nt_id = step_m2(i);
                //alert("numb pic - "+nt_id+"\nposition - "+j+"\npic - "+jS_p_dir+jS_list1[nt_id]+jS_p_ext);<br>
							  var sidd = "#jS_pic"+j;
							  var remover = sidd + " img";
							  $(remover).remove();
                addImg("jS_pic"+j, jS_p_dir+jS_list1[nt_id], false);
                //addImg("jS_pic"+j, jS_p_dir+jS_list1[nt_id], false);
                //$("#jS_pic"+j).attr("src", jS_p_dir+jS_list1[nt_id]);
            }
            else {
                //alert("numb pic - "+jS_startPos+"\nposition - "+j+"\npic - "+jS_p_dir+jS_list1[jS_startPos]+jS_p_ext);
                var sidd = "#jS_pic0";
                var remover = sidd + " img";
                $(remover).remove();
                addImg("jS_pic0", jS_p_dir+jS_list1[jS_startPos], true);
            }
        }
    }
    
    function step_p (t_id) {
        t_id = t_id-1;
        if(t_id<0) {
            t_id = jS_list1.length + t_id;
        }
        return t_id;
    }
    
    function step_m (t_id) {
        t_id = t_id+1;
        if(t_id>jS_list1.length-1) {
            t_id = t_id - jS_list1.length;
        }
        return t_id;
    }
    function step_m2(t_id) {
        if(t_id>jS_list1.length-1) {
            t_id = t_id - jS_list1.length;
        }
        return t_id;
    }
}


function addImg(idd, imag, shC) {
  var sidd = "#"+idd;
  var img = new Image();
  $(sidd).addClass('loading');
  // wrap our new image in jQuery, then:
  $(img)
    // once the image has loaded, execute this code
    .load(function () {
      // set the image hidden by default    
      $(this).hide();
    
      // with the holding div #loader, apply:
      $(sidd)
        // remove the loading class (so no background spinner), 
        .removeClass('loading')
        // then insert our image
        .html(this);
      
      if(shC == true) {
        //alert(shC);
        showControl();
      }
      
      // fade our image in to create a nice effect
      $(this).fadeIn();
    })
    
    // if there was an error loading the image, react accordingly
    .error(function () {
      // notify the user that the image could not be loaded
    })
    
    // *finally*, set the src attribute of the new image to our image
    .attr('src', imag);
    
  $(img).attr("id", "img"+idd);
	  
}

function showFully(adImg) {
  if(adImg){
	  $("#preview img").remove();
	  var img = new Image();
	  $("#preview").addClass('loading');
	  $(img)
	    .load(function() {
	      $(this).hide();
	      
	      $("#preview")
	        .removeClass('loading')
	        .html(this);
	      $(this).fadeIn();
	    })
	    .attr('src', 'p'+adImg);
	}
}

function hideControl() {
  $("#left_ui").hide();
  $("#right_ui").hide();
  $("#left_ui").removeAttr("onClick");
  $("#right_ui").removeAttr("onClick");
}

function showControl() {
  $("#right_ui").show();
  $("#left_ui").show();
  $("#left_ui").attr("onClick", "step_forward()");
  $("#right_ui").attr("onClick", "step_back()");
}