if(document.getElementById("whapz-puzzle")){
var whapz_horizontal_pieces=optional_puzzle_vars.whapz_horizontal_pieces;
var whapz_vertical_pieces=optional_puzzle_vars.whapz_vertical_pieces;
var whapz_scaling=optional_puzzle_vars.whapz_scaling;
var whapz_canvas_color=optional_puzzle_vars.whapz_canvas_color;
var whapz_opacity_img=optional_puzzle_vars.whapz_opacity_img;
var whapz_control_panel_upload=optional_puzzle_vars.whapz_control_panel_upload;
var whapz_post_id=optional_puzzle_vars.whapz_post_id;
var whapz_bg_color='rgb(255, 255, 255, 0)';
var $=jQuery;
if($('#whapz-puzzle').parent().width() <='768'){
var whapz_image=optional_puzzle_vars.whapz_mobile_image;
var height=400;
}else{
var whapz_image=optional_puzzle_vars.whapz_desktop_image;
var height=768;
}
var scaling=whapz_scaling;
var countPieces=0;
var totalPieces=0;
var width=$('#' + scaling + '').width();
if($.cookie('whapz_full_screen')!=null){
$('#wha-puzzle canvas').remove();
$("html").animate({scrollTop: 0}, "fast");
$('.whapz-small').fadeOut(300);
if($(window).width() > 768){
var whapz_image=optional_puzzle_vars.whapz_desktop_image;
}
whapz_frame('full', width, height);
let whapz_cpu='';
if(whapz_control_panel_upload==='1'){
whapz_cpu =
"<div class='whapz-form-upload'>\n"+
"<form id='formElem' enctype='multipart/form-data'>" +
"<input type='file' name='imagefile' id='imagefile' class='whapz-inputfile' />" +
"<label for='imagefile'>Choose Image</label>" +
"<input type='hidden' name='id_post' id='id_post' value='"+whapz_post_id+"'>" +
"<input class='whapz-add-image' name='add-image' type='button' value='Add Image'>" +
"</form></div>";
}
$('body').append("<div class='whapz-panel-puzzle whapz-full'>" +
"<a id='whapz-button-full' title='Minimize screen' href='javascript:wha_screen(\"" + whapz_scaling + "\",flag=true);'>\n" +
"<img src='/wp-content/plugins/wha-puzzle/images/icon-small-screen.png'></a>" +
"<div class='whapz-timer-wrap'> \n" +
"<div class='whapz-group-buttons'>\n" +
"<input class='whapz-startButton' type='button' title='Start game'>\n" +
"<input class='whapz-resetButton' type='button' title='Reset game'>\n" +
"</div><div class='whapz-timer-item'>\n" +
"<span  class='whapz-min'>00</span>:<span class='whapz-sec'>00</span></div></div>\n" +
whapz_cpu +
"<div class='whapz-completed'>Completed:<span></span></div>\n" +
"</div></div>");
$('.whapz-full').fadeIn(300);
}else{
wha_screen(scaling);
}
function wha_screen(scal, flag){
if(scal=='full'){
$.cookie('whapz_full_screen', 'full');
window.location.replace(window.location.pathname + window.location.search + window.location.hash);
}
if(flag){
$.cookie('whapz_full_screen', null);
window.location.replace(window.location.pathname + window.location.search + window.location.hash);
}
whapz_frame(scal, width, height);
}
function whapz_frame(scal, width, height){
var frame=new Frame(scal, width, height);
frame.on("ready", function (){
zog("ready from ZIM Frame");
var stage=frame.stage;
var stageW=frame.width;
var stageH=frame.height;
$('#myCanvas').css({'top': '-20px'});
var puzzleX;
var puzzleY;
frame.outerColor=whapz_bg_color;
frame.color=whapz_canvas_color;
var con=new Container;
var imageObj=[];
var piecesArrayObj=[];
frame.loadAssets(["" + whapz_image + ""], "/wp-content/uploads/");
var label=new Label({
text: "",
size: 50,
font: "courier",
color: "black",
rollColor: "#3a3a3a",
fontOptions: "bold"
});
stage.addChild(label);
label.x=20;
label.y=20;
label.on("click", function (){
zog("clicking");
});
frame.on("complete", function (){
imageObj=frame.asset("" + whapz_image + "").clone();
imageObj.addTo(con);
imageObj.alpha=whapz_opacity_img;
var piecesArray=new Array();
var horizontalPieces=whapz_horizontal_pieces;
var verticalPieces=whapz_vertical_pieces;
var obj=getQueryString();
zog(obj);
if(obj){
horizontalPieces=obj.row;
verticalPieces=obj.column;
}
var imageWidth=imageObj.width;
var imageHeight=imageObj.height;
var pieceWidth=Math.round(imageWidth / horizontalPieces);
var pieceHeight=Math.round(imageHeight / verticalPieces);
var gap=20;
totalPieces=horizontalPieces * verticalPieces;
puzzleX=stageW / 2 - imageWidth / 2;
puzzleY=stageH / 2 - imageHeight / 2;
imageObj.pos(puzzleX, puzzleY);
zog(puzzleX, puzzleY);
$('.whapz-completed span').text(countPieces + "/" + totalPieces);
for (var j=0; j < verticalPieces; j++){
piecesArrayObj[j]=[];
for (var i=0; i < horizontalPieces; i++){
var n=j + i * verticalPieces;
var offsetX=pieceWidth * i;
var offsetY=pieceHeight * j;
var x8=Math.round(pieceWidth / 8);
var y8=Math.round(pieceHeight / 8);
piecesArrayObj[j][i]=new Object();
piecesArrayObj[j][i].right=Math.floor(Math.random() * 2);
piecesArrayObj[j][i].down=Math.floor(Math.random() * 2);
if(j > 0){
piecesArrayObj[j][i].up=1 - piecesArrayObj[j - 1][i].down;
}
if(i > 0){
piecesArrayObj[j][i].left=1 - piecesArrayObj[j][i - 1].right;
}
piecesArray[n]=new Rectangle({
width: pieceWidth,
height: pieceHeight,
});
var tileObj=piecesArrayObj[j][i];
var s=new Shape;
var context=s.graphics;
s.drag();
s.mouseChildren=false;
s.addEventListener("pressup", function (e){
var mc=e.currentTarget;
var xx=Math.round(mc.x);
var yy=Math.round(mc.y);
if(xx < puzzleX + gap / 2&&xx > puzzleX - gap / 2&&yy > puzzleY - gap / 2){
if(!$('.whapz-startButton').hasAttr('data')){
WHAPZ_Clock.start();
$('.whapz-startButton').attr('data', 'start').css({'background': 'url("/wp-content/plugins/wha-puzzle/images/icon-pause.png") no-repeat 0 0'});
}
mc.x=puzzleX;
mc.y=puzzleY;
mc.noDrag();
mc.addTo(mc.parent, 0);
mc.mouseChildren=false;
mc.mouseEnabled=false;
mc.hint.visible=false;
countPieces++;
$('.whapz-completed span').text(countPieces + "/" + totalPieces);
zog("countPieces", countPieces);
if(countPieces==totalPieces){
WHAPZ_Clock.pause();
$('.whapz-startButton').removeAttr('data').css({'background': 'url("/wp-content/plugins/wha-puzzle/images/icon-start.png") no-repeat 0 0'});
$('.whapz-used-minutes').text($('.whapz-min').eq(0).text());
$('.whapz-used-second').text($('.whapz-sec').eq(0).text());
$('.whapz_tw_share').attr("href", "https://twitter.com/share?text=" + encodeURIComponent('I did in ') + "" + $('.whapz-min').eq(0).text() + ":" + $('.whapz-sec').eq(0).text() + " " + encodeURIComponent('minutes, can you beat my record?') + "");
$('.whapz_fb_share').attr("href", "https://www.facebook.com/share.php?u=http://"+window.location.hostname+"&t=" + encodeURIComponent('I did in ') + "" + $('.whapz-min').eq(0).text() + ":" + $('.whapz-sec').eq(0).text() + " " + encodeURIComponent('minutes, can you beat my record?') + "");
$('.whapz_ln_share').attr("href", "http://www.linkedin.com/shareArticle?summary=" + encodeURIComponent('I did in ') + "" + $('.whapz-min').eq(0).text() + ":" + $('.whapz-sec').eq(0).text() + " " + encodeURIComponent('minutes, can you beat my record?') + "");
$('#overlay').fadeIn(400,
function (){
$('#modal_form')
.css('display', 'block')
.animate({opacity: 1, top: '50%'}, 200);
if($('#modal_form .wrapper-inner iframe').length > 0){
const iframe=$('#modal_form .wrapper-inner iframe');
iframe.css('height', '250px');
iframe.css('width', '100%');
if($(iframe[0]).context.height > 250){
$('#modal_form .wrapper-inner').css({'overflowY':'scroll','maxHeight':'250px'});
}}
if($('#modal_form .wrapper-inner').height() > 250&&$('#modal_form .wrapper-inner iframe').length===0){
$('#modal_form .wrapper-inner').css({'overflowY':'scroll','maxHeight':'250px'})
}});
}
stage.update();
}});
context.setStrokeStyle(3, "round");
var commandi1=context.beginStroke(createjs.Graphics.getRGB(0, 0, 0)).command;
var commandi=context.beginBitmapFill(imageObj.image).command;
context.moveTo(offsetX, offsetY);
if(j!=0){
context.lineTo(offsetX + 3 * x8, offsetY);
if(tileObj.up==1){
context.curveTo(offsetX + 2 * x8, offsetY - 2 * y8, offsetX + 4 * x8, offsetY - 2 * y8);
context.curveTo(offsetX + 6 * x8, offsetY - 2 * y8, offsetX + 5 * x8, offsetY);
}else{
context.curveTo(offsetX + 2 * x8, offsetY + 2 * y8, offsetX + 4 * x8, offsetY + 2 * y8);
context.curveTo(offsetX + 6 * x8, offsetY + 2 * y8, offsetX + 5 * x8, offsetY);
}}
context.lineTo(offsetX + 8 * x8, offsetY);
if(i!=horizontalPieces - 1){
context.lineTo(offsetX + 8 * x8, offsetY + 3 * y8);
if(tileObj.right==1){
context.curveTo(offsetX + 10 * x8, offsetY + 2 * y8, offsetX + 10 * x8, offsetY + 4 * y8);
context.curveTo(offsetX + 10 * x8, offsetY + 6 * y8, offsetX + 8 * x8, offsetY + 5 * y8);
}else{
context.curveTo(offsetX + 6 * x8, offsetY + 2 * y8, offsetX + 6 * x8, offsetY + 4 * y8);
context.curveTo(offsetX + 6 * x8, offsetY + 6 * y8, offsetX + 8 * x8, offsetY + 5 * y8);
}}
context.lineTo(offsetX + 8 * x8, offsetY + 8 * y8);
if(j!=verticalPieces - 1){
context.lineTo(offsetX + 5 * x8, offsetY + 8 * y8);
if(tileObj.down==1){
context.curveTo(offsetX + 6 * x8, offsetY + 10 * y8, offsetX + 4 * x8, offsetY + 10 * y8);
context.curveTo(offsetX + 2 * x8, offsetY + 10 * y8, offsetX + 3 * x8, offsetY + 8 * y8);
}else{
context.curveTo(offsetX + 6 * x8, offsetY + 6 * y8, offsetX + 4 * x8, offsetY + 6 * y8);
context.curveTo(offsetX + 2 * x8, offsetY + 6 * y8, offsetX + 3 * x8, offsetY + 8 * y8);
}}
context.lineTo(offsetX, offsetY + 8 * y8);
if(i!=0){
context.lineTo(offsetX, offsetY + 5 * y8);
if(tileObj.left==1){
context.curveTo(offsetX - 2 * x8, offsetY + 6 * y8, offsetX - 2 * x8, offsetY + 4 * y8);
context.curveTo(offsetX - 2 * x8, offsetY + 2 * y8, offsetX, offsetY + 3 * y8);
}else{
context.curveTo(offsetX + 2 * x8, offsetY + 6 * y8, offsetX + 2 * x8, offsetY + 4 * y8);
context.curveTo(offsetX + 2 * x8, offsetY + 2 * y8, offsetX, offsetY + 3 * y8);
}}
context.lineTo(offsetX, offsetY);
s.addTo(con);
var fill=new createjs.Graphics.Fill("red");
var hint=new Shape();//s.clone(true);
hint.mouseChildren=false;
hint.mouseEnabled=false;
s.hint=hint;
hint.graphics=context.clone(true);
hint.pos(puzzleX, puzzleY);
hint.graphics._fill=fill;
hint.graphics._fill.style=null;
hint.addTo(con, 0);
s.animate({
obj: {
x: rand (-offsetX, stageW - offsetX - pieceWidth),
y: rand (-offsetY, stageH - offsetY - pieceHeight)
}, time: 700
});
}}
con.addTo(stage);
stage.update();
});
stage.update();
});
}
$('#modal_close, #overlay').click(function (){
var src=$('#modal_form iframe').attr('src');
$('#modal_form iframe').attr('src', '');
$('#modal_form iframe').attr('src', src);
$('#modal_form')
.animate({opacity: 0, top: '45%'}, 200,
function (){
jQuery(this).css('display', 'none');
jQuery('#overlay').fadeOut(400);
}
);
});
var WHAPZ_Clock={
totalSeconds: 0,
start: function (){
var self=this;
function pad(val){
return val > 9 ? val:"0" + val;
}
this.interval=setInterval(function (){
self.totalSeconds +=1;
$(".whapz-min").text(pad(Math.floor(self.totalSeconds / 60 % 60)));
$(".whapz-sec").text(pad(parseInt(self.totalSeconds % 60)));
}, 1000);
},
reset: function (){
WHAPZ_Clock.totalSeconds=null;
clearInterval(this.interval);
$(".whapz-min").text("00");
$(".whapz-sec").text("00");
},
pause: function (){
clearInterval(this.interval);
delete this.interval;
}};
$('.whapz-startButton').click(function (){
if(!$(this).hasAttr('data')){
WHAPZ_Clock.start();
$('.whapz-startButton').attr('data', 'start').css({'background': 'url("/wp-content/plugins/wha-puzzle/images/icon-pause.png") no-repeat 0 0'});
}else{
WHAPZ_Clock.pause();
$('.whapz-startButton').removeAttr('data').css({'background': 'url("/wp-content/plugins/wha-puzzle/images/icon-start.png") no-repeat 0 0'});
}});
$('.whapz-resetButton').click(function (){
window.location.replace(window.location.pathname + window.location.search + window.location.hash);
});
$.fn.hasAttr=function (name){
return this.attr(name)!==undefined;
};
window.onload=function(){
$('.whapz-panel-puzzle .whapz-add-image').on('click',function(e){
let btn=$(this);
let label=$('.whapz-panel-puzzle form label');
let file_data=$('.whapz-panel-puzzle #imagefile').prop('files')[0];
let form=document.getElementById('formElem');
let id_post=$('.whapz-panel-puzzle #id_post').val();
let form_data=new FormData(form);
if(undefined!==file_data&&(
file_data.type==='image/png' ||
file_data.type==='image/jpg' ||
file_data.type==='image/gif' ||
file_data.type==='image/jpeg')){
form_data.append('file', file_data);
form_data.append('id_post', id_post);
form_data.append('action', 'frontend_image');
let ajax_url='/wp-admin/admin-ajax.php';
$.ajax({
url: ajax_url,
type: 'post',
async: true,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
data: form_data,
beforeSend: function(){
btn.attr({'value':'','disabled':'disabled'})
.css({'backgroundImage':'url("/wp-content/plugins/wha-puzzle/images/spinner.gif")',
'backgroundPosition':'center center',
'backgroundRepeat':'no-repeat',
'backgroundSize':'contain',
'width':'107px',
'cursor':'no-drop'
});
},
success: function (res){
let result=JSON.parse(res);
if(result.status===1){
window.location.replace(window.location.pathname + window.location.search + window.location.hash);
}else{
btn.attr({'value':'Error uploaded'}).css({'backgroundColor':'#f7a4a4'});
}},
error: function (response){
btn.attr({'value':'Error uploaded'}).css({'backgroundColor':'#f7a4a4'});
console.error(response);
}});
}else{
label.css({'backgroundColor':'#f7a4a4'}).text('Select Image');
}});
};};