$(function() {	
 var scrollEl = $('#scrollable-container'), scrollContEl = $('#scrollable-content-left'); 
 var btnPrev = $('#scroll_btn_prev'), btnNext = $('#scroll_btn_next');  
 var y_scroll = scrollEl.innerHeight(), y_scroll_cont = scrollContEl.innerHeight();
 var dis2scroll = y_scroll - y_scroll_cont; 
 var speed=500; //ms

 
 var parSizeAr = []; 
 var par = $('div.para');//scrollable elements
 var nPar = par.length;
 par.css('padding','1px 0');//collapsing margins fix
 //$('div.para p').css('line-height','13px');

 
 //get heights of scrollabe elements
 for(var i=0; i<nPar; i++) {   
   var heightDiv =  $(par[i]).innerHeight();
   parSizeAr[i] = heightDiv;
 } 
 
 //devide parts in subparts if part > container element and put in new array 
 var c=0;
 var subParPartsAr = [];
 $.each(parSizeAr,function(k,v){
	  
   var parParts =  Math.ceil(v/y_scroll_cont);
   if(parParts > 1){
     for(var i=0; i<parParts; i++){    	 

    	 subParPartsAr[c++] = (i < (parParts-1))? y_scroll_cont : v-((parParts-1)*(y_scroll_cont)); 
     }
   }else{
	   
	   subParPartsAr[c++] = v;  
   }
  });
 
 
 //remove last element if < container element 
 if(subParPartsAr[subParPartsAr.length-1] <= y_scroll_cont){ 
   subParPartsAr = subParPartsAr.slice(0,self.length-1);
 }
 nPar = subParPartsAr.length;//new length
 

 
 //initiate array for mouse-scroll corrections
 var mouseScrollCorAr = [];
 for(var i=0; i<nPar; i++){
	 
	 mouseScrollCorAr[i] = 0;   	 
 } 
 
 
 var maxPos = nPar, cN = 0, cP = maxPos, curPos = 0;

 if(y_scroll > y_scroll_cont){
 
	 btnNext.click(function(){
	 
	 if( cN < maxPos ){

		 step = subParPartsAr[cN];
		 scrollEl.animate({'marginTop':'-='+step+'px'},speed);
		 cN++; cP--;		 
		 //alert('cP: '+cP+' & cN: '+cN+' step: '+step);
	 }
 });
	 
	 
 btnPrev.click(function(){
	 
	 if( cP < maxPos ){
		 
		 var cp_rev = 0+((maxPos)-cP)-1; //flip the array index
		 step = subParPartsAr[cp_rev];
		 scrollEl.animate({'marginTop':'+='+step+'px'},speed);
		 cN--;cP++;	
		 //alert('cP: '+cP+' & cN: '+cN+' step: '+step);
	 }	 
 });
 
 scrollEl.bind('mousewheel', function(event, delta) {
	 var dir = delta > 0 ? 'u' : 'd';
     //vel = Math.abs(delta);
	 
	 switch(dir){
		 case 'u':			 
			 if( cP < maxPos ){
				 var cp_rev = 0+((maxPos)-cP)-1; //flip the array index
				 step = subParPartsAr[cp_rev];				   	
				 $(this).animate({'marginTop':'+='+step+'px'},speed);
				 cN--;cP++;			 
		     }
		 break;

		 case 'd':
			 if( cN < maxPos ){
				   step = subParPartsAr[cN];				   				 
				   $(this).animate({'marginTop':'-='+step+'px'},speed);
				   cN++; cP--;		   
			 }
			 break;
	 }	 
     return false;
 });

 }else{

	 btnPrev.css('visibility','hidden');
	 btnNext.css('visibility','hidden');

  }	
});




//btnNext.click(function(){
//
//	 if(y_scroll > y_scroll_cont && newY <= dis2scroll){
//		 dis2go = dis2scroll-newY;		
//		 step = (dis2scroll < step)?dis2scroll:step;
//		 step = (dis2go <= step)? step+50:step;
//		 scrollEl.animate({'marginTop':'-='+step+'px'},speed);
//		 newY = newY+step; 
//	 }
//});
//	 
//	 
//btnPrev.click(function(){
//	 if(y_scroll > y_scroll_cont && newY > 0){
//		 step = (newY < step)? step-50:step;		 
//		 scrollEl.animate({'marginTop':'+='+step+'px'},speed);
//		 newY = newY-step;
//	 }	 
//});