API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 20th, 2020
92
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 49.23 KB | None | 0 0
raw download clone embed print report
  1. var cardData;
  2.  
  3. $(window).load(function(){
  4.  
  5. //------------------------Card properties--------------------------//
  6. var cardProperties = {
  7.     container: $("#cardContainer"),
  8.     elementsWrapper: $("#cardElementsWrapperBorder"),
  9.     size: 0, //0 -> (90x50mm <-> 510px x 283px), 1-> (85x55mm <-> 482px x 312px)
  10.     position: "h", //default horizontal
  11.     bgImagesPath: "media/images/designs/backgrounds/", //path to card bg images
  12.     floatingImagesPath: "media/images/designs/floating-images/", //path to card bg images
  13.     imagesPerPage: 11,
  14.     innerBorderMargins: 40, //this should be divided by 2 to get the actual margin
  15.     currentCardSide: 1
  16. };
  17.  
  18. var linesStyles = {
  19.     "1": {"width": "1px", "style": "solid"},
  20.     "2": {"width": "2px", "style": "solid"},
  21.     "3": {"width": "3px", "style": "solid"},
  22.     "4": {"width": "1px", "style": "dashed"},
  23. }
  24.  
  25. var cardSettings = {
  26.     sizes:  [ [[517], [287], [90], [50]], //size 1 -> 90x50mm
  27.               [[485], [312], [85], [55]], //size 2 -> 85x55mm
  28.               [[633], [873], [101], [152]], //size 3 -> 101x152mm
  29.               [[728], [1016], [127], [177]] //size 4 -> 127x177mm
  30.             ]
  31. }
  32.  
  33.  
  34. //------------------------Get data for card-----------------------//
  35.  
  36. //load user saved card
  37. catchJsonString = $("#loadUserCard").html();
  38. if(catchJsonString.length > 10){
  39.     userSavedCardJson = $.parseJSON(catchJsonString);
  40.     if(userSavedCardJson.status)
  41.         loadCardDataJson(userSavedCardJson.path);
  42.     else
  43.         showError("Unknown error occured, we can't load your saved card.");
  44. }else{
  45.     loadCardDataJson("");
  46. }
  47.  
  48. function loadCardDataJson(path){
  49.     //default path
  50.     if(path == "")
  51.         path = "media/js/presetsdata/default.js";
  52.  
  53.     $.getJSON(path + "?" + Math.floor(Math.random(999)*9999), function(data){
  54.         //set this data so we could use it later
  55.         cardData = data;
  56.        
  57.         //now call function which will load everything up
  58.         loadCardData("side1", true);
  59.     });
  60. }
  61.    
  62. var cardImage = "";
  63. var cardColor = "#fff";
  64.  
  65. function loadCardData(side, firstLoad){
  66.     //disable some fields when user flips side
  67.     if(side != "side1"){
  68.         $("#toolsCardType, #toolsCardSize").append( $("<div>").addClass("disable_field") );
  69.         if(!firstLoad){
  70.             $(function(){
  71.                 save("side1");
  72.             });
  73.         }
  74.     }else{
  75.         $("#toolsCardType, #toolsCardSize").find(".disable_field").remove();
  76.         if(!firstLoad){
  77.             $(function(){
  78.                 save("side2");
  79.             });
  80.         }
  81.     }
  82.    
  83.     //load text
  84.     $.each(cardData[side].textPositions, function(key){
  85.         if(key == "__comment") return;
  86.  
  87.         $("#"+key).css({
  88.             left: parseInt(this.left) + "px",
  89.             top: parseInt(this.top) + "px",
  90.             fontFamily: cardData[side].textProperties[key]["font-family"].replace("'", "")
  91.         }).text(this.text);
  92.         $("input[name='"+key+"']").val(this.text);
  93.     });
  94.    
  95.        
  96.     $("input[name=companyName1]").DefaultValue("Company Name");
  97.     $("input[name=companyName2]").DefaultValue("Company Name");
  98.     $("input[name=typeOfActivity1]").DefaultValue("Type of Activity");
  99.     $("input[name=typeOfActivity2]").DefaultValue("Type of Activity");
  100.     $("input[name=typeOfActivity3]").DefaultValue("Type of Activity");
  101.     $("input[name=typeOfActivity4]").DefaultValue("Type of Activity");
  102.     $("input[name=typeOfActivity5]").DefaultValue("Type of Activity");
  103.     $("input[name=name]").DefaultValue("Name");
  104.     $("input[name=phone]").DefaultValue("Mob. Phone");
  105.     $("input[name=fax]").DefaultValue("Fax");
  106.     $("input[name=adress]").DefaultValue("Adress Line");
  107.     $("input[name=adress2]").DefaultValue("Adress Line 2");
  108.     $("input[name=email]").DefaultValue("Email");
  109.     $("input[name=www]").DefaultValue("Website Adress");
  110.     $("input[name=phone2]").DefaultValue("Phone");
  111.     $("input[name=wwww]").DefaultValue("Website Adress");
  112.     $("input[name=aditional]").DefaultValue("Aditional Info");
  113.    
  114.     //apply css to the text
  115.     $.each(cardData[side].textProperties, function(key){
  116.        
  117.         if(key == "__comment") return;
  118.        
  119.         var key = key;
  120.         $.each(this, function(rule, value){
  121.             $("#" + key).css(rule, value);
  122.            
  123.         });
  124.  
  125.     });
  126.    
  127.     //remove any floating images
  128.     $(".aditionalImageContainer").remove();
  129.     createdImages = 0;
  130.    
  131.     //add images
  132.     $.each(cardData[side].floatingImages, function(){
  133.         if(this.path == "") return;
  134.         renderFloatingImage(this.path, this.left + "px", this.top + "px");
  135.     });
  136.    
  137.     //change background
  138.     if(cardData[side].background == "none"){
  139.         cardColor = "#fff";
  140.         $(cardProperties.container).css("background", "#fff");
  141.     }else{
  142.          url = cardData[side].background;
  143.          start = url.indexOf('images');
  144.          result = "url(media/" + url.substr(start).replace("'", "").replace('"', "");
  145.        
  146.         cardImage = result;
  147.         $(cardProperties.container).css("background", result);
  148.     }
  149.    
  150.     //first try to delete lines
  151.     $(".horizontalLine").remove();
  152.     $(".verticalLine").remove();
  153.    
  154.    
  155.     //create vertical lines
  156.     $.each(cardData[side].verticalLine, function(key, value){
  157.         if(key == "default") return;
  158.        
  159.         createLine("verticalLine", side, key);
  160.     });
  161.     //create horizontal lines
  162.     $.each(cardData[side].horizontalLine, function(key, value){
  163.         if(key == "default") return;
  164.        
  165.         createLine("horizontalLine", side, key);
  166.     });
  167. }
  168.  
  169. var galleries = $('.ad-gallery').adGallery({
  170.     width: 1144,
  171.     height: 200,
  172.     start_at_index: 0,
  173.     slideshow:{
  174.         start_label: "",
  175.         stop_label: ""
  176.     }
  177. });
  178.  
  179. var renderCardFormat = "pdf";
  180. $("#saveCardTypeJPG, #saveCardTypePDF").live("click", function(){
  181.     if($(this).attr("id") == "saveCardTypePDF")
  182.         renderCardFormat = "pdf";
  183.     else
  184.         renderCardFormat = "image";
  185. });
  186.  
  187. //download image/pdf
  188. $(".cardPreviewDlButton").live("click", function(){
  189.     data = $.param(cardData);
  190.  
  191.     //set data
  192.     $(".dataInputHidden").val(JSON.stringify(cardData));
  193.     //set action
  194.     $(".actionInputHidden").val(renderCardFormat);
  195.    
  196.     //submit form
  197.     $(".cardSaveForm").submit();
  198.    
  199. });
  200.  
  201. $(function(){
  202.     save = function(side){
  203.         //---------------------Text Section---------------------//
  204.         $.each($(".cardElementDraggable"), function(){
  205.             name = $(this).attr("id");
  206.  
  207.             //extract font-size from style tag
  208.             styletag = $(this).attr('style');
  209.             stylestemp = styletag.split(';');
  210.             styles = {};
  211.             c = '';
  212.             for (var x in stylestemp) {
  213.                 c = stylestemp[x].split(':');
  214.                 styles[$.trim(c[0])]=$.trim(c[1]);
  215.             }
  216.            
  217.            
  218.             cardData[side].textProperties[name].color = $(this).css("color");
  219.             cardData[side].textProperties[name]['font-size'] = styles["font-size"];
  220.             cardData[side].textProperties[name]['font-family'] = $(this).css("font-family");
  221.             cardData[side].textProperties[name]['font-weight'] = $(this).css("font-weight");
  222.             cardData[side].textProperties[name]['font-style'] = $(this).css("font-style");
  223.             cardData[side].textProperties[name]['text-decoration'] = $(this).css("text-decoration");
  224.            
  225.             cardData[side].textPositions[name].left = $(this).css("left");
  226.             cardData[side].textPositions[name].top = $(this).css("top");
  227.            
  228.             cardData[side].textPositions[name].text = $(this).text();
  229.             cardData[side].textPositions[name].width = $(this).width();
  230.         });
  231.        
  232.         //card background
  233.         if($(cardProperties.container).css("background-image") == "none"){
  234.             cardData[side].background = $(cardProperties.container).css("background-color")
  235.         }else{
  236.             cardData[side].background = $(cardProperties.container).css("background-image");
  237.         }
  238.            
  239.         //aditional images
  240.         $.each($(".aditionalImage"), function(i){
  241.             leftOffset = $(this).parent().parent().position().left;
  242.             topOffset = $(this).parent().parent().position().top;
  243.  
  244.            
  245.             cardData[side].floatingImages[i + 1].left = leftOffset;
  246.             cardData[side].floatingImages[i + 1].top = topOffset;
  247.             cardData[side].floatingImages[i + 1].width = $(this).width();
  248.             cardData[side].floatingImages[i + 1].height = $(this).height();
  249.             cardData[side].floatingImages[i + 1].path = $(this).attr("src");
  250.         });
  251.        
  252.         //card dimensions
  253.         cardData.dimensions.width = $(cardProperties.container).width();
  254.         cardData.dimensions.height = $(cardProperties.container).height();
  255.        
  256.        
  257.         for(i = 1; i <= 2; i++){
  258.             if(i == 1) type = "horizontalLine"; else type = "verticalLine";
  259.            
  260.             //delete old lines
  261.             $.each(cardData['side' + cardProperties.currentCardSide][type], function(key, value){
  262.                 if(key != "default")
  263.                     delete cardData['side' + cardProperties.currentCardSide][type][key];
  264.             });
  265.             //add new lines
  266.             $.each($("." + type + " div"), function(i, item){
  267.                 //set data
  268.                 cardData['side' + cardProperties.currentCardSide][type][i] = {
  269.                     "left": $(item).parent().position().left - 47,
  270.                     "top": $(item).parent().position().top - 52,
  271.                     "color": $(item).css("border-color"),
  272.                     "thickness": parseInt($(item).css("border-right-width")),
  273.                     "style": $(item).css("border-right-style")
  274.                 };
  275.             });
  276.         }
  277.        
  278.         //save card size in MM
  279.          value = $(".cardDimensions").val();
  280.  
  281.         if(cardProperties.position == "h"){
  282.             cardData.dimensionsInMM.width = cardSettings.sizes[value][2];
  283.             cardData.dimensionsInMM.height = cardSettings.sizes[value][3];
  284.         }else{
  285.             cardData.dimensionsInMM.width = cardSettings.sizes[value][3];
  286.             cardData.dimensionsInMM.height = cardSettings.sizes[value][2];
  287.         }
  288.        
  289.     };
  290. });
  291.  
  292. //save user created card
  293. $(".toolsISave").live("click", function(){
  294.     $.colorbox({
  295.         width: 500,
  296.         height: 220,
  297.         href: "home/save/",
  298.         scrolling:false,
  299.         data: {action: "html"},
  300.         onComplete: function(){
  301.             var text = $(".saveWorkInput");
  302.            
  303.             $(".saveWorkInput").keydown(function(e) {
  304.  
  305.                 //uptade text
  306.                 window.setTimeout(function() {
  307.                     $(".saveWorkName").text($(text).val());
  308.                 }, 1);
  309.                
  310.                 $(".saveWorkInput").simplyCountable({
  311.                     counter: "#descCounter",
  312.                     maxCount:30,
  313.                     strictMax: true
  314.                 });
  315.             });
  316.            
  317.            
  318.             //save
  319.             $(".saveWorkButton").live("click", function(){
  320.                
  321.                 //check if name isn't empty
  322.                 if(text.val().length < 2){
  323.                     console.log(text);
  324.                     showError("Please enter the name");
  325.                     return;
  326.                 }
  327.                
  328.                 //save card data
  329.                 $(function(){
  330.                     save("side" + cardProperties.currentCardSide);
  331.                 });
  332.                
  333.                 $.post("home/save/", {action: "saveCard", name: text.val(), data: cardData},
  334.                     function(response){
  335.                         if(response.response){
  336.                             $(".saveWorkMessageBox").css("visibility", "visible").text("Your card has been saved successfully.");
  337.                             $(".saveWorkCreatedLink").text(response.link);
  338.                             $(".saveWorkCreatedLink").parent().attr("href", response.link);
  339.                             $(".saveWorkLinkContainer").fadeIn("fast");
  340.                         }else{
  341.                             $(".saveWorkMessageBox").css("visibility", "visible").text(response.error);
  342.                         }
  343.                     }, "json"
  344.                 );
  345.             });
  346.         }
  347.     });
  348. });
  349.  
  350. //render image/pdf
  351. $(".toolsISaveImage, .toolsISavePdf").click(function(){
  352.     saveAs = $(this).attr("id");
  353.    
  354.     renderCardFormat = saveAs;
  355.    
  356.     $(function(){
  357.         save("side" + cardProperties.currentCardSide);
  358.     });
  359.  
  360.    
  361.     $.colorbox({
  362.         href: "image/render_image",
  363.         data: {data: cardData, action: 'preview', selectedFormat: saveAs},
  364.         width: 700,
  365.         title: false,
  366.         scrolling:false,
  367.         onComplete: function() {
  368.             var id = setInterval(function(){
  369.                 getWidth = $(".cardPreviewContainerLeft").width() + $(".cardPreviewContainerRight").width() + 160
  370.  
  371.                 //delete generated pics from /temp/ folder
  372.                 $.post("image/delete_temp", {image1: $(".cardPreviewContainerLeft img").attr("src"), image2: $(".cardPreviewContainerRight img").attr("src")}, function(){});
  373.                
  374.                 if(getWidth > 160){
  375.                     $(this).colorbox.resize({width: getWidth});
  376.                     clearInterval(id);
  377.                 }
  378.             }, 500);
  379.                
  380.             $( ".progressBar" ).progressbar({
  381.                 value: 100
  382.             });
  383.            
  384.             var paymentCode = $(".paymentCode").attr("id");
  385.  
  386.             //###### for demo purposes
  387.             setTimeout(function(){
  388.                 //remove progressbar
  389.                 $( ".progressBar" ).progressbar('destroy');
  390.                
  391.                 //create completed message
  392.                 $(".cardPreviewDlProgressText")
  393.                     .animate({
  394.                         top: "0px",
  395.                         left: "93px"                                   
  396.                     })
  397.                     .html(
  398.                         $("<div>").addClass("cardPreviewDlProgressIcon displayInline")
  399.                     )
  400.                     .append("Payment has been completed!");
  401.                
  402.                 $(".cardPreviewDlButtonDisable").fadeOut('slow').remove();
  403.             }, 6000)
  404.  
  405.            
  406.             //keep checking if payment was made
  407.             // var interval_id = setInterval(function(){
  408.            
  409.             //  $.post("home/payment/", {code: paymentCode},
  410.             //      function(response){
  411.             //          if(response.payment_status){
  412.             //              clearInterval(interval_id);
  413.                            
  414.             //              //remove progressbar
  415.             //              $( ".progressBar" ).progressbar('destroy');
  416.                            
  417.             //              //create completed message
  418.             //              $(".cardPreviewDlProgressText")
  419.             //                  .animate({
  420.             //                      top: "0px",
  421.             //                      left: "93px"                                   
  422.             //                  })
  423.             //                  .html(
  424.             //                      $("<div>").addClass("cardPreviewDlProgressIcon displayInline")
  425.             //                  )
  426.             //                  .append("Payment has been completed!");
  427.                            
  428.             //              $(".cardPreviewDlButtonDisable").fadeOut('slow').remove();
  429.             //          }
  430.             //      },"json"
  431.             //  );
  432.            
  433.             // }, 2000);
  434.         }
  435.     });
  436. });
  437.  
  438. $(".aboutUseButton").click(function(){
  439.     $.colorbox({
  440.         href: "home/about_us",
  441.         width: 800
  442.     });
  443. });
  444.  
  445. //contact us window
  446. $(".contactUsButton").click(function(){
  447.     $.colorbox({
  448.         href: "home/contact_us",
  449.         data: {action: "getHtml"},
  450.         width:600,
  451.         height:300,
  452.         onComplete: function(){
  453.             $(".subject").DefaultValue("Subject:");
  454.             $(".email").DefaultValue("Email:");
  455.             $(".message").DefaultValue("Message:");
  456.            
  457.             $(".contactUsSendBg").live("click", function(){
  458.                 var errors = 0;
  459.                 //loop trough all fields
  460.                 $.each($(".contactUsFormContainer input, .contactUsFormContainer textarea"), function(){
  461.                
  462.                     if($(this).val().length < 10){
  463.                         $(this).css("border", "1px solid #F58787");
  464.                         errors++;
  465.                     }else{
  466.                         $(this).css("border", "1px solid green");
  467.                         errors--;
  468.                     }
  469.                 });
  470.                
  471.                 if(errors == -3){
  472.                     $.post("home/contact_us", {
  473.                                                 action: "send",
  474.                                                 subject: $(".subject").val(),
  475.                                                 email: $(".email").val(),
  476.                                                 message: $(".message").val()
  477.                                             },
  478.                         function(response){
  479.                             if(response.response){
  480.                                 $(".contactUsFormContainer").append(
  481.                                     $("<div>")
  482.                                         .addClass("saveWorkMessageBox displayInline")
  483.                                         .text(response.text)
  484.                                         .css("visibility", "visible")
  485.                                 );
  486.                             }else{
  487.                                 showError("Unknown error occured, please contact administrators.");
  488.                             }
  489.                         }, "json"
  490.                     );
  491.                 }else{
  492.                     showErrors("Please fill in all fields");
  493.                 }
  494.             });
  495.         }
  496.     });
  497. });
  498.  
  499. //hide gallery
  500. $(".slideShowHide").live("click", function(){
  501.     $("#gallery").animate({
  502.         width: "0px",
  503.         height: "0px",
  504.         left: "-517px",
  505.     }, 400, function(){
  506.         $(".galery_minimized")
  507.             .css("display", "block")
  508.             .draggable({distance: 4});
  509.     });
  510.    
  511. });
  512.  
  513. //show galery
  514. $(".galeryShowIcon").live("click", function(){
  515.     $(".galery_minimized").css("display", "none");
  516.    
  517.     $("#gallery").animate({
  518.         width: "1144px",
  519.         height: "381px",
  520.         top: "10px",
  521.         left: "0px"
  522.     }, 400);
  523. });
  524.  
  525. //drag gallery
  526. $("#gallery").draggable({
  527.     handle: ".slideShowMove",
  528.     start: function(){
  529.         updateIndex("#gallery");
  530.     }
  531. });
  532.  
  533. //set preset from gallery
  534. $(".ad-galery-set").live("click", function(){
  535.     path = $(".ad-image img").attr("data");
  536.     loadCardDataJson(path);
  537. });
  538.  
  539.  
  540. //change tools tab
  541. var toolsSelectedTab = "toolsTabText";
  542.  
  543. $(".toolsSelectTab").live("click", function(){
  544.     action = $(this).attr("action");
  545.    
  546.     //switch classes
  547.     $(".toolsTabSelected").removeClass("toolsTabSelected").addClass("toolsSelectTab");
  548.     $(this).addClass("toolsTabSelected");
  549.    
  550.     //hide current tab
  551.     $("#" + toolsSelectedTab).css("visibility", "hidden");
  552.    
  553.     //show selected tab
  554.     $("#" + action).css("visibility", "visible");
  555.    
  556.     toolsSelectedTab = action;
  557.    
  558. });
  559.  
  560. //make tools and text fields draggable
  561. $("#toolsBar, #inputContainer").draggable({
  562.     containment: $("body"),
  563.     distance: 7,
  564.     start: function(){
  565.         updateIndex("#" + $(this).attr("id"));
  566.     }
  567. });
  568.  
  569. $(".toolsHoverBg").wrap(
  570.         $("<div>")
  571.             .addClass("displayInline toolsSelectContainer")
  572.             .bind("mouseover", function(){
  573.                 $(this).addClass("toolsSelected");
  574.             })
  575.             .bind("mouseout", function(){
  576.                 $(this).removeClass("toolsSelected");
  577.             })
  578.             .bind("click", function(){
  579.                 $(this).addClass("toolsSelected");
  580.             })
  581.     );
  582.    
  583.  
  584. var oldValue = "switchHorizontal";
  585. //------------------------Change Properties------------------------//
  586. $(".changeCardPosition").click(function(){
  587.     var action = $(this).attr('action');
  588.    
  589.     //check if user isn't clicking on same field
  590.     if(action == oldValue) return;
  591.     oldValue = action;
  592.    
  593.     $(".changeCardPosition").removeClass("radioSelected").addClass("radio");
  594.    
  595.     $(this).addClass("radioSelected");
  596.    
  597.     //find the right action
  598.     switch(action){
  599.         case "switchHorizontal":
  600.             //update position
  601.             cardProperties.position = "h";
  602.  
  603.             changeCardSize(cardSettings.sizes[cardProperties.size][0], cardSettings.sizes[cardProperties.size][1], "horizontal");
  604.         break;
  605.  
  606.         case "switchVertical":
  607.             //update position
  608.             cardProperties.position = "v";
  609.  
  610.             changeCardSize(cardSettings.sizes[cardProperties.size][1], cardSettings.sizes[cardProperties.size][0], "vertical");
  611.         break;
  612.        
  613.         //if no action was found show error
  614.         default:
  615.             showError("Requested action '"+action+"' was not found!");
  616.         break;
  617.     }
  618. });
  619.  
  620. $(".cardDimensions").change(function(){
  621.     value = $(this).val();
  622.     //update card size
  623.     cardProperties.size = value;
  624.    
  625.     //and now change the actual size
  626.     if(cardProperties.position == "h")
  627.         changeCardSize(cardSettings.sizes[value][0], cardSettings.sizes[value][1]); //for horizontal position
  628.     else
  629.         changeCardSize(cardSettings.sizes[value][1], cardSettings.sizes[value][0]); //for vertical position
  630.  
  631. });
  632.  
  633. //rolers
  634. $(".h_roler_draggable, .v_roler_draggable").draggable({
  635.     containment: "parent",
  636.     drag: function(event, ui){
  637.         if($(this).attr("action") == "horizontal")
  638.             $("#cardElementsWrapper").css("left", ui.position.left + "px");
  639.         else
  640.             $("#cardElementsWrapper").css("top", ui.position.top + "px");
  641.     }
  642. });
  643.  
  644. var gridState = false;
  645.  
  646. $(".alignText, .grid, .lines").click(function(){
  647.     action = $(this).attr("action");
  648.     parentWidth = $(".cardElementDraggable").parent().width();
  649.    
  650.     switch(action){
  651.         case "left":       
  652.             $(".cardElementDraggable").css("left", "2px");
  653.         break;
  654.        
  655.         case "right":
  656.             $.each($(".cardElementDraggable"), function(){
  657.                 $(this).css("left", (parentWidth - $(this).width()) - 10);
  658.             });
  659.  
  660.         break;
  661.        
  662.         case "middle":
  663.             $.each($(".cardElementDraggable"), function(){
  664.                 $(this).css("left", (parentWidth / 2) - ($(this).width() / 2) );
  665.             });
  666.         break;
  667.        
  668.         case "horizontalLine":
  669.             createLine("horizontalLine", "side" + cardProperties.currentCardSide, "default");
  670.         break;     
  671.  
  672.         case "verticalLine":
  673.             createLine("verticalLine", "side" + cardProperties.currentCardSide, "default");
  674.         break;
  675.        
  676.         //delete selected lines
  677.         case "delete":
  678.             $.each(selectedObjects, function(i, obj){
  679.                 //check if this is a line id
  680.                 if($.inArray("line", obj.split("_")) == -1)
  681.                     return;
  682.                
  683.                 $("#" + obj).parent().remove();
  684.                
  685.                 setTimeout(function(){
  686.                     //remove from object list
  687.                     selectedObjects.splice($.inArray(obj, selectedObjects), 1);
  688.                 }, 10);
  689.             });
  690.         break;
  691.        
  692.         case 'grid':
  693.             if(gridState == true){
  694.                 $("#cardElementsWrapperBorder").css("background-image", "");
  695.                 gridState = false;
  696.             }else{
  697.                 $("#cardElementsWrapperBorder").css("background-image", "url('media/images/grid.gif')");
  698.                 gridState = true;
  699.             }
  700.         break;
  701.        
  702.         default:
  703.             showError("Requested action '"+action+"' was not found!");
  704.         break;
  705.     }
  706.  
  707. });
  708.  
  709. //change line style
  710. $(".linesStyle").change(function(){
  711.  
  712.     var lineStyle = $(".linesStyle").val();
  713.    
  714.     $.each(selectedObjects, function(i, obj){
  715.    
  716.         //check if this is a line id
  717.         if($.inArray("line", obj.split("_")) == -1)
  718.             return;
  719.  
  720.             color = $("#" + obj).css("border-top-color");
  721.            
  722.             $("#" + obj).css({
  723.                 borderTop: linesStyles[lineStyle].width,
  724.                 borderRight: linesStyles[lineStyle].width,
  725.                 borderTopStyle: linesStyles[lineStyle].style,
  726.                 borderRightStyle: linesStyles[lineStyle].style,
  727.                 borderTopColor: color,
  728.                 borderRightColor: color
  729.             });
  730.     });
  731. });
  732.  
  733.  
  734. function createLine(position, side, action){
  735.     var timeStamp = new Date().getTime();
  736.     if(position == "horizontalLine"){
  737.         if(cardProperties.position == "h")
  738.             width = cardSettings.sizes[cardProperties.size][0];
  739.         else
  740.             width = cardSettings.sizes[cardProperties.size][1];
  741.            
  742.         height = 1;
  743.     }else{
  744.         if(cardProperties.position == "h")
  745.             height = cardSettings.sizes[cardProperties.size][1];
  746.         else
  747.             height = cardSettings.sizes[cardProperties.size][0];
  748.        
  749.         width = 1;
  750.     }
  751.     $("#cardContainer").append(
  752.         $("<div>")
  753.             .draggable({
  754.                 containment: "parent"
  755.             })
  756.             .css({
  757.                 position: "absolute",
  758.                 height: (parseInt(height) + 3) + "px",
  759.                 width: (parseInt(width) + 3) + "px",
  760.                 paddingTop: "1px",
  761.                 left: parseInt(cardData[side][position][action].left) + 47 + "px ",
  762.                 top: parseInt(cardData[side][position][action].top) + 52 + "px "
  763.             })
  764.             .addClass(position)
  765.             .attr("position", position)
  766.             .html(
  767.                 $("<div>")
  768.                     .css({
  769.                         width: width + "px",
  770.                         height: height + "px",
  771.                         borderTopWidth: parseInt(cardData[side][position][action].thickness) + "px ",
  772.                         borderRightWidth: parseInt(cardData[side][position][action].thickness) + "px ",
  773.                         borderTopStyle: cardData[side][position][action].style,
  774.                         borderRightStyle: cardData[side][position][action].style,
  775.                         borderColor: cardData[side][position][action].color
  776.                     })
  777.                     .attr("id",  "line_" + timeStamp)
  778.                     .addClass("cardLines")
  779.             )
  780.             .bind("click", function(){
  781.                 position = $(this).attr("position");
  782.  
  783.                 selectObject($("div ", this).attr("id"), "lines");
  784.                
  785.                 //if this is already selected
  786.                 if($(this).hasClass("selected")){
  787.                     $(this).removeClass("selected").css("border", "0px");
  788.                 }else{
  789.                     $(this).addClass("selected").css("border", "1px dashed #ccc");
  790.                 }
  791.             })
  792.     );
  793. }
  794.  
  795. //change card bg
  796. $(".toolsIconsCardBgBucket").colorpicker({
  797.     altField: $(cardProperties.container),
  798.     altProperties: 'background-color',
  799.     showOn: "button",
  800.     buttonImage: "images/calendar.gif",
  801.     buttonImageOnly: true,
  802.     buttonText: "Change card background color",
  803.     buttonClass: "toolsIconsCardBgBucketButton toolsIcons displayInline",
  804.     select: function(e){
  805.         cardColor = "#" + $(this).val();
  806.         $(cardProperties.container).css('background-image', '');
  807.     }
  808.  
  809. });
  810.  
  811. /**
  812. remove card bg or color
  813. these are the vars that contains bg color and image
  814. var cardImage = "";
  815. var cardColor = "";
  816. **/
  817. $(".toolsIconsCardBgDelete").click(function(){
  818.     action = $(this).attr("action");
  819.     console.log(cardImage);
  820.     console.log(cardColor );
  821.     if(action == "image"){
  822.         $(cardProperties.container).css('background-image', '');
  823.         $(cardProperties.container).css('background-color', cardColor);
  824.     }else{
  825.         $(cardProperties.container).css('background-color', '#ffffff');
  826.         $(cardProperties.container).css('background-image', cardImage);
  827.     }
  828. });
  829.  
  830.  
  831. var fileList;
  832. var createdImages = 0;
  833. var selectedImage;
  834.  
  835. $(".toolsIconsCardBgImages, .toolsIconsCardFloatingImage").colorbox({
  836.     width: 520,
  837.     height: 630,
  838.     href: false,
  839.     title: " ",
  840.     scrolling:false,
  841.     html: function(){
  842.         var requestAction = $(this).attr("action");
  843.         var pagination = $("<div>").addClass("popupPaginationContainer"); //add all bg elements here
  844.         var finalHtml = $("<div>").addClass("displayInline");
  845.        
  846.         //first get all images names from the server
  847.         $.post("image/pull_images_data", {action: requestAction},
  848.             function(response){
  849.  
  850.                 if(requestAction == "bg-images") var path = "bgImagesPath"; else var path = "floatingImagesPath";
  851.  
  852.                 $(finalHtml).append(renderCardBackground(response.files.names, 1, cardProperties.imagesPerPage, response.files.path, requestAction)); //get images rendered
  853.                
  854.                 //we need this so we could resize floating image if it's to big
  855.                 cardWidth = cardProperties.container.width();
  856.                 cardHeight = cardProperties.container.height();
  857.                
  858.                 //build form for file uploading
  859.                 $(finalHtml).prepend(
  860.                     $("<form>", {
  861.                         method: "post",
  862.                         action: "image/upload/",
  863.                         target: "IframeUploadFiles",
  864.                         enctype: "multipart/form-data"
  865.                     }).addClass("uploadImageForm")
  866.                         //hidden data card width
  867.                         .append(
  868.                             $("<input />", {
  869.                                 type: "hidden",
  870.                                 name: "cardWidth",
  871.                                 value: cardWidth
  872.                             })
  873.                         )
  874.                         //hidden data card height
  875.                         .append(
  876.                             $("<input />", {
  877.                                 type: "hidden",
  878.                                 name: "cardHeight",
  879.                                 value: cardHeight
  880.                             })
  881.                         )
  882.                         //create button for image selecting
  883.                         .append(
  884.                             $("<div>")
  885.                             .addClass("uploadImageInputButton displayInline")
  886.                             .html(
  887.                                 //inside put the actual file input field
  888.                                 $("<input />",{
  889.                                     type: "file",
  890.                                     name: "fileName"
  891.                                 }).addClass("uploadImageInput")
  892.                                   .bind("change", function(){
  893.                                     $(".uploadImageSubmit").css("visibility", "visible");
  894.                                   })
  895.                             )
  896.                         )
  897.                         .append(
  898.                             $("<div>")
  899.                                 .addClass("uploadImageText coolText displayInline")
  900.                                 .text("Upload Image")
  901.                         )
  902.                         //submit button
  903.                         .append(
  904.                             $("<div>")
  905.                                 .addClass("uploadImageSubmit coolText displayInline")
  906.                                 .text("Upload")
  907.                                 .bind("click", function(){
  908.                                     $(".uploadImageForm").submit();
  909.                                     //hide submit button
  910.                                     $(".uploadImageSubmit").css("visibility", "hidden");
  911.                                     //show loading icon
  912.                                     $(".uploadImageLoading").fadeIn();
  913.                                 })
  914.                         )
  915.                         //iframe here we gonna upload files
  916.                         .append(
  917.                             $("<iframe>",{
  918.                                 src: "image/upload/",
  919.                                 name: "IframeUploadFiles"
  920.                             })
  921.                             .bind("load", function(){
  922.                                 //hide loading icon
  923.                                 $(".uploadImageLoading").fadeOut();
  924.                                
  925.                                 //get content of the iframe
  926.                                 getJsonString = $(this).contents().find("body").text();
  927.                                
  928.                                 //parse it to json
  929.                                 filesResponse = $.parseJSON(getJsonString);
  930.                                 if(filesResponse != null){
  931.                                     //check for errors
  932.                                     if(filesResponse.errors){
  933.                                         showError(filesResponse.errorList["1"]);
  934.                                     }else{
  935.                                         if(requestAction == "floating-image")
  936.                                             renderFloatingImage(filesResponse.path, null, null);
  937.                                         else
  938.                                             $("#cardContainer").css("background-image", "url(" + filesResponse.path + ")");
  939.                                         $.colorbox.close();
  940.                                     }
  941.                                 }
  942.                             })
  943.                             .css("display", "none")
  944.                         )
  945.                         .append(
  946.                             $("<div>")
  947.                                 .addClass("uploadImageLoading displayInline")
  948.                         )
  949.                         .append(
  950.                             $("<div>")
  951.                                 .addClass("displayInline selectImageCategoryList")
  952.                                 .html(
  953.                                     $("<select>")
  954.                                         .html(response.dir_list)
  955.                                         .addClass("selectImageCategorySelect")
  956.                                         .bind("change", function(){
  957.                                             $.post("image/pull_images", {action: requestAction, dir: $(this).val()},
  958.                                                 function(response){
  959.                                                     $(".popupImagesContainer").html('').html(renderCardBackground(response.files.names, 1, cardProperties.imagesPerPage, response.files.path, requestAction));
  960.                                                 }, "json"
  961.                                             );
  962.                                         })
  963.                                 )
  964.                             )
  965.                 )
  966.  
  967.                 fileList = response.files.names;
  968.                
  969.                 //build pagination
  970.                 var pages = Math.ceil(response.files.count / cardProperties.imagesPerPage);
  971.        
  972.                 //create previous button
  973.                 pagination.append( 
  974.                     $("<div>")
  975.                         .addClass("popupPaginationPrevious displayInline")
  976.                         .bind("click", function(){
  977.                             paginationSwitchPage("previous", fileList, response.files.path, pages, requestAction);
  978.                         })
  979.                     );         
  980.                 for(i = 1; i <= pages; i++){
  981.                     if(i == 1) selectedClass = "popupPaginationLinkCurrent"; else selectedClass = "";
  982.                     //build links
  983.                     newLink = $("<div>").addClass("popupPaginationLink displayInline " + selectedClass)
  984.                             .attr("page", i)
  985.                             //attach click event for page changes
  986.                             .bind("click", function(){                             
  987.                                 paginationSwitchPage(parseInt($(this).attr('page')), fileList, response.files.path, pages, requestAction);
  988.                             })
  989.                             .append(
  990.                                 $("<div>")
  991.                                         .text(i)
  992.                                         .addClass("popupPaginationLinkText")
  993.                             );
  994.                    
  995.                     $(pagination).append(newLink); 
  996.                 }
  997.                
  998.                 //create next button
  999.                 pagination.append( 
  1000.                     $("<div>")
  1001.                         .addClass("popupPaginationNext displayInline")
  1002.                         .bind("click", function(){
  1003.                             paginationSwitchPage("next", fileList, response.files.path, pages, requestAction);
  1004.                         })
  1005.  
  1006.                     );
  1007.                
  1008.             }, "json"
  1009.         );
  1010.  
  1011.         return $(finalHtml).append(pagination).append($("<div>").addClass("popUpLoadingBg")).append($("<div>").addClass("popUpLoadingLoading"));
  1012.     },
  1013.     onComplete: function(){
  1014.         $(".selectImageCategorySelect").selectmenu({width: 190});
  1015.     }
  1016. });
  1017.  
  1018. paginationCurrentPage = 1;
  1019.  
  1020. function paginationSwitchPage(goTo, fileList, path, pages, action){
  1021.  
  1022.     if(goTo == "previous"){
  1023.         if(paginationCurrentPage > 1) goTo = paginationCurrentPage - 1; else return;
  1024.  
  1025.     }else if(goTo == "next"){
  1026.         if(paginationCurrentPage < pages ) goTo = paginationCurrentPage + 1; else return;
  1027.     }
  1028.    
  1029.     start = ((goTo * cardProperties.imagesPerPage) - cardProperties.imagesPerPage) + 1;
  1030.     end = start + cardProperties.imagesPerPage;
  1031.    
  1032.     //hide everything until it fully loads
  1033.     $(".popUpLoadingBg, .popUpLoadingLoading").fadeIn("fast");
  1034.     //render new html
  1035.     $(".popupImagesContainer").html('').html(renderCardBackground(fileList, start, end, path, action) ).ready(function(){
  1036.         $(".popUpLoadingBg, .popUpLoadingLoading").fadeOut("fast");
  1037.     });
  1038.    
  1039.     pagesLinks = $(".popupPaginationLink");
  1040.     $(".popupPaginationLink").removeClass("popupPaginationLinkCurrent");
  1041.  
  1042.     $.each(pagesLinks, function(){
  1043.         if($(this).attr("page") == goTo) $(this).addClass("popupPaginationLinkCurrent");
  1044.     });
  1045.     paginationCurrentPage = goTo;
  1046. }
  1047.  
  1048. function renderCardBackground(data, start, end, path, action) {
  1049.     var container = $("<div>").addClass("popupImagesContainer"); //add all bg elements here
  1050.     var i = 0;
  1051.     $.each(data, function(){
  1052.         i++;
  1053.         if(i < start || i > end) return
  1054.        
  1055.         if(action == "bg-images"){
  1056.             //build image object
  1057.             newImage = $("<div>")
  1058.                             .addClass("popupSelectImage displayInline")
  1059.                             .attr("path", path + this)
  1060.                             .bind("click", function(){
  1061.                                 cardImage = "url(" + $(this).attr("path") + ")";
  1062.                                 $(cardProperties.container).css({
  1063.                                         backgroundImage: "url(" + $(this).attr("path") + ")",
  1064.                                     });
  1065.                                 $.colorbox.close();
  1066.                             })
  1067.                             .html(
  1068.                                 $("<img />")
  1069.                                     .attr("src", path + this)
  1070.                             );
  1071.            
  1072.             $(container).append(newImage);
  1073.         }else{
  1074.             //build floating image object
  1075.             newImage = $("<div>")
  1076.                             .addClass("popupSelectImageFloating displayInline")
  1077.                             .css("background-image", "url(" + path + this + ")")
  1078.                             .attr("path", path + this)
  1079.                             .bind("click", function(){
  1080.                                 renderFloatingImage($(this).attr("path"), null, null );
  1081.                                 //close popup window
  1082.                                 $.colorbox.close();
  1083.                             });
  1084.             //return created list
  1085.             $(container).append(newImage);
  1086.         }
  1087.            
  1088.     });
  1089.        
  1090.    
  1091.     return(container);
  1092. }
  1093.  
  1094.  
  1095. //render floating image once user selects it
  1096. function renderFloatingImage(path, left, top){
  1097.     //check if limit wasn't reached since max amout of images is 3
  1098.     if(createdImages >= 3){
  1099.         showError("You can't add more then 3 images at the time!");
  1100.         return;
  1101.     }
  1102.    
  1103.     //create random id for that image
  1104.     rndId = Math.floor(Math.random(999999)*99999999999);
  1105.    
  1106.     createdImages = createdImages + 1;
  1107.  
  1108.     //when user selects image create new floating image and add it to the card
  1109.     container = $("<div>")
  1110.                     .addClass("aditionalImageContainer")
  1111.                     .attr("id", rndId)
  1112.                     .css({
  1113.                         left: left,
  1114.                         top: top
  1115.                     })
  1116.                     //attatch event for selection
  1117.                     .bind("click", function(){
  1118.                         current = $(this).attr("id");
  1119.  
  1120.                         if(selectedImage == current){
  1121.                             $(this).css("border", "0px");
  1122.                             selectedImage = null;
  1123.                         }else{
  1124.                             $(".aditionalImageContainer").css("border", "0px");
  1125.                             $(this).css("border", "1px dashed #3A3737");
  1126.                             selectedImage = current;
  1127.                         }
  1128.                     }).bind("mouseover", function(){
  1129.                         $(this).find(".removeFloatingImage").css("visibility", "visible")
  1130.                     }).bind("mouseout", function(){
  1131.                         $(this).find(".removeFloatingImage").css("visibility", "hidden")
  1132.                     })
  1133.                     //create delete icon
  1134.                     .append(
  1135.                         $("<div>")
  1136.                             .addClass("removeFloatingImage toolsIcons")
  1137.                             .bind("click", function(){
  1138.                                 $(this).parent().remove();
  1139.                                 createdImages = createdImages - 1;
  1140.                                 //if this image was selected
  1141.                                 if($(this).attr("id") == selectedImage)
  1142.                                     selectedImage = null;
  1143.                             })
  1144.                     )
  1145.                     .append(
  1146.                             $("<img />")
  1147.                             .attr("src", path)
  1148.                             .addClass("aditionalImage")
  1149.                             .bind('load', function(){
  1150.                                 $(this).resizable({
  1151.                                     containment: $(cardProperties.container),
  1152.                                     autoHide: true
  1153.                                 });
  1154.                             })
  1155.                         ).draggable({
  1156.                             containment: 'parent'
  1157.                         }).css("position", "absolute");
  1158.    
  1159.    
  1160.     //append created object to card conainer                   
  1161.     $(cardProperties.container).prepend(container);
  1162. }
  1163.  
  1164.  
  1165. //---------------------Floating image options--------------------//
  1166.  
  1167. //rotate image 90 degress
  1168. $(".floatinImageTool").live('click', function(){
  1169.     //check if any image was selected
  1170.     if(selectedImage == null || selectedImage == "undefined"){
  1171.         showError("Please select image you wish to rotate!");
  1172.         return;
  1173.     }
  1174.     //select image container
  1175.     obj = $("#" + selectedImage).find(".aditionalImage");
  1176.    
  1177.     //destroy resizable since it doesn't update it self with the image
  1178.     obj.resizable("destroy");
  1179.    
  1180.     switch($(this).attr("action")){
  1181.         case 'rotate':
  1182.             //send ajax request to the server since we gonna rotate it with php
  1183.             $.post("image/rotate/", {path: obj.attr("src") },
  1184.                 function(response){
  1185.                     obj.attr("src", response.url);
  1186.                    
  1187.                     //get right dimensions
  1188.                     var newHeight = cardProperties.container.height();
  1189.                     var newWidth = response.width / (response.height / newHeight);
  1190.                    
  1191.                     obj.css({
  1192.                         width: newWidth + "px",
  1193.                         height: newHeight + "px"
  1194.                     });
  1195.                    
  1196.                     obj.resizable({
  1197.                         containment: cardProperties.container,
  1198.                         autoHide: true
  1199.                     });
  1200.                 }, "json"
  1201.             );
  1202.         break;
  1203.        
  1204.         //expand image to the card size
  1205.         case 'expand':
  1206.             width = cardProperties.container.width();
  1207.             height = cardProperties.container.height();
  1208.            
  1209.             $(obj.parent()).animate({
  1210.                 left: "47px",
  1211.                 top: "50px"
  1212.             }, 900);
  1213.            
  1214.             obj.animate({
  1215.                 width: width,
  1216.                 height: height
  1217.             }, 1000, function(){
  1218.                 obj.resizable({
  1219.                     containment: cardProperties.container,
  1220.                     autoHide: true
  1221.                 });
  1222.             });
  1223.         break;
  1224.    
  1225.     }
  1226. });
  1227.  
  1228.  
  1229. //here we gonna change card dimensions
  1230. function changeCardSize(width, height){
  1231.     //convert to int
  1232.     width = parseInt(width);
  1233.     height = parseInt(height);
  1234.    
  1235.     $("#leftContainerBlock").animate({width: width + 80, queue: false}, 1000);
  1236.    
  1237.     $("#pageContainer").animate({ width: width + 640, queue: false }, 1000);
  1238.  
  1239.     //change dimensions
  1240.     $(cardProperties.container).animate({
  1241.         width: width + "px",
  1242.         height: height + "px",
  1243.         queue: false
  1244.     }, 1000);
  1245.    
  1246.     newWidth = width - cardProperties.innerBorderMargins;
  1247.     newHeight = height - cardProperties.innerBorderMargins;
  1248.            
  1249.     //update text wrapper size
  1250.     $(cardProperties.elementsWrapper).animate({
  1251.         width: newWidth + "px",
  1252.         height: newHeight + "px"
  1253.     }, 1000);
  1254.    
  1255.     //change rulers
  1256.     $("#h_roler").animate({width: (width + 20) + "px"}, 1000);
  1257.     $("#v_roler").animate({height: (height + 20) + "px"}, 1000);
  1258.    
  1259.     $(".horizontalLine, .horizontalLine div").animate({width: width + "px", top: "55px"}, 1000);
  1260.     $(".verticalLine, .verticalLine div").animate({height: height + "px", left: "50px"}, 1000);
  1261.    
  1262.    
  1263.     //place text in the right position
  1264.     $(".cardElementDraggable").animate({left: "0px"});
  1265.    
  1266.    
  1267. }
  1268.  
  1269. //----------------------Update card text----------------------//
  1270. $(".textInput").keydown(function(e) {
  1271.     var text = $(this);
  1272.     var elementName = "#" + $(this).attr("name");//get element name
  1273.     var oldHeight = $(elementName).height();
  1274.  
  1275.     //uptade text
  1276.     window.setTimeout(function() {
  1277.         $(elementName).text($(text).val());
  1278.     }, 1);
  1279.    
  1280. });
  1281.  
  1282.  
  1283. //Align text to the card left
  1284. $(".toolsIconsAlignRight").click(function(){
  1285.     var cardSize = cardProperties.container.width() - 44 ;
  1286.    
  1287.     if(EditState == "all"){
  1288.         $.each($(".cardElementDraggable"), function(){
  1289.             offset = cardSize - $(this).width();
  1290.            
  1291.             $(this).css("left", offset + "px");
  1292.         });
  1293.     }else{
  1294.         $.each(selectedObjects, function(){
  1295.             offset = cardSize - $("#" + this).width();
  1296.            
  1297.             $("#" + this).css("left", offset + "px");
  1298.         });
  1299.     }
  1300. });
  1301.  
  1302. //Align text to the card cight
  1303. $(".toolsIconsAlignLeft").click(function(){
  1304.     if(EditState == "all"){
  1305.         $(".cardElementDraggable").css("left", "0px");
  1306.     }else{
  1307.         $.each(selectedObjects, function(){
  1308.             $("#" + this).css("left", "0px");
  1309.         });
  1310.     }
  1311. });
  1312.  
  1313. //Align text to the card center
  1314. $(".toolsIconsAlignCenter").click(function(){
  1315.     var cardSize = cardProperties.container.width() - 44 ;
  1316.    
  1317.     if(EditState == "all"){
  1318.         $.each($(".cardElementDraggable"), function(){
  1319.             offset = (cardSize  / 2) - ($(this).width() / 2);
  1320.            
  1321.             $(this).css("left", offset + "px");
  1322.         });
  1323.     }else{
  1324.         $.each($(selectedObjects), function(){
  1325.             offset = (cardSize  / 2) - ($("#" + this).width() / 2);
  1326.            
  1327.             $("#" + this).css("left", offset + "px");
  1328.         });
  1329.     }
  1330. });
  1331.  
  1332. //Align text to the upper edge
  1333. $(".toolsIconsAlignVerticalTop, .toolsIconsAlignSpacesHorizontal, .toolsIconsAlignVerticalBottom, .toolsIconsAlignVerticalCenter, .toolsIconsAlignSpacesVertical").click(function(){
  1334.     var cardSize = cardProperties.container.width() - 44 ;
  1335.         //check if anything is selected
  1336.         if(selectedObjects.length < 2){
  1337.             showError("Please select more then one block of text");
  1338.             return;
  1339.         }
  1340.        
  1341.         //get object that gonna be used to align other objects
  1342.         var leader;
  1343.         var found = false;
  1344.        
  1345.         $.each($(".textInput"), function(){
  1346.             if(found) return;
  1347.            
  1348.             if($.inArray($(this).attr("name"), selectedObjects) > -1){
  1349.                 leader = $("#" + $(this).attr("name"));
  1350.                 found = true;
  1351.             }
  1352.         });
  1353.        
  1354.         //get right action
  1355.         switch($(this).attr("action")){
  1356.             case 'verticalTop':
  1357.                 var offset = leader.css("top");
  1358.                    
  1359.                 $.each(selectedObjects, function(){
  1360.                     //skip leader object
  1361.                     if(this == leader.attr("id"))
  1362.                         return;
  1363.                     $("#" + this).css("top", offset);
  1364.                 });
  1365.             break;         
  1366.            
  1367.             case 'verticalBottom':
  1368.                 $.each(selectedObjects, function(){
  1369.                     //skip leader object
  1370.                     if(this == leader.attr("id"))
  1371.                         return;
  1372.                    
  1373.                     offset = parseInt(leader.css("top")) + leader.height() + 5;
  1374.                    
  1375.                     $("#" + this).css("top", offset);
  1376.                 });
  1377.             break;         
  1378.            
  1379.             case 'verticalMiddle':
  1380.                 $.each(selectedObjects, function(){
  1381.                     //skip leader object
  1382.                     if(this == leader.attr("id"))
  1383.                         return;
  1384.                    
  1385.                     offset = (parseInt(leader.css("top")) + ((leader.height() + 5) / 2)) - ($("#" + this).height() / 2);
  1386.                    
  1387.                     $("#" + this).css("top", offset);
  1388.                 });
  1389.             break;
  1390.            
  1391.             case 'horizontalSpaces':
  1392.                 // Cache the elements
  1393.                 var $obj = $('.textSelected');
  1394.                
  1395.                 $obj = $obj.sort(function(a, b) {
  1396.                     return $(a).position().left - $(b).position().left;
  1397.                 });
  1398.  
  1399.                 var obj_high = $obj.first();
  1400.                 var obj_low = $obj.last();
  1401.                 var elm_width = 0;
  1402.                
  1403.                 elm_width = obj_low.position().left - obj_high.position().left;
  1404.                
  1405.                 //spaces
  1406.                 var spaces = elm_width / ($obj.length);
  1407.                 console.log(spaces);
  1408.                 topPosition = obj_high.position().left + spaces;
  1409.  
  1410.                 $.each($obj, function(i, item){
  1411.                     if(i == 0 || i == $obj.length -1) return;
  1412.                    
  1413.                     $(item).animate({
  1414.                         left: topPosition + "px"
  1415.                     });
  1416.                    
  1417.                     topPosition = topPosition + spaces;
  1418.  
  1419.                 });
  1420.  
  1421.             break;
  1422.            
  1423.             case 'verticalSpaces':
  1424.                 // Cache the elements
  1425.                 var $obj = $('.textSelected');
  1426.                
  1427.                 $obj = $obj.sort(function(a, b) {
  1428.                     return $(a).position().top - $(b).position().top;
  1429.                 });
  1430.  
  1431.                 var obj_high = $obj.first();
  1432.                 var obj_low = $obj.last();
  1433.                 var elm_height = 0;
  1434.                
  1435.                 //gauti container dydi
  1436.                 $.each($obj, function(i, item){
  1437.                     if(i == 0 || i == $obj.length - 1) return;
  1438.                    
  1439.                     elm_height = elm_height + $(item).height();
  1440.                 });
  1441.  
  1442.                 //gauti tarpus
  1443.                 spaces = (( (obj_low.position().top - obj_high.position().top) - obj_high.height())
  1444.                         - elm_height) / ($obj.length - 1);
  1445.  
  1446.                 //gauti pirma top pozicija
  1447.                 topPosition = obj_high.position().top + obj_high.height()  + spaces;
  1448.                
  1449.                 $.each($obj, function(i, item){
  1450.                     if(i == 0 || i == $obj.length -1) return;
  1451.                    
  1452.                     $(item).animate({
  1453.                         top: topPosition + "px"
  1454.                     });
  1455.                    
  1456.                     topPosition = topPosition + $(item).height() + spaces;
  1457.                    
  1458.                 });
  1459.             break;
  1460.         }
  1461. });
  1462.  
  1463. //----------------------Change card side------------------------//
  1464. $(".sideTab").click(function(){
  1465.     side = $(this).attr("side");
  1466.    
  1467.     if(side ==  cardProperties.currentCardSide) return;
  1468.    
  1469.     $(".sideTab").removeClass("tabSelected");
  1470.    
  1471.     $(this).addClass("tabSelected");
  1472.    
  1473.     getCardData(side, "side" + cardProperties.currentCardSide, "side" + side);
  1474.    
  1475.     cardProperties.currentCardSide = side;
  1476. });
  1477.  
  1478. function getCardData(side, switchFrom, switchTo){
  1479.  
  1480.     //get text data
  1481.     $.each($(".cardElementDraggable"), function(){
  1482.         key = $(this).attr("id");
  1483.         cardData[switchFrom].textPositions[key].left = $(this).position().left;//update left position
  1484.         cardData[switchFrom].textPositions[key].top = $(this).position().top;//update top position
  1485.         cardData[switchFrom].textPositions[key].text = $(this).text();//update text
  1486.     });
  1487.    
  1488.     //load new data
  1489.     loadCardData(switchTo, false);
  1490. }
  1491.  
  1492. //--------------------Change card text properties-------------//
  1493. //make text draggable
  1494. $(".cardElementDraggable").draggable({
  1495.     containment: 'parent',
  1496.     distance: 4
  1497. });
  1498.  
  1499. //call other function on these to events and work data out there
  1500. $(".cardElementDraggable").click(function(){ selectObject($(this).attr("id"), 'click'); });
  1501. $(".textInput").focus(function(){ selectObject( $(this).attr("name"), 'focus') });
  1502.  
  1503. //select text objects
  1504. var selectedObjects = new Array();
  1505. var selectedObjectsForColor = "";
  1506. var selectedObjectsForColorAll = ".cardElementDraggable, .cardLines";
  1507. var previousSelectedObj;
  1508.  
  1509. //get selected objects
  1510. function selectObject(id, event){
  1511.  
  1512.     //when nothing is selected and state is `all` change it to `selected`
  1513.     if(selectedObjects.length == 0 && EditState == "all"){
  1514.         $("#changeEditState").removeClass("stateAll").addClass("stateSelected");
  1515.         EditState = "selected";
  1516.     }
  1517.  
  1518.     if(event == "focus"){
  1519.         $("#" + id).css("border", "1px dashed #3a3737");
  1520.         $("#" + previousSelectedObj).css("border", "0px");
  1521.        
  1522.         //check if we have selected it already
  1523.         if($.inArray(id, selectedObjects) == -1)
  1524.             selectedObjects.push(id);
  1525.        
  1526.         if($.inArray(previousSelectedObj, selectedObjects) > -1)
  1527.             selectedObjects.splice($.inArray(previousSelectedObj, selectedObjects), 1);
  1528.        
  1529.         previousSelectedObj = id;
  1530.  
  1531.     }else{
  1532.         //check if we have selected it already
  1533.         if($.inArray(id, selectedObjects) > -1){
  1534.             //remove this element
  1535.             selectedObjects.splice($.inArray(id, selectedObjects), 1);
  1536.             if(event != "lines")
  1537.                 $("#" + id).css("border", "0px").removeClass("textSelected");
  1538.            
  1539.             //when user uncheks all selections and state is `selected` change it to `all`
  1540.             if(selectedObjects.length == 0 && EditState == "selected"){
  1541.                 $("#changeEditState").removeClass("stateSelected").addClass("stateAll");
  1542.                 EditState = "all";
  1543.             }
  1544.         }else{
  1545.             selectedObjects.push(id);
  1546.            
  1547.             if(event != "lines")
  1548.                 $("#" + id).css("border", "1px dashed #3a3737").addClass("textSelected");
  1549.         }
  1550.     }
  1551.    
  1552.     //we need to build string which contains selected elements id, this is used for color changing
  1553.     $.each(selectedObjects, function(i){
  1554.         if(i == 0)
  1555.             selectedObjectsForColor = "#"+this;
  1556.         else
  1557.             selectedObjectsForColor = selectedObjectsForColor + ", #"+ this
  1558.     });
  1559.  
  1560.     if(selectedObjects.length == 0) selectedObjectsForColor = "#null"; //we need this when nothing is selected
  1561.     //reset color picker each time
  1562.     if(EditState == "all")
  1563.         runColorPicker(".changeTextColor", selectedObjectsForColorAll, "color, border-color", "toolsChangeTextColor", "Change text color");
  1564.     else
  1565.         runColorPicker(".changeTextColor", selectedObjectsForColor, "color, border-color", "toolsChangeTextColor", "Change text color");
  1566.  
  1567. }
  1568.  
  1569. //by default change text color for all text objects
  1570. runColorPicker(".changeTextColor", selectedObjectsForColorAll, "color, border-color", "toolsChangeTextColor", "Change text color");
  1571.  
  1572. function runColorPicker(bindTo, alterField, alterProperties, addClass, setTitle){
  1573.     $(bindTo).colorpicker({
  1574.         altField: alterField,
  1575.         altProperties: alterProperties,
  1576.         showOn: "button",
  1577.         buttonImage: "images/calendar.gif",
  1578.         buttonImageOnly: true,
  1579.         buttonText: setTitle,
  1580.         buttonClass: addClass +" toolsIcons displayInline"
  1581.     });
  1582. }
  1583.  
  1584. //by default edit all items
  1585. var EditState = "all";
  1586. //determine which elemts to edit
  1587. $("#changeEditState").click(function(){
  1588.     if(EditState == "all"){
  1589.         $(this).removeClass("stateAll").addClass("stateSelected");
  1590.         EditState = "selected";
  1591.         runColorPicker(".changeTextColor", selectedObjectsForColor, "color, border-color", "toolsChangeTextColor", "Change text color");
  1592.     }else{
  1593.         $(this).removeClass("stateSelected").addClass("stateAll");
  1594.         EditState = "all";
  1595.         runColorPicker(".changeTextColor", selectedObjectsForColorAll, "color, border-color", "toolsChangeTextColor", "Change text color");
  1596.     }
  1597. });
  1598.  
  1599. //apply new style to selectmenu
  1600. $('.toolsChangeTextFont').selectmenu({width:160});
  1601. $(".cardDimensions").selectmenu();
  1602. $(".linesStyle").selectmenu({width: 70, menuWidth: 100});
  1603.  
  1604. //change font family
  1605. $(".toolsChangeTextFont").change(function(){
  1606.     var value = $(this).val();
  1607.    
  1608.     //edit all items
  1609.     if(EditState == "all")
  1610.         objectForEdit = $(".cardElementDraggable");
  1611.     else
  1612.         objectForEdit = selectedObjects;
  1613.    
  1614.     $.each(objectForEdit, function(){
  1615.         if(EditState == "all")
  1616.             obj = this;
  1617.         else
  1618.             obj = "#" + this;
  1619.            
  1620.         $(obj).css("font-family", value);
  1621.     });
  1622. });
  1623. var timeout = $('#clicker');
  1624.  
  1625. $(document).mouseup(function(){
  1626.     clearInterval(timeout);
  1627.     return false;
  1628. });
  1629.  
  1630. //change text style
  1631. $(".textToolsSingle").mousedown(function(){
  1632.     var action = $(this).attr('action');
  1633.    
  1634.     switch(action){
  1635.         //change text weight
  1636.         case 'Bold':
  1637.             changeProperties("font-weight", "bold", "normal", 400);
  1638.         break;
  1639.        
  1640.         //change font style
  1641.         case 'Italic':
  1642.             changeProperties("font-style", "italic", "normal");
  1643.         break; 
  1644.        
  1645.         //change font decoration
  1646.         case 'Underline':
  1647.             changeProperties("text-decoration", "underline", "none");
  1648.         break;
  1649.        
  1650.         //increase font size
  1651.         case 'IncreaseFontSize':
  1652.             timeout = setInterval(function(){
  1653.            
  1654.                 //edit all items
  1655.                 if(EditState == "all")
  1656.                     objectForEdit = $(".cardElementDraggable");
  1657.                 else
  1658.                     objectForEdit = selectedObjects;
  1659.                
  1660.                 $.each(objectForEdit, function(){
  1661.                     if(EditState == "all")
  1662.                         obj = this;
  1663.                     else
  1664.                         obj = "#" + this;
  1665.                        
  1666.                     //extract font-size from style tag
  1667.                     styletag = $(obj).attr('style');
  1668.                     stylestemp = styletag.split(';');
  1669.                     styles = {};
  1670.                     c = '';
  1671.                     for (var x in stylestemp) {
  1672.                         c = stylestemp[x].split(':');
  1673.                         styles[$.trim(c[0])]=$.trim(c[1]);
  1674.                     }
  1675.                    
  1676.                     newSize = parseInt(styles['font-size']) + 1;
  1677.                    
  1678.                     $(obj).css("font-size", newSize + "pt");
  1679.                 });
  1680.             }, 70);
  1681.         break;
  1682.        
  1683.         //decrease font size
  1684.         case 'DecreaseFontSize':
  1685.             timeout = setInterval(function(){
  1686.                 //edit all items
  1687.                 if(EditState == "all")
  1688.                     objectForEdit = $(".cardElementDraggable");
  1689.                 else
  1690.                     objectForEdit = selectedObjects;
  1691.                
  1692.                 $.each(objectForEdit, function(){
  1693.                     if(EditState == "all")
  1694.                         obj = this;
  1695.                     else
  1696.                         obj = "#" + this;
  1697.                        
  1698.                     //extract font-size from style tag
  1699.                     styletag = $(obj).attr('style');
  1700.                     stylestemp = styletag.split(';');
  1701.                     styles = {};
  1702.                     c = '';
  1703.                     for (var x in stylestemp) {
  1704.                         c = stylestemp[x].split(':');
  1705.                         styles[$.trim(c[0])]=$.trim(c[1]);
  1706.                     }
  1707.                    
  1708.                     newSize = parseInt(styles['font-size']) - 1;
  1709.                    
  1710.                     $(obj).css("font-size", newSize + "pt");
  1711.                 });
  1712.             }, 120);
  1713.         break;
  1714.        
  1715.         case 'left':
  1716.             $.each(selectedObjects, function(){
  1717.                 $("#" + this).css("left", "2px");
  1718.             });
  1719.         break;
  1720.        
  1721.         case 'right':
  1722.             $.each(selectedObjects, function(){
  1723.                 obj = $("#" + this);
  1724.                
  1725.                 obj.css("left", (obj.parent().width() - obj.width()) - 10);
  1726.             });
  1727.         break;
  1728.        
  1729.         case 'middle':
  1730.             $.each(selectedObjects, function(){
  1731.                 obj = $("#" + this);
  1732.                
  1733.                 obj.css("left", ((obj.parent().width() / 2) - (obj.width() / 2) - 10 ));
  1734.             });
  1735.         break;
  1736.  
  1737.         default:
  1738.             showError("Requested action '"+action+"' was not found!");
  1739.         break;
  1740.     }
  1741.  
  1742.    
  1743.     //update css
  1744.     function changeProperties(a, b, c, d, execute){
  1745.        
  1746.         //edit all items
  1747.         if(EditState == "all")
  1748.             objectForEdit = $(".cardElementDraggable");
  1749.         else
  1750.             objectForEdit = selectedObjects;
  1751.        
  1752.         $.each(objectForEdit, function(){
  1753.             if(EditState == "all")
  1754.                 obj = this;
  1755.             else
  1756.                 obj = "#" + this;
  1757.            
  1758.             //don't do checking
  1759.             if(execute){
  1760.                 $(obj).css(a, b);
  1761.                 return;
  1762.             }
  1763.            
  1764.             if($(obj).css(a) == c || $(obj).css(a) == d){
  1765.                 $(obj).css(a, b);
  1766.             }else{
  1767.                 $(obj).css(a, c);
  1768.             }
  1769.         });
  1770.     }
  1771. });
  1772.  
  1773. masterIndex = 100;
  1774.  
  1775. function updateIndex(id){
  1776.     masterIndex++;
  1777.     $(id).css("z-index", masterIndex);
  1778. }
  1779.  
  1780. });
  1781. function showError(errorMessage){
  1782.     alert(errorMessage);
  1783. }
  1784.  
  1785.  
  1786. function getAllCardData(){
  1787.     //save current side data
  1788.     $(function(){
  1789.         save("side1");
  1790.     });
  1791.     //return both sides data
  1792.     return cardData;
  1793. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!