function positionSite() {
    calculateAndPositionViewport();

    calculateAndPositionMenu();
}

function calculateAndPositionMenu() {
    
    var viewport = $("#viewport");
    var menu = $('#menuContainer');

    //set top position of menu		
    menu.css({ top: viewport.position().top - (menu.height() - 40) });
    
    //set width of menu    
    menu.width(viewport.width());

    //set left position of menu    
    menu.css({ left: viewport.position().left });    
}

function calculateAndPositionViewport() {
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();

	var viewport = $("#viewport");

	var viewportWidth = viewport.width();	
	var viewportHeight = viewport.height();


	//set top position of viewport		
	var offsetHeight = windowHeight - viewportHeight;
	if (offsetHeight > 0) {
	    viewport.css({ top: (Math.floor((offsetHeight / 4) * 3)) });	
	}
	else viewport.css({ top: 50 }); //set at default 50px from top

	//calculate width of viewport
	var widthUnits = Math.floor(windowWidth / 220);
	viewport.width((widthUnits * 220) + 10);	

	//set left position of viewport
	var offsetWidth = windowWidth - viewport.width();
	if (offsetWidth > 0) {
	    viewport.css({ left: (Math.floor((offsetWidth / 5) * 2)) });	
	}
	else viewport.css({ left: 0 }); //set at default 0px from left

}
/*
function calculateScrollBarPosition() {
    var viewport = $("#viewport");

    var viewportWidth = viewport.width();
    var viewportHeight = viewport.height() - 20; //deduct 20px for horizontal scrollbar

    var scrollBar = $('#scrollBar');

    //set top position of viewport    
    scrollBar.css({ top: viewport.offset().top + viewportHeight });

    //calculate width of scrollBar -> equal to width of viewport
    scrollBar.width(viewportWidth);

    //set left position of scrollBar    
    scrollBar.css({ left: viewport.offset().left });

    //set position of right arrow container
    var rightArrow = $('#scrollBar a.right');
    rightArrow.css({ left: scrollBar.width() - rightArrow.width() });        
    
}
*/
/*
function updateScrollBar() {
    var arrowLeftWidth = $('#scrollBar a.left').width();
    var arrowRightWidth = $('#scrollBar a.right').width();

    var bar = $('#scrollBar #bar');
    bar.css({ left: arrowLeftWidth + 5 });

    var maxBarSize = $('#scrollBar').width() - (arrowLeftWidth + 5) - (arrowRightWidth + 5);
    bar.width(maxBarSize);

    var viewport = $("#viewport");
    var container = $('#container');

    var barStepSize = maxBarSize / container.outerWidth();
    if (barStepSize < 0.99) {
        $('#scrollBar').css({ display: 'block' });
    } else {
        $('#scrollBar').css({ display: 'none' });
    }


    alert(barStepSize);
    
}*/