﻿
    var mouseX = 0;
    var mouseY = 0;

    var ribbon = document.getElementById('ribbon-to-move');
    var step = 0;
    var ribbon_width = 0;
    var ribbon_middle = 0;
	var ribbon_timer;
	var ribbon_offset;

    function ribbonMove() {
    	step = Math.round((mouseX-ribbon_middle)*0.001);

    	if(step>=1) {
    		step = 1;
    		}
    	else if(step<=-1) {
    		step = -1;
    		}

        ribbon.style.left = ribbon.offsetLeft - step + 'px';

    	if(ribbon.offsetLeft <= -2850) {
    		ribbon.style.left = (0 + 'px');
    		}
    		else if(ribbon.offsetLeft >= 1) {
    			ribbon.style.left = (-2850 + 'px');
    			}

    	ribbon_timer = setTimeout('ribbonMove()', 35);
    	}

    $(document).ready(function() {
	
	    ribbon_offset = $('#ribbon-to-move').offset();
	
	    $("#ribbon-to-move").hover( 
		    function () {			    
			    $('#ribbon-to-move').fadeTo(200, 1.0);
				},
			function () {
                mouse_top = mouseY-30;				
			    /*if(ribbon_offset.top>=mouse_top) {
				    $("#ribbon-to-move").animate({"top": "-=5px"}, 50, 'easeOutSine').animate({"top": "+=5px"}, 50, 'swing');
				    }
					else {
					    $("#ribbon-to-move").animate({"top": "+=5px"}, 50, 'easeOutSine').animate({"top": "-=5px"}, 50, 'swing');
					    }*/ 			
			    $('#ribbon-to-move').fadeTo(200, 0.9, function() {
				    if(step>=1) {
					    mouseX = ribbon_width;
					    }
                        else {
						    mouseX = 0;
                            }						
				    });		
				}
			);
	
	    for(var key in ribbonArray) {
		    $(function () {
			    var img = new Image();
				var img2 = new Image();
				
				$(img)
				.load(function () {
					$(this).hide();
					$('#ribbon-part-two')
					.append(this);					
					$(this).fadeIn();
					})
				.error(function () {
					})
				.attr('src', ribbonArray[key])
				.attr('class', 'ribbon-pic');
				
				$(img2)
				.load(function () {
					$(this).hide();
					$('#ribbon-part-one').append(this);					
					$(this).fadeIn();
					})
				.error(function () {
					})
				.attr('src', ribbonArray[key])
				.attr('class', 'ribbon-pic');
			    });
		/*
		    var img = document.createElement('img');
			img.src = ribbonArray[key];
			img.className = 'ribbon-pic';
			img.setAttribute('id', 'r-pic-'+key);
			document.getElementById('ribbon-part-one').appendChild(img);
			
			$('#r-pic-'+key).load(function () {
			    $('#r-pic-'+key).fadeIn(700);				
				var img = document.createElement('img');
			    img.src = ribbonArray[key];
			    img.className = 'ribbon-pic';
			    img.setAttribute('id', 'r-pic2-'+key);
			    document.getElementById('ribbon-part-two').appendChild(img);
				$('#r-pic2-'+key).fadeIn(700);
			    });*/
		    }
	
    	ribbon_width = $('#ribbon').width();
    	ribbon_middle = ribbon_width/2;

    	$('#ribbon').mousemove( function(e) {
    		mouseX = e.pageX;
    		mouseY = e.pageY;
    		});

    	ribbonMove();
    	});

    function refreshRibbonWidth() {
    	ribbon_width = $('#ribbon').width();
    	ribbon_middle = ribbon_width/2;
    	};

    var resizeTimer = null;
    $(window).bind('resize', function() {
    	if (resizeTimer) clearTimeout(resizeTimer);
    	resizeTimer = setTimeout(refreshRibbonWidth, 100);
    	});
