/**
 * Constructor of our Preview object
 * @param $field [HTMLObject]
 * @constructor
 */
function Preview($field, App)
{
    this.$canvas = $field;
    this.App = App;
}

/**
 * this will render our preview
 */
Preview.prototype.render = function()
{
    $("body").ConvertSVG();
};

Preview.prototype.clearCanvas = function()
{

    this.$canvas.html("");
};

/**
 * this will initialize our preview by injecting data into our canvas
 */
Preview.prototype.initialize = function()
{
    this.$wrapper = $("<div/>",{
        class : 'svg preview-wrapper'
    });

    this.$leftWall = $("<div/>",{
        class : 'wall-left wall'
    });

    this.$rightWall = $("<div/>",{
        class : 'wall-right wall'
    });

    this.$radiatorStart = $("<div/>",{
        class : 'radiator-start radiator'
    });

    this.$radiatorEnd = $("<div/>",{
        class : 'radiator-end radiator'
    });

    this.$radiatorCenter = $("<div/>",{
        class : 'radiator-center-wrapper radiator repeatable'
    });

    this.$conversionLeft = $("<div/>",{
        class : 'radiator conversion conversion-left'
    });

    this.$webbingRepeat = $("<div>",{
        class: "radiator webbing radiator-repeat"
    });

    this.$cornerRepeat = $("<div/>",{
        class: "radiator-corner-repeat"
    });

    this.injectImages();
    this.calculateCenterBlocks();
    this.spawnRadiator();
    this.$wrapper.append(this.$leftWall, this.$radiatorStart, this.$radiatorCenter, this.$radiatorEnd, this.$rightWall);
    this.$canvas.append(this.$wrapper);

    $("body").ConvertSVG();
};

Preview.prototype.showCurWebbing = function ()
{
    // Clear radiator start html
    this.$radiatorStart.html("");

    // Backup
    this.setBackground(this.$radiatorStart, '/wp-content/plugins/product-customizer/img/module/conversion-left.svg').css({
        'background-position': 'right',
        'background-repeat':   'no-repeat'
    });

    this.setBackground(this.$radiatorEnd, '/wp-content/plugins/product-customizer/img/module/conversion-right.svg').css({
        'background-position'   :   'left',
        'background-repeat'     :   'no-repeat'
    });

    // Add class
    this.$radiatorCenter.addClass("conversion-visible");

    // Check if we have already an webbing url
    // Else we need to set the default webbing
    if (!app.cart.currentRadiator.webbings.url)
        var url = app.cart.currentRadiator.webbings.url;
    else
        var url = "/wp-content/plugins/product-customizer/img/module/webbing-00.svg";

    this.setBackground(this.$radiatorCenter, url).css({});
};

Preview.prototype.showCurConversion = function ()
{
    // //check for existance
    // if(app.preview.$radiatorCenter.html() != "")
    // {
    //     //console.log("bestaat al");
    // }
    // else
    // {
    // }

    this.$webbingWrapper = $("<div/>", {
        class: 'webbing-wrapper repeat webbing-repeat radiator-repeat',
    });


    this.setBackground(this.$webbingWrapper, app.cart.currentRadiator.corners.url);
    this.$radiatorCenter.html(this.$webbingWrapper);

};

Preview.prototype.setBackground = function ($object, url)
{
    // if ($object !== undefined)
    return $object.css('background-image', 'url(' + url + ')');
};

/**
 * This changes the size of our radiator on the canvas Without animation, useful for when spawning first time
 */
Preview.prototype.spawnRadiator = function()
{
    this.$radiatorCenter.css('width', this.futureWidth);
};

/**
 * Injects images
 */
Preview.prototype.injectImages = function()
{
    this.$radiatorStart.html("<img class='svg' src='/wp-content/plugins/product-customizer/img/module/radiator-left.png'>");
    this.$radiatorCenter.html("<img class='svg' src='/wp-content/plugins/product-customizer/img/module/radiator-repeat.png'>");
    this.$radiatorEnd.html("<img class='svg' src='/wp-content/plugins/product-customizer/img/module/radiator-right.png'>");
};
/**
 * Calculates and returns the right amount of center blocks for the radiator.
 */
