<?php
/*
@author suxoza <suxoza@gmail.com>
*/
header("Content-type: text/html; Charset=utf-8");
  session_start();
   mb_internal_encoding("UTF-8");
    error_reporting(E_ALL);
     date_default_timezone_set("Asia/Tbilisi");
     
     require_once '../../clases/Central.php';
     
     $_ = new Central;
     $language = $_->_lang;
     $_ID = (int)trim(strip_tags($_GET['id']));
     
     
    $how_to_view_big_pages = $_->_dir.$_->_admin_dir.'view/templates/how_to_view_big_pages.options';
    $how_to_view_big_pages = explode('|',file_get_contents($how_to_view_big_pages));

    $length = count($how_to_view_big_pages);
    $_count = 5;
    
    
    $demo_desinger = "<div class='title_desinger'>some text! some txt! some text! some txt! some text! some txt!</div>"
                        . "<div class='body_desinger'>some text! some txt! some text! some txt! some text! some txt!"
                        . "some text! some txt! some text! some txt! some text! some txt!"
                        . "some text! some txt! some text! some txt! some text!</div>";

    
    
?>   


<style>

    ._display_none{display: none}
    #_container_desinger{width: 900px; height: 500px;}
    #_desinger_desinger_parent{
        background: red;
        width: 680px;
        height: 470px;
        float: left;
        z-index: 999;
        background: none repeat scroll 0 0 #FEFEFE;
        border: 2px solid #D5D5D5;
        overflow: hidden
    }
    #_desinger_desinger{
        overflow-y: auto;
        padding: 5px;
        width: 100%;
        height: 480px;
        z-index: 55;
    }
    #_select_desinger{text-align: center;padding-top: 20px;}
    #_select_desinger select{width: 200px}
    
    
    #_select_desinger .must_float_left{float: left;margin-left: 10px}
    #_select_desinger .must_float_left input[type="text"]{width: 100px}
    #_select_desinger .must_float_left select.pix_sm{width: 93px}
    
    #_counter_desinger{margin-top: 5px}
    ._demo_desinger{
        margin: 3px;
        text-align: left;
        background: none repeat scroll 0 0 #FEFEFE;
        border: 2px solid #D5D5D5;
        padding: 10px;
        height: 100px;
        padding: 5px;
        overflow: hidden;
        position: relative;
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
    .main_resize{
        cursor:s-resize;
        font-size:0.1em;
        height:16px;
        width:100%;
        background: #999;
        position: absolute;
        bottom: -11px;
        left: 0
        
      }
    .title_desinger{font-weight: bold;overflow: hidden}
    .body_desinger{white-space: normal;}
 
    ._demo_desinger_0{
        width: 97%;  
        float: left;
    }
    
    ._demo_desinger_1{
        width: 46.5%;  
        float: left;
    }
    
    ._demo_desinger_2{
        width: 30%;  
        float: left;
    }
    
    ._demo_desinger_3{
        width: 21.8%; 
        float: left;
    } 
    
    ._demo_desinger_4{
        width: 16.8%;  
        float: left;
    }     
    
    
</style>
<script>window.jQuery || alert('jquery librari not included!');</script>
<div align="center" id="save_changes" class="_display_none" onclick="save_changes(this);">ცვლილებების შენახვა</div>

<div id="_container_desinger">
    <div id="_desinger_desinger_parent">
        <div id="_desinger_desinger">
                <?php for($i = 0; $i < $_count; $i++):?>
                        <div class="_demo_desinger _demo_desinger_0">
                            <?=$demo_desinger?>
                        </div>
                <?php endfor;?>
        </div>
    </div>    
    <div id="_select_desinger">
        <select id="_select_desinger_select" onchange="_change_wrap(this);">
            <?php for($i = 0; $i < $length; $i++):?>
                <option value="<?=$i;?>"><?=$how_to_view_big_pages[$i];?></option>
            <?php endfor;?>
        </select>
        <br/>
        
        <br/>
        რაოდენობა:
        <br/>
        <select id="_counter_desinger" onchange="_add_remove_blocks(this);">
            <?php for($i = $_count; $i < 30; $i+= 5):?>
                <option value="<?=$i;?>"><?=$i;?></option>
            <?php endfor;?>
        </select>
   
        
    <br/>
        
    <br/>
    <div class="must_float_left">ბლოკების სიგანე:
        <br/> 
        <input onkeyup="pix_sm_input(this);" type="text" max="500" value="100"/> 
        <select class="pix_sm" onchange="pix_sm(this);">
            <option value="0">პიქსელი</option>
            <option value="1">სანტიმეტრი</option>
        </select>
        <br/>
        ზომის შეცვლა მაუსითაც შეიძლება
    </div>
    
    
    
    
    
    </div>

    
</div>



<script type="text/javascript">
    $.fn.main_resize = function(){
      return this.each(function(){
        var th = $(this);
        
        var inp = $('#_container_desinger div.must_float_left input:text');
        var def_value = $('#_container_desinger div.must_float_left .pix_sm').val();
        
        th.append(
          $('<div class="main_resize"></div>').bind('mousedown', function(e){
            var x = th.height();
            var y = e.clientY;
            var move_event = function(e){ 
                var vals = Math.max(20, e.clientY + x - y);
                var inp_val = def_value == 0?vals:vals/2.6315789473684212;
                th.siblings().andSelf().height(vals); 
                inp.val(inp_val);
                
                
            };
            var up_event = function(e){ 
                $('html').unbind('mousemove',move_event).unbind('mouseup',up_event);
            };
            $('html').bind('mousemove', move_event).bind('mouseup', up_event);
          })
        );
      });
    }
  $(function(){
      $('#_container_desinger div._demo_desinger').main_resize();
  });

  function pix_sm_input(a){
      var th = $(a);
      var def_value = $('#_container_desinger div.must_float_left .pix_sm').val() == 0?100:38;
      if(th.val() && parseInt(th.val()) != th.val() || th.val().length > 3 || th.val() < 0)th.val(def_value);
      setTimeout(function(){
          var width = (def_value == 100)?th.val():th.val()*2.6315789473684212;
          $('#_container_desinger div._demo_desinger').height(width);  
      },100);

  } 

  function pix_sm(a){
      var th = $(a);
      var inp = $('#_container_desinger div.must_float_left input:text');
      var width = 100;
      if(th.val() == 0)     inp.val(inp.val()*2.6315789473684212);
      else if(th.val() == 1)inp.val(inp.val()/2.6315789473684212);
      
  } 
    
  function _add_remove_blocks(a){
      var th = $(a);
      var len = $('#_desinger_desinger div._demo_desinger');
      var div = len.first().clone();
      if(th.val() > len.length){
          for(var i = len.length; i < th.val(); i++){
              div = len.first().clone();
              $('#_desinger_desinger').append(div);
          }
      }else $('#_desinger_desinger div._demo_desinger').slice(th.val(),len.length).remove(); 
      
  }  
   
  function _change_wrap(a){
      var th = $(a);
      var div = document.getElementById('_desinger_desinger').getElementsByTagName('div')[0].classList[1];
      $('#_desinger_desinger ._demo_desinger').each(function(){
          $(this).removeClass(div).addClass('_demo_desinger_'+th.val());
      });
  }
  
  function save_changes(a){
    $('#_templates_container').css('opacity','0.3');
    $(a).remove();
    var theme = $('#_templates_container .checked').attr('app');
//        $.ajax({
//            type : "POST",
//            async: false,
//            url  : "/view/templates/templates.php", 
//            data : "template_settings="+theme,
//            success: function(data){
//                if(data && data == 1){
//                    location.reload();
//                }
//            }
//        });
  }


</script>