$(function(){
    
    function isVisible( offset, height, scrollTop, windowHeight ){
        offset = parseFloat(offset);
        height = parseFloat(height);
        scrollTop = parseFloat(scrollTop);
        windowHeight = parseFloat(windowHeight);
        if( (offset < scrollTop && offset+height > scrollTop) || ( offset>scrollTop && offset < scrollTop + windowHeight ) ) {
            return ( offset + height/2 ) - (scrollTop + windowHeight/2);
        }
        if( scrollTop == 0 && offset == 0 ) return 0;           
        return -1;
    }
    
    function calculateNewTop(initTop, visible, ratio)
    {
        return initTop + visible*ratio;
    }
    
    var pages = new Array( 
        { handle: $("#page-now-playing"), visible: -1 }
    );
    
    var getElements = true;
    function getElementsOffset(getElements)
    {
        var windowScrollTop = $(window).scrollTop();
        var windowHeight = $(window).height();
        for(var i = 0; i<pages.length; i++)
        {
            pages[i].visible = isVisible( pages[i].handle.offset().top, pages[i].handle.height(), windowScrollTop, windowHeight );
            if(getElements)
            {
                pages[i].layerUp = pages[i].handle.find(".layerUp");
                pages[i].layerDown = pages[i].handle.find(".layerDown");
                
                pages[i].layerUp.each(function() {
                    $(this).attr("initLeft", $(this).position().left);
                    $(this).attr("initTop", $(this).position().top);
                });
                pages[i].layerDown.each(function() {
                    $(this).attr("initLeft", $(this).position().left);
                    $(this).attr("initTop", $(this).position().top);
                });
            }
            
            pages[i].layerDown.each(function() {
                if( $(this).hasClass("no-moving") ) return false;
                var ratio = $(this).attr('3d');
                var initTop = $(this).css("position") == "absolute" ? parseInt($(this).attr("initTop")) : 0;
                var power = ($(this).attr('data-add-power')) ? parseFloat($(this).attr('data-add-power')) : 1;
                $(this).stop().animate({
                    top: calculateNewTop(initTop, pages[i].visible, -ratio) * power
                }, 100)
            });
            pages[i].layerUp.each(function() {
                if( $(this).hasClass("no-moving") ) return false;
                var ratio = $(this).attr('3d');
                var initTop = $(this).css("position") == "absolute" ? parseInt($(this).attr("initTop")) : 0;
                var power = ($(this).attr('data-add-power')) ? parseFloat($(this).attr('data-add-power')) : 1;
                $(this).stop().animate({
                    top: calculateNewTop(initTop, pages[i].visible, ratio) * power
                }, 100)
            });
        }
        getElements = false;
    }
    
   var os = $.client.os;
   
   if ( os != "iPad" && os != "iPhone/iPod" ) {
	   	 getElementsOffset(true);
	    
	    $(window).scroll(function(){
	        getElementsOffset();
	    })
   }
   
})