Preview.prototype.calculateCenterBlocks = function()
{
    // Get the length of the radiator
    var length = this.App.cart.currentRadiator.measures.inner.length;

    // Get amount of blocks to repeat, max set to 4.
    this.blocks = Math.round(Math.min(Math.max(1, length / 100), 4));
    this.futureWidth = 150 * this.blocks;
    this.animateWidth();
};


Preview.prototype.animateWidth = function()
{
    this.setWallInterval();
    this.$radiatorCenter.animate({width: this.futureWidth}, 200, $.proxy(this.stopWallInterval,this));
};

Preview.prototype.setWallInterval = function()
{
    this.interval = setInterval(this.calculateWalls, 1);
};

Preview.prototype.stopWallInterval = function()
{
    clearInterval(this.interval);
};

/**
 * this will refresh all data and measures.
 */
Preview.prototype.update = function()
{

};

/**
 * this will start animating towards our new situation.
 * @param animationtype
 */
Preview.prototype.animate = function(animationType)
{
    return true || false;
};

Preview.prototype.WallHack = function(id)
{
    switch(id)
    {
        case 'Muur aan de linker kant':
            $(".wall").hide();
            $(".wall-left").show();

            app.situation = "left";
            break;
        case 'Muur aan de rechter kant':
            $(".wall").hide();
            $(".wall-right").show();
            app.situation = "right";

            break;
        case 'Muur aan de beide kanten':
            $(".wall").show();
            app.situation = "both";
            break;
        case 'Geen muur':
            $(".wall").hide();
            app.situation = "none";
            break;
        default:
            $(".wall").hide();
            break;
    }
};

Preview.prototype.showConversion = function() {

    // return false;
    this.$radiatorStart.html("<img class='svg conversion' src='/wp-content/plugins/product-customizer/img/module/conversion-left.svg'>");
    this.$radiatorEnd.html("<img class='svg conversion' src='/wp-content/plugins/product-customizer/img/module/conversion-right.svg'>");
    this.$radiatorCenter.html(this.injectConversion(this.blocks))
    this.$radiatorStart.addClass('conversion-left');
    this.$radiatorEnd.addClass('conversion-right');
    this.$radiatorCenter.addClass('conversion-repeat');
    $("body").ConvertSVG();
};

Preview.prototype.injectConversion = function(I)
{
    // return false;
    var string = "";
    for(i = I; i!=0;i--)
    {
        string += "<img class='svg conversion' src='/wp-content/plugins/product-customizer/img/module/conversion-repeat.svg'>";
    }
    return string;
};

Preview.prototype.injectWebbing = function(webbing)
{
    this.webbing = webbing;

    console.log("De webbing is:", webbing);

    var string = "";
    sI = 0;

    webbingArray = [];

    for(i = this.blocks; i != 0; i--)
    {
        leftOffset = 9+(150*sI);
        sI++;

        //console.log(webbing);
        webbingArray[sI] = $("<img/>", {
            class: 'svg webbing',
            style: 'left : '+leftOffset+'px',
            src:   '/wp-content/plugins/product-customizer/img/module/' + webbing + '.svg'
        });

        //redundant
        string += "<img class='svg webbing' style='left:" + leftOffset + "px' src='/wp-content/plugins/product-customizer/img/module/" + webbing + ".svg' >"
    }

    $(".radiator-center-wrapper").ConvertSVG({
        preload:        true,
        preloadObjects: webbingArray,
    });
};

Preview.prototype.switchCorner = function(corner)
{

};

Preview.prototype.calculateWalls = function()
{
    // Get width from elements
    var previewRadiator = $(".preview-wrapper").width();
    var previewBanner = $("#preview-canvas").width();

    var sum = (previewBanner - previewRadiator);
    sum = (sum / 2 + 40);

    if (app.situation)
    {
        switch(app.situation)
        {
            case "left":
                $(".wall-left").css({width: sum});
                break;
            case "right":
                $(".wall-right").css({width: sum});
                break;
            case "both":
                $(".wall-left, .wall-right").css({width: sum});
                break;
        }
    }
};

Preview.prototype.rebuildPreview = function()
{
    this.WallHack(app.cart.currentRadiator.situation.name);

    if(app.stepPointer > 2)
    {
        this.showCurWebbing();
        this.showCurConversion();
    }
};

Preview.prototype.temp = function()
{
    this.clearCanvas();

    this.showConversion();
};