var lines = [],
            start_offset = 50,
            number_of_lines = 65;
            line_distance = 10,
            stop_distance = 10,
            number_of_stops = 50,
            small_offset = 4,
            medium_offset = 20,
            large_offset = 50,
            canvas = document.getElementById("curtis"),
            context = canvas.getContext("2d"),
            interval = null;
      
        // context settings 
        context.shadowOffsetX = 0;
        context.shadowOffsetY = -2;
        context.shadowBlur    = 1;
        context.shadowColor   = 'rgba(255, 255, 255, 1)';
        context.fillStyle     = '#000';

        // Generate the first lines
        for(var j = 1; j < number_of_lines; j++){                
            var line = generate_line();                
            lines.push(line);            
        }

        // draw lines
        draw_lines(lines);
    
        // add start and stop animation on mouse over / out
        canvas.addEventListener('mouseover', function(){
            interval = setInterval(function(){ animate(lines)}, 75);
        }, false);

        canvas.addEventListener('mouseout', function(){
            clearInterval(interval);
        }, false);


        // fullscreen
        canvas.addEventListener('click', enter_fullscreen, false);

        function enter_fullscreen(){
            canvas.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);    
        }
        
        // Animate
        function animate(lines){
            
            // clear canvas
            context.save();
            context.setTransform(1, 0, 0, 1, 0, 0);
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.restore();

            // draw lines
            draw_lines(lines);

            // remove first line and add a new one
            lines.shift();
            lines.push(generate_line());
        }

        function generate_line(){
            
            var points = [];
            for(var i = 1; i < number_of_stops; i++ ){                    
                var random = Math.random(0, 1);

                // change offsets to give bulge
                if ( i <= 12 ){
                    offset = small_offset;
                }
                
                if ( i > 13 && i <= 17){
                    offset = medium_offset;
                }
                
                if ( i > 17 && i <= 33){
                    offset = large_offset;
                }
                
                if ( i > 33 && i <= 37){
                    offset = medium_offset;
                }
                
                if ( i > 37 && i <= 50){
                    offset = small_offset;
                }
                
                // set points                
                var pointX = i * stop_distance;
                var pointY = offset * random;

                // check if line is at least 1px high
                pointY = pointY < 1 ? 1 : pointY;
                
                points.push(new Array(pointX, pointY));
                
            }            
            return points;
        }

        function draw_lines(lines){
            for(var i = 1; i < lines.length; i++){                
                draw_line(lines[i], i)      
            }
        }
        
        function draw_line(points, line_number){            
           
            var line_offset = (line_number * line_distance) + start_offset;
           
            context.beginPath();
            context.moveTo(0, line_offset);          
            
            for (var i = 0; i < points.length; i++){
                context.lineTo(points[i][0], line_offset - points[i][1]);                 
            }            
            
            context.lineTo(number_of_stops * stop_distance, line_offset); 
            context.closePath();            
            context.fill();            
        }