js

if (!$.browser.webkit) {
  $(".onlych").show();
}

$(".items li").click(function () {
    $(".step#one").addClass('pt-page-moveToTopEasing pt-page-ontop').on('load', function () {
        $(".step#one").css('display', 'none');
    });
    $(".step#two").css('display', 'block');
    $(".step#two").addClass('pt-page-moveFromBottom');
});

$(".own").click(function () {

    $(".frames").hide();
    $(".blockFrameImg").remove();
    $("#four .content").css('width', '815px');
    $(".step#two").addClass('pt-page-moveToTopEasing pt-page-ontop').on('load', function () {
        $(".step#two").css('display', 'none');
    });
    $(".step#four").css('display', 'block');
    $(".step#four").addClass('pt-page-moveFromBottom');
});

$(".thr").click(function () {
    $(".step#two").addClass('pt-page-moveToTopEasing pt-page-ontop').on('load', function() {
        $(".step#two").css('display', 'none');
    });
    $(".step#four").css('display', 'block');
    $(".step#four").addClass('pt-page-moveFromBottom');
});


/*$('.items li').click(function() {
    $('.step#one').hide();
    $('.step#two').show();
});*/


$(document).ready(
  function() {
    $("html").niceScroll({cursorwidth: '10px'});
  }
);

$(".cat .title").click(function() {
    $(".content-frames").hide("blind");
    $(this).next().show("blind");
})

$(".el").mouseenter(function() {
    var title = $(this).attr('title');
    $(this).append('<div class="tool"><div class="arrow-left"></div>'+title+'</div>');
    $(this).children('.tool').show('drop');
})

$(".el").mouseleave(function() {
    $('.tool').hide('drop').on('load', function() {
        $(".tool").remove();
    });
});

$(".options-del").click(function () {
    $(".focused").remove();
    $(".options").hide();
    $(".optionsEmots").hide();
    $(".optionsImg").hide();
})

/************ sdfsd */

var scale;

function makeBlock(width, height, scale) {
    $('.blockFrame').css({
        'width' : width + 'px',
        'height': height + 'px',
        'zoom'  : scale,
    });

    $('.blockFrameImg').css({
        'width' : width + 'px',
        'height': height + 'px',
    });

    $('.frameContent').css({
        'width' : width + 'px',
        'height': height + 'px',
    });

    var marginLeft = (697-(width*scale)) / 2;
    var viewWidth = $('.view').width();

    var marginTop = (492-(height * scale)) / 2;
    var viewHeight = $('.view').height();

    $('.blockFrame').css({
        'margin-left': marginLeft / scale+'px',
        'margin-top': marginTop / scale+'px'
    });
}


function showFrame(id) {
    var newId = '#'+id;
    $(newId).show();
}

$("ul.items li").click(function() {
    var width  = $(this).children('.productWidth').html();
    var height = $(this).children('.productHeight').html();
    scale  = $(this).children('.productScale').html();
    id     = $(this).children('.productId').html();
    $("body").append('<div class = "proId" style="display: none">'+id+'</div>');

    if(id == 'product74') {
        $(".blockFrame").css('border-radius', '10000pt');


    } else if(id == 'product76') {
        $(".blockFrame").css('border-radius', '50pt');
        $(".ipCamera").show();
    } else if(id == 'product75') {
        $(".blockFrame").css('border-radius', '50pt');
    } else if(id == 'product77') {
        $(".blockFrame").css('border-radius', '50pt');
        $(".ipCamera").show();
    }

    if(id == 'product43') {
        $(".minImgShow").addClass("poduE");
    } else if(id == 'product72') {
        $(".minImgShow").addClass("shirtE");
    } else if(id == 'product41') {
        $(".minImgShow").addClass("kubekE");
    } else if(id == 'product73') {
        $(".minImgShow").addClass("puzzleE");
    } else if(id == 'product74') {
        $(".minImgShow").addClass("podOE");

    } else if(id == 'product75') {
        $(".minImgShow").addClass("podE");
    } else if(id == 'product77') {
        $(".minImgShow").addClass("phonE");
    } else if(id == 'product76') {
        $(".minImgShow").addClass("phonCE");
    }

    makeBlock(width, height, scale);
    showFrame(id);
});

