/*How this works:
	before anything can happen the widths need to be set for the inner right container.
	so using an event listener check for the dom loading then apply the right block col width
	to the right block.
	
	then to make the right column scroll properly we find the ratio of the scrollable heights 
	then times the amount scrolled by the scroll ratio and apply it as a -top. I decided to 
	do this for performance even though margin-top would have allowed us to not have to mess
	around width the widths, the difference in performance is worth it. 
	
	the positions of everything are recalculated on resize aswell as the scrollratio will change.
	
	then there is a throttle of the scroll and resize event listeners to requestanimationframe,
	this ties the maximum processing to 60 times per second.
*/

var leftBlock = document.getElementById("left-block-height");
var rightBlock = document.getElementById("right-block-height");
var rightBlockCol = document.getElementById("right-block-col");
var rightBlockColWidth = rightBlockCol.clientWidth;
var leftBlockHeight = leftBlock.clientHeight;
var rightBlockHeight = rightBlock.clientHeight;
var scrollRatio  = (rightBlockHeight-window.innerHeight)/(leftBlockHeight-window.innerHeight);
var scrollRatioCalc = 0;

//when dom has loaded applies the widths. calculating/recalculating scrolls is handled inside resizeScrollHandler
document.addEventListener("DOMContentLoaded", function(event) { 
		rightBlockColWidth = rightBlockCol.clientWidth;
		rightBlock.setAttribute("style","width:"+rightBlockColWidth+"px");
		resizeScrollHandler();
		responsiveHandler();
});

function resizeScrollHandler(){
	if(window.innerWidth > 850 || window.innerHeight > 650){
	//gets the new heights
	leftBlockHeight = leftBlock.clientHeight;
    rightBlockHeight = rightBlock.clientHeight;
    //recalculates scroll ratio
    scrollRatio  = (rightBlockHeight-window.innerHeight)/(leftBlockHeight-window.innerHeight);
  	scrollRatioCalc = (window.scrollY * scrollRatio * -1); 
	//applies it to a -top of the right block
    rightBlock.style.top = scrollRatioCalc+"px";
   }
}

//swaps out some a class to remove scrolling products
function responsiveHandler(){
	if(window.innerWidth < 851 || window.innerHeight < 651){
		document.getElementById("left-block-height").className = "col-xs-12 rmv-padding";
	} else {
		document.getElementById("left-block-height").className = "col-xs-9 rmv-padding";
	}
}

// handle event
window.addEventListener("optimizedResize", function() {
	rightBlockColWidth = rightBlockCol.clientWidth;
	rightBlock.setAttribute("style","width:"+rightBlockColWidth+"px");	
	resizeScrollHandler();   
	responsiveHandler();
});

// handle event
window.addEventListener("optimizedScroll", function() {
   if(window.innerWidth > 850 || window.innerHeight > 650){
    scrollRatioCalc = (window.scrollY * scrollRatio * -1);    
    rightBlock.style.top = scrollRatioCalc+"px";
   } 
});


//generic throttle, with resize and scroll applied to it for calculations, tying it to requestanimation frame
;(function() {
    var throttle = function(type, name, obj) {
        obj = obj || window;
        var running = false;
        var func = function() {
            if (running) { return; }
            running = true;
            requestAnimationFrame(function() {
                obj.dispatchEvent(new CustomEvent(name));
                running = false;
            });
        };
        obj.addEventListener(type, func);
    };

    
    throttle ("scroll", "optimizedScroll");
    throttle("resize", "optimizedResize");
})();


$sidebarTopText = $(".sidebar-top-text");
$sidebarMiddleText = $(".sidebar-middle-text");
$sidebarBottomText = $(".sidebar-bottom-text");

// handle event
window.addEventListener("optimizedResize", function() {
	if($sidebarTopText.offset().top+$sidebarTopText.outerHeight() > $sidebarBottomText.offset().top)
	{
		$sidebarMiddleText.css("top","auto");
		$sidebarMiddleText.css("position","relative");
		$sidebarMiddleText.css("transform","none");
	}
	if($sidebarMiddleText.offset().top+$sidebarMiddleText.outerHeight() > $sidebarBottomText.offset().top)
	{
		$sidebarBottomText.css("display","none");
	}
	else
	{
		$sidebarBottomText.attr("style", "");
	}
});

$(window).load(function(){
	if($sidebarTopText.offset().top+$sidebarTopText.outerHeight() > $sidebarMiddleText.offset().top)
	{
		$sidebarMiddleText.css("top","auto");
		$sidebarMiddleText.css("position","relative");
		$sidebarMiddleText.css("transform","none");
	}
	if($sidebarMiddleText.offset().top+$sidebarMiddleText.outerHeight() > $sidebarBottomText.offset().top)
	{
		$sidebarBottomText.css("display","none");
	}
	else
	{
		$sidebarBottomText.css("display","block");
	}
});