/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
(function( $ ){
    /* PLUGIN STUFF HERE */

    /*
     * Erzeuge Sprechblasen an einem Element. Das Aussehen wird über die CSS Datei
     * gesteuert. Dazu einfach die Klassen bubble, bTop, bBottom, bLeft und bRight
     * anpassen!
     */
    $.fn.showBubble = function(text,side){
        $.console("showBubble");
        if(side == null) side = "top";
        $("body").append("<div id='bubble' />");
        var div = $("div#bubble"); // Bubble Element
        div.addClass("bubble");
        div.addClass(side);
        div.html(text);
        div.fadeIn(500);
        $.console(div);
        $.console("showBubble_fin");
    };
    $.fn.hideBubble = function(){
        $("div#bubble").hide(500).remove();
    };

    /*
     * Kleines Plugin für die Ausgabe von Fehlern im Firebug (falls installeirt),
     * Opera oder im Safari.
     */
    $.console = function(text,type){
        if(type == null) type="debug";

        /*
         * Meldung in Konsole ausgeben und Fehler abfangen, falls der IE oder
         * ein FF ohne Firebug verwendet wird!
         */
        try{
            switch(type){
                case 'error':
                    console.error(text);
                break;
                case 'log':
                    console.log(text);
                break;
                case 'debug':
                default:
                   console.debug(text);
            }
        }catch(Exception){
            // Do Nothing PUNK!
        }
    };
})( jQuery );