$(".frame").click(function() {
    $('.load').fadeIn();

    $(".frameActive").hide();
    $(this).children('.frameActive').show();

    var frameImgSrc = 'http://nadruki24h.pl/generator/admin/frames/';
    var frameImg = frameImgSrc + $(this).attr('data-image');

    $('<img/>').attr('src', frameImg).load(function() {
        $(".load").fadeOut();
    })

    $(".blockFrameImg").css({
        background: 'url('+frameImg+')',
    })
});



/* elements */

$('.color').ColorPicker({
    color: '#000', // kolor startowy
    onShow: function (colpkr) {
        $(colpkr).fadeIn(200);
        return false;
    },
    onHide: function (colpkr) {
        $(colpkr).fadeOut(100);
        return false;
    },
    onChange: function (hsb, hex, rgb) {
        $('.color').css('backgroundColor', '#' + hex);
        $('.focused').css('color', '#'+hex);
    }
});

function updateTextStatus(textValue, textSize, textColor, textFont) {
    $("#text-holder").attr('value', textValue);
    $("#size-holder").attr('value', textSize);
    $(".color").ColorPickerSetColor(textColor);
    $(".color").css('background', textColor);
    $(".fontytype-holder option[value="+textFont+"]").attr('selected', 'selected');
}

function updateEmotStatus(textSize, textColor) {
    $("#size-holderEmot").attr('value', textSize);
    $(".color").ColorPickerSetColor(textColor);
    $(".color").css('background', textColor);
}

var zIndex = 1;

$(".frame-text").click(function() {
    $(".focused").removeClass("focused");
    var element = $('<span class="text-in focused" /></div>').text('Wpisz swĂłj tekst...');
    $(".blockFrame").append(element);
    $(element).css('z-index', zIndex++);

    $(".options").show();
    $(".optionsEmots").hide();
    $(".optionsImg").hide();

    var actualText = element.html();
    updateTextStatus(actualText, 140, '#000000', 'Arial');

    var pointerX = 0;
    var pointerY = 0;

    element.click(function() {
        $(this).css("z-index", zIndex++);
        $(".blockFrame").find('.focused').removeClass('focused');
        $(".options").hide();
        $(".optionsEmots").hide();
        $(".optionsImg").hide();
        $(this).toggleClass("focused");
        $(".options").show();

        var actText  = element.html();
        var actSize  = parseInt(element.css('font-size'));
        var actColor = element.css('color');
        var actFont  = element.css('font-family');

        updateTextStatus(actText, actSize, actColor, actFont);

    })

    element.draggable({
        start: function(evt, ui) {
            $(this).css("z-index", zIndex++);
            $(".blockFrame").find('.focused').removeClass('focused');
            $(".options").hide();
            $(".optionsEmots").hide();
            $(".optionsImg").hide();
            $(this).toggleClass("focused");
            $(".options").show();

            var actText  = element.html();
            var actSize  = parseInt(element.css('font-size'));
            var actColor = element.css('color');
            var actFont  = element.css('font-family');

            updateTextStatus(actText, actSize, actColor, actFont);

            pointerY = (evt.pageY - $('.blockFrame').offset().top) / scale - parseInt($(evt.target).css('top'));
            pointerX = (evt.pageX - $('.blockFrame').offset().left) / scale - parseInt($(evt.target).css('left'));
        },
        drag : function(evt, ui) {
            var canvasTop = $('.blockFrame').offset().top;
            var canvasLeft = $('.blockFrame').offset().left;
            var canvasHeight = $('.blockFrame').height();
            var canvasWidth = $('.blockFrame').width();

            // Fix for zoom
            ui.position.top = Math.round((evt.pageY - canvasTop) / scale - pointerY);
            ui.position.left = Math.round((evt.pageX - canvasLeft) / scale - pointerX);

            // Finally, make sure offset aligns with position
            ui.offset.top = Math.round(ui.position.top + canvasTop);
            ui.offset.left = Math.round(ui.position.left + canvasLeft);
        },
    });

});

$(".closeOptions").click(function() {
    $(".focused").removeClass('focused');
    $(".options").hide();
    $(".optionsEmots").hide();
    $(".optionsImg").hide();
});

/* options set */

$("#text-holder").keyup(function() {
    var textVal = $(this).attr('value');
    $(".focused").html(textVal);
});

$("#size-holder").change(function() {
    var textSize = $(this).attr('value');
    $(".focused").css('font-size', textSize+"pt");
});

