// scrolling with animation
function itemsScroll(){
	
	// scroll animation speed value. Configurable
	scrollSpeed = 'slow';
	
	// setting height to all scrollable containers
	$('.scrollable').each(function(){
	
		// starting scrollable content vertical margin. used to scroll
		// defined here cause needed to auto-increment with each scroll action finished
		var currentMargin = 0;
	
		var scrollableContainer = $(this);
		
		var scrollableContent = scrollableContainer.children('.scrollable_content');
		
		scrollableContent.attr('currentMargin', '0');
		
		// get max height of item in array
		var items = $(scrollableContainer).find('.scrollable_item');
		var itemHeight = $(items[0]).outerHeight(true);
		
		for(var i=0; i < items.length; i++){
			var currentItemHeight = $(items[i]).outerHeight(true);
			var nextItemHeight = $(items[i+1]).outerHeight(true);
			if(currentItemHeight < nextItemHeight){
				itemHeight = nextItemHeight;
			}
		}
		
		$(items).css('min-height', itemHeight+'px');
		//console.log('maxheight:'+itemHeight);
		
		
		/*var itemHeight = scrollableContainer.find('.scrollable_item:first').outerHeight(true);*/
		
		// we get number of items to show from attribute
		var itemsNumber = scrollableContainer.attr('shownItems');
		// and calculate container height
		var containerHeight = itemsNumber * itemHeight;
		scrollableContainer.css('height', containerHeight+'px');
		
		scrollDownArrow = scrollableContainer.parent().children('.scroll_down');
		scrollUpArrow = scrollableContainer.parent().children('.scroll_up');
		
		scrollDownArrow.attr('containerHeight', containerHeight);
		scrollUpArrow.attr('containerHeight', containerHeight);
		
		var scrollableContentHeight = scrollableContent.outerHeight(true);
		
		scrollDownArrow.attr('contentHeight', scrollableContentHeight);
		scrollUpArrow.attr('contentHeight', scrollableContentHeight);
		
	});
	
	// scroll DOWN button
	sc_down = function(){		
		// we get the buttons using child/parent
		var scrollDownArrow = $(this);
		var scrollUpArrow = scrollDownArrow.parent().children('.scroll_up');
		var scrollableContent = scrollDownArrow.parent().children('.scrollable').children('.scrollable_content');
		var currentMargin = scrollableContent.attr('currentMargin');
		
		// get allready calculated containerHeight and contentHeight
		var scrollOffset = scrollDownArrow.attr('containerHeight');
		var scrollableContentHeight = scrollDownArrow.attr('contentHeight');
		// calculate result margin we gonna apply
		var resultMargin = currentMargin - scrollOffset;
		
		// scroll animation
		scrollableContent.animate({
			'margin-top' : resultMargin
			}, scrollSpeed, function(){
				scrollableContent.attr('currentMargin', resultMargin);
				scrollUpArrow.css('visibility', 'visible');
				
				// is it end of the list? if yes, we hide scroll Down Arrow
				if ( -scrollableContentHeight >= resultMargin-scrollOffset ){
					scrollDownArrow.css('visibility', 'hidden');
				}
		});
		
	}

	$('.scroll_down').mouseenter(sc_down);
	$('.scroll_down').click(sc_down);

	
	// scroll UP button
	
	sc_up = function(){
		// we get the buttons using child/parent
		var scrollUpArrow = $(this);
		var scrollDownArrow = scrollUpArrow.parent().children('.scroll_down');
		var scrollableContent = scrollUpArrow.parent().children('.scrollable').children('.scrollable_content');
		var currentMargin = scrollableContent.attr('currentMargin');
		
		// get allready calculated containerHeight and contentHeight
		var scrollOffset = scrollUpArrow.attr('containerHeight');
		var scrollableContentHeight = scrollUpArrow.attr('contentHeight');
		// calculate result margin we gonna apply
		var resultMargin = currentMargin - (-scrollOffset);
		
		// scroll animation
		scrollableContent.animate({
			'margin-top' : resultMargin
			}, scrollSpeed, function(){
				scrollableContent.attr('currentMargin', resultMargin);
				
				scrollUpArrow.css('visibility', 'visible');
				
				// is it end of the list? if yes, we hide scroll Down Arrow
				if ( $(this).css('margin-top') == '0px' ){
					scrollUpArrow.css('visibility', 'hidden');
				}
				
				// when up arrow is clicked, we can show the down button
				// cause there are items we can scroll after animation is done
				scrollDownArrow.css('visibility', 'visible');
		});
		
	}

	$('.scroll_up').mouseenter(sc_up);
	$('.scroll_up').click(sc_up);

	
}