//=============================================================================================================================================================

var height;

function drawSVG(ctx,img,w,h,waveform){
    var d=Math.floor(waveform.width/(w*1.5));
    var x=(height % d)*w*1.5;
    var y=Math.floor(height / d)*h;
    log(x,y)
    ctx.drawImage(img,0,0,w, h,x+10,y+100,w,h);

    if (y+100>waveform.height){
        height=-1;
        ctx.clearRect(0, 0, waveform.width, waveform.height);

    }
}



function showVolumeUpAndClear(){
    log("SHOWING volumeUp W CLEAR ============================================");
    fadeOutAllCanvasExcept("volumeUp");
    showCurve();
}

function addVolumeUp(){
    log("ADDING volumeUp============================================");
    fadeInCanvas("volumeUp");
    showCurve();
}

function showVolumeUp(){

    var
        waveform = document.getElementById( 'volumeUp' ),
        ctx = waveform.getContext( '2d' ),
        kick;
    height=-1;
    //$("#curve").fadeIn();
    ctx.clearRect(0, 0, waveform.width, waveform.height);



    var img=document.getElementById("harvwhite");
    var del=document.getElementById("harvred");

    w = 20;
    h = 40;
    img.width=w;
    img.height=h;

    //ctx.drawImage(img,0,0,img.width, img.height,10,10,ctx.width, ctx.height);


    kick = dancer.createKick({
        threshold: 0.01,
        decay: 1,
        //frequency: [0,1]
        onKick: function () {
            //var img=document.getElementById("harvwhite");
            //ctx.clearRect(0, 0, ctx.width, ctx.height);
            //log("up",height)

            //ctx.drawImage(img,0,0,img.width, img.height,0,0,waveform.width, waveform.height);


            drawSVG(ctx,img,w,h,waveform);
            height+=1;

            //ctx.beginPath();
            //ctx.moveTo(25,25);
            //ctx.lineTo(105,25);
            //ctx.lineTo(25,105);
            //ctx.fill();
            //debugger

        },
        offKick: function () {

            //log("down",height,del)
            //var del=document.getElementById("harvred");
            if (height>1){
                height--;
                if (height>1){
                    drawSVG(ctx,del,w ,h,waveform);
                }
                //ctx.drawImage(del,0,0,w, h,(height % (waveform.height/w))*w,(;aheight / (waveform.height/w))*h,w,h);
            }

        }
    }).on();

    log("trying to bind song to curve",song);
    //song.waveform( waveform, { strokeStyle: '#666', strokeWidth: 2 });

    Dancer.isSupported() || loaded();
    !dancer.isLoaded() ? dancer.bind( 'loaded', loaded ) : loaded();

    /*    dancer = new Dancer();

     * Loading
     */

    function loaded () {
        var
            loading = document.getElementById( 'loading' ),
            anchor  = document.createElement('A'),
            supported = Dancer.isSupported(),
            p;

        anchor.appendChild( document.createTextNode( supported ? 'Play!' : 'Close' ) );
        anchor.setAttribute( 'href', '#' );
        loading.innerHTML = '';
        loading.appendChild( anchor );

        if ( !supported ) {
            p = document.createElement('P');
            p.appendChild( document.createTextNode( 'Your browser does not currently support either Web Audio API or Audio Data API. The audio may play, but the visualizers will not move to the music; check out the latest Chrome or Firefox browsers!' ) );
            loading.appendChild( p );
        }

        anchor.addEventListener( 'click', function () {
            dancer.play();
            document.getElementById('loading').style.display = 'none';
        });
    }

    // For debugging
    window.dancer = dancer;

}