$("#size-holderEmot").change(function() {
    var textSize = $(this).attr('value');
    $(".focused").css('font-size', textSize+"pt");
});

$(".fontytype-holder").change(function() {
    var fontType = $(this).attr('value');
    $(".focused").css('font-family', fontType);
});


/* emots */

$(".frame-emot").click(function() {
    $(".emots-choose").fadeIn();
});

$(".frame-emot").click(function(data, handler) {
    if(data.target == this) {
        $(this).hide();
    };
});

$(".emots-ul li").click(function() {
    var emotCon = $(this).html();

    $('.focused').removeClass('focused');
    var elementW = $('<span class="emot-in focused" /></div>').text(emotCon);
    if($(".proId").text() == 'product74') {
        elementW.css("left", "1100px");
    }

    $(".blockFrame").append(elementW);
    $(".emots-choose").hide();
    $('.optionsEmots').show();
    $('.options').hide();
    $(".optionsImg").hide();
    var actSize  = parseInt(elementW.css('font-size'));
    var actColor = elementW.css('color');
    updateEmotStatus(actSize, actColor);

    elementW.click(function() {
        $(this).css("z-index", zIndex++);
        $(".blockFrame").find('.focused').removeClass('focused');
        $(".optionsEmots").hide();
        $(".options").hide();
        $(".optionsImg").hide();
        $(this).toggleClass("focused");
        $(".optionsEmots").show();

        var actSize  = parseInt(elementW.css('font-size'));
        var actColor = elementW.css('color');

        updateEmotStatus(actSize, actColor);
    })

    elementW.draggable({
        start: function(evt, ui) {
            $(this).css("z-index", zIndex++);
            $(".blockFrame").find('.focused').removeClass('focused');
            $(".optionsEmots").hide();
            $(".options").hide();
            $(".optionsImg").hide();
            $(this).toggleClass("focused");
            $(".optionsEmots").show();

            var actSize  = parseInt(elementW.css('font-size'));
            var actColor = elementW.css('color');

            updateEmotStatus(actSize, actColor);

            pointerY = (evt.pageY - $('.blockFrame').offset().top) / scale - parseInt($(evt.target).css('top'));
            pointerX = (evt.pageX - $('.blockFrame').offset().left) / scale - parseInt($(evt.target).css('left'));
        },
        drag : function(evt, ui) {
            var canvasTop = $('.blockFrame').offset().top;
            var canvasLeft = $('.blockFrame').offset().left;
            var canvasHeight = $('.blockFrame').height();
            var canvasWidth = $('.blockFrame').width();

            // Fix for zoom
            ui.position.top = Math.round((evt.pageY - canvasTop) / scale - pointerY);
            ui.position.left = Math.round((evt.pageX - canvasLeft) / scale - pointerX);

            // Finally, make sure offset aligns with position
            ui.offset.top = Math.round(ui.position.top + canvasTop);
            ui.offset.left = Math.round(ui.position.left + canvasLeft);
        },
    });

});


$(".frame-file").click(function() {
    $(".filed").click();
});


var imgNumber = 1;
var b = 1;