function drawCloud(ctx,x,y,scale, alpha){

        if(scale==null){
            scale=1;
        }
        if(alpha==null){
            alpha=1;
        }

        // ebene1/Gruppe/Pfad
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.bezierCurveTo(x-2.6  *scale,y            ,x-5.2  *scale,y+0.5  *scale,x-7.5  *scale,y+1.5*scale);
        ctx.bezierCurveTo(x-4.9  *scale,y-1.3  *scale,x-3.3  *scale,y-5    *scale,x-3.3  *scale,y-9*scale);
        ctx.bezierCurveTo(x-3.3  *scale,y-17.5 *scale,x-10.2 *scale,y-24.4 *scale,x-18.7 *scale,y-24.4*scale);
        ctx.bezierCurveTo(x-19.7 *scale,y-24.4 *scale,x-20.6 *scale,y-24.3 *scale,x-21.6 *scale,y-24.1*scale);
        ctx.bezierCurveTo(x-18.1 *scale,y-29.8 *scale,x-16   *scale,y-36.6 *scale,x-16   *scale,y-43.8*scale);
        ctx.bezierCurveTo(x-16   *scale,y-64.4 *scale,x-32.8 *scale,y-81.2 *scale,x-53.4 *scale,y-81.2*scale);
        ctx.bezierCurveTo(x-54.7 *scale,y-81.2 *scale,x-55.9 *scale,y-81.1 *scale,x-57.1 *scale,y-81*scale);
        ctx.bezierCurveTo(x-60.5 *scale,y-111.1*scale,x-86   *scale,y-134.6*scale,x-117.1*scale,y-134.6*scale);
        ctx.bezierCurveTo(x-150.4*scale,y-134.6*scale,x-177.4*scale,y-107.6*scale,x-177.4*scale,y-74.3*scale);
        ctx.bezierCurveTo(x-177.4*scale,y-72.2 *scale,x-177.3*scale,y-70.1 *scale,x-177  *scale,y-68*scale);
        ctx.bezierCurveTo(x-180.8*scale,y-69.2 *scale,x-184.9*scale,y-69.8 *scale,x-189.1*scale,y-69.8*scale);
        ctx.bezierCurveTo(x-196.2*scale,y-69.8 *scale,x-202.9*scale,y-68   *scale,x-208.8*scale,y-64.8*scale);
        ctx.bezierCurveTo(x-220  *scale,y-78.1 *scale,x-236.8*scale,y-86.5 *scale,x-255.5*scale,y-86.5*scale);
        ctx.bezierCurveTo(x-289.1*scale,y-86.5 *scale,x-316.3*scale,y-59.5 *scale,x-316.7*scale,y-26.1*scale);
        ctx.bezierCurveTo(x-321.6*scale,y-28.8 *scale,x-327.3*scale,y-30.4 *scale,x-333.4*scale,y-30.4*scale);
        ctx.bezierCurveTo(x-352.6*scale,y-30.4 *scale,x-368.1*scale,y-14.8 *scale,x-368.1*scale,y+4.4*scale);
        ctx.bezierCurveTo(x-368.1*scale,y+22.4 *scale,x-354.3*scale,y+37.3 *scale,x-336.7*scale,y+38.9*scale);
        ctx.lineTo(x-336.7*scale,y+39.1*scale);
        ctx.lineTo(x,y+39.1*scale);
        ctx.bezierCurveTo(x+10.9*scale,y+39.1*scale,x+19.7*scale,y+30.3*scale,x+19.7*scale,y+19.6*scale);
        ctx.bezierCurveTo(x+19.7*scale,y+8.8*scale,x+10.9*scale,y,x,y);
        ctx.closePath();
        ctx.fillStyle = "rgba(255, 255, 255,"+alpha+")";
        ctx.fill();

        //ebene1/Gruppe/Pfad
        x-=20*scale;
        y-=1*scale;
        scale = scale * 0.8;
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.bezierCurveTo(x-2.6  *scale,y            ,x-5.2  *scale,y+0.5  *scale,x-7.5  *scale,y+1.5*scale);
        ctx.bezierCurveTo(x-4.9  *scale,y-1.3  *scale,x-3.3  *scale,y-5    *scale,x-3.3  *scale,y-9*scale);
        ctx.bezierCurveTo(x-3.3  *scale,y-17.5 *scale,x-10.2 *scale,y-24.4 *scale,x-18.7 *scale,y-24.4*scale);
        ctx.bezierCurveTo(x-19.7 *scale,y-24.4 *scale,x-20.6 *scale,y-24.3 *scale,x-21.6 *scale,y-24.1*scale);
        ctx.bezierCurveTo(x-18.1 *scale,y-29.8 *scale,x-16   *scale,y-36.6 *scale,x-16   *scale,y-43.8*scale);
        ctx.bezierCurveTo(x-16   *scale,y-64.4 *scale,x-32.8 *scale,y-81.2 *scale,x-53.4 *scale,y-81.2*scale);
        ctx.bezierCurveTo(x-54.7 *scale,y-81.2 *scale,x-55.9 *scale,y-81.1 *scale,x-57.1 *scale,y-81*scale);
        ctx.bezierCurveTo(x-60.5 *scale,y-111.1*scale,x-86   *scale,y-134.6*scale,x-117.1*scale,y-134.6*scale);
        ctx.bezierCurveTo(x-150.4*scale,y-134.6*scale,x-177.4*scale,y-107.6*scale,x-177.4*scale,y-74.3*scale);
        ctx.bezierCurveTo(x-177.4*scale,y-72.2 *scale,x-177.3*scale,y-70.1 *scale,x-177  *scale,y-68*scale);
        ctx.bezierCurveTo(x-180.8*scale,y-69.2 *scale,x-184.9*scale,y-69.8 *scale,x-189.1*scale,y-69.8*scale);
        ctx.bezierCurveTo(x-196.2*scale,y-69.8 *scale,x-202.9*scale,y-68   *scale,x-208.8*scale,y-64.8*scale);
        ctx.bezierCurveTo(x-220  *scale,y-78.1 *scale,x-236.8*scale,y-86.5 *scale,x-255.5*scale,y-86.5*scale);
        ctx.bezierCurveTo(x-289.1*scale,y-86.5 *scale,x-316.3*scale,y-59.5 *scale,x-316.7*scale,y-26.1*scale);
        ctx.bezierCurveTo(x-321.6*scale,y-28.8 *scale,x-327.3*scale,y-30.4 *scale,x-333.4*scale,y-30.4*scale);
        ctx.bezierCurveTo(x-352.6*scale,y-30.4 *scale,x-368.1*scale,y-14.8 *scale,x-368.1*scale,y+4.4*scale);
        ctx.bezierCurveTo(x-368.1*scale,y+22.4 *scale,x-354.3*scale,y+37.3 *scale,x-336.7*scale,y+38.9*scale);
        ctx.lineTo(x-336.7*scale,y+39.1*scale);
        ctx.lineTo(x,y+39.1*scale);
        ctx.bezierCurveTo(x+10.9*scale,y+39.1*scale,x+19.7*scale,y+30.3*scale,x+19.7*scale,y+19.6*scale);
        ctx.bezierCurveTo(x+19.7*scale,y+8.8*scale,x+10.9*scale,y,x,y);
        ctx.closePath();
        gradient = ctx.createLinearGradient(x-250*scale, y-250*scale, x-50*scale, y-50*scale);
        gradient.addColorStop(0.07, "rgba(255, 255, 255,0.3)");
        gradient.addColorStop(0.07, "rgba(255, 255, 255,0.3)");
        gradient.addColorStop(0.08, "rgba(255, 255, 255,0.3)");
        gradient.addColorStop(0.67, "rgba(202, 202, 202,0.3)");
        gradient.addColorStop(1.00, "rgba(149, 149, 149,0.3)");
        ctx.fillStyle = gradient;
        ctx.fill();
    };
function drawClouds(clouds){
    ctx.clearRect(0,0,$("#canvas").width(),$("#canvas").height());
    for(var x = 0;x<clouds.length;x++){
        drawCloud(ctx,clouds[x].x,clouds[x].y,clouds[x].scale,clouds[x].alpha);
        clouds[x].x+=clouds[x].step;
        if(clouds[x].x-500*clouds[x].scale>$("#canvas").width()) clouds[x].x = 0;
    }
    // Funktion hinzufügen die testet, ob nicht ein anderes Stylesheet angewenet wurde!
    if($("#canvas").css("visibility") != "hidden"){
        setTimeout(drawClouds,10,clouds);
    }
    else{
        ctx.clearRect(0,0,$("#canvas").width(),$("#canvas").height());
        $("#canvas").css("display","none");
        setTimeout(checkCanvas,500,$("#canvas"),clouds);
    }
}
function checkCanvas(canvas,clouds){
    if($("#canvas").css("visibility") != "hidden"){
        $("#canvas").css("display","block");
        setTimeout(drawClouds,150,clouds);
    } else {
        setTimeout(checkCanvas,150,canvas,clouds);
    }
}