$(".filed").change(function() {
    $("#imageform").ajaxForm({
        beforeSend: function() {
            /** pred wyslaniem dodac jakies csy **/
            $(".load").show();
        },
        complete: function(response) {

            if(response.responseText == 'badImg') {
                alert('Maksymalny rozmiar zdjęcia wynosi 1Mb');
                $('#imageform').resetForm();

                $(".load").hide();
            } else {
                $(".focused").removeClass("focused");
            var frameImage =  $('<div class="image-out focused" id="'+imgNumber+'" />');
            $(".frameContent").append(frameImage);
            $(frameImage).css('z-index', b++);
            $(".image-out#"+imgNumber).append('<img src="uploads/'+response.responseText+'">');

            if($(".proId").text() == 'product74') {
                frameImage.css("left", "1100px");
            }



            $('.optionsEmots').hide();
            $('.options').hide();
            $('.optionsImg').show();


                $('<img/>').attr('src', 'uploads/'+response.responseText).load(function() {
                    var widthImg = $(frameImage).children().width() + 20;
                var heightImg = $(frameImage).children().height() + 20;
                $(frameImage).css('height', heightImg + 'px');
                $(frameImage).css('width', widthImg + 'px');

                $(frameImage).children().css('height', heightImg + 'px');
                $(frameImage).children().css('width', widthImg + 'px');

                $('#imageform').resetForm();

                $(".load").hide();

                var pointerX;
                var pointerY;

                frameImage.click(function() {
                    $(".focused").removeClass("focused");
                            frameImage.addClass("focused");
                            $(".optionsEmots").hide();
                            $(".options").hide();
                            $(".optionsImg").show();
                });

                frameImage.draggable({
                        start: function(evt, ui) {
                            $(".focused").removeClass("focused");
                            frameImage.addClass("focused");
                            $(".optionsEmots").hide();
                            $(".options").hide();
                            $(".optionsImg").show();

                            pointerY = (evt.pageY - $('.blockFrame').offset().top) / scale - parseInt($(evt.target).css('top'));
                            pointerX = (evt.pageX - $('.blockFrame').offset().left) / scale - parseInt($(evt.target).css('left'));
                            $('.optionsEmots').hide();
                            $('.options').hide();
                            $('.optionsImg').show();
                        },
                        drag: function(evt,ui)
                        {
                            var canvasTop = $('.blockFrame').offset().top;
                            var canvasLeft = $('.blockFrame').offset().left;
                            var canvasHeight = $('.blockFrame').height();
                            var canvasWidth = $('.blockFrame').width();

                            // Fix for zoom
                            ui.position.top = Math.round((evt.pageY - canvasTop) / scale - pointerY);
                            ui.position.left = Math.round((evt.pageX - canvasLeft) / scale - pointerX);



                            // Finally, make sure offset aligns with position
                            ui.offset.top = Math.round(ui.position.top + canvasTop);
                            ui.offset.left = Math.round(ui.position.left + canvasLeft);

                            $(".frameContent").css({
                                'zIndex': '1',
                                'opacity': '0.8',
                            });

                        },
                        stop: function() {
                            $(".frameContent").css({
                                'zIndex': '20',
                                'opacity': '1',
                            })
                        },
                });

                frameImage.children().resizable({
                        aspectRatio: true,
                        stop: function(event, ui) {
                            $(frameImage).css('height', ui.size.height + 'px');
                            $(frameImage).css('width', ui.size.width + 'px');
                        },
                });
                });



            imgNumber++;
            }



        }
    }).submit();
});

$(".frame-clear").click(function() {
    $(".frameContent").empty();
    $(".blockFrame span").remove();
    $(".options").hide();
    $(".optionsEmots").hide();
    $(".optionsImg").hide();
    $(".closeOptions").hide();
});

$(".blockFrame").mouseenter(function() {
    $(".blockFrameImg").css('z-index', '5');
    $(".frameContent").css('z-index', '10');
});

$(".blockFrame").mouseleave(function() {
    $(".blockFrameImg").css('z-index', '10');
    $(".frameContent").css('z-index', '5');
    $(".image-out").css('opacity', '1');
});



$(".end").click(function() {
    $("#screenEnd").show();

        $(".blockFrame").css({
            zoom: 1,
            margin: 0,
            padding: 0,
            position: 'absolute',
        });



        $(".focused").removeClass('focused');


            html2canvas($(".blockFrame"), {

                logging: true,
                onrendered: function(canvas) {


                        var strDataURI = canvas.toDataURL("image/jpeg");
                        //Canvas2Image.saveAsPNG(canvas);
                        //var strDataURI = Canvas2Image.convertToJPEG(canvas);
                        $(".minImgShow").append('<img class="endImg" style="display: none;" src="'+strDataURI+'">');
                        if($(".proId").text() == 'product74') {
                            $(".endImg").css("border-radius", "2000pt");
                        } else if($(".proId").text() == 'product76') {
                            $(".endImg").css("border-radius", "20pt");
                            $(".minImgShow").append('<img src="img/ip5.png" class="ip5"/>');
                        } else if($(".proId").text() == 'product77') {
                            $(".endImg").css("border-radius", "20pt");
                            $(".minImgShow").append('<img src="img/ip4.png" class="ip5"/>');
                        }  else if($(".proId").text() == 'product73') {
                            $(".minImgShow").append('<img src="img/puzzle.png" class="puzzle5"/>');
                        } else if($(".proId").text() == 'product75') {
                            $(".endImg").css("border-radius", "20pt");
                        }
                        $(".loaderE").hide();
                        $(".minImgShow").show();
                        $(".endImg").show();
                        $(".afr").attr('href', strDataURI);

                }

        }, 5000);


})