<?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");
     
    set_include_path(
        get_include_path()
        .PATH_SEPARATOR.$_SERVER['DOCUMENT_ROOT'].'/clases'
    );

    function class_loader($class){
        require_once $class.'.php';
    }

    spl_autoload_register('class_loader');
     
     $_ = new Central;
     $language = $_->_lang;
     $_ID = isset($_GET['id'])?(int)trim(strip_tags($_GET['id'])):'';
     $select = $_->select("attributes","menu","small",["id",$_ID]);
     if(strlen($select) > 10){
         $select = json_decode($select);
         //$_->pre($select);
     }
     
     if(count($_POST)){
         if(isset($_POST['how_to_view_big_pages'])){
             $json = trim(strip_tags($_POST['how_to_view_big_pages']));
             
             if($select){
                 $select->desinger = json_decode($json);
             }else{
                 $select = new stdClass();
                 $select->desinger = json_decode($json);
             }    
             if($_->update("menu",[["attributes"],[Central::_json_encode($select)],["id",$_ID]]))echo 1;
         }
         die;
     }
     
     
    $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 = ($select)?$select->desinger->count:6;
    
    //$_height = 
    
    $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 </div>";

    
    
?>   


<style>
    #save_changes{
        margin: -5px 5px 15px 7px;
        padding: 5px;
        border:1px solid black;
        border-radius: 5px;
        width: 190px;
        float: right;
        cursor: pointer
    }
    #save_changes:hover{
        color:red
    }
    ._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;margin: 15px 0 0 7px}
    
    
    #_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;
        position: relative
    }
    .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;
    }
    
    .list_share{width: 100px;position: relative;top: 20px}
    .list_share img {width: 80px;height: 25px}
    #_share input{position: relative;top: 3.5px}
    
</style>
<script>window.jQuery || alert('jquery librari not included!');</script>
<div align="center" id="save_changes" 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_<?=($select)?$select->desinger->style:0;?>" style="height:<?=($select)?$select->desinger->height:100;?>px">
                            <?=$demo_desinger?>
                            <div class="list_share <?=($select)?$select->desinger->share:'_display_none';?>">
                              <img src="/img/share_like.jpg"/>
                            </div>
                        </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++):
                   $checked = ''; 
                   if($select){
                       if($select->desinger->style == $i)
                           $checked = "selected='selected'";
                   }
                
                ?>
                <option value="<?=$i;?>" <?=$checked;?>><?=$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 = 6; $i <= 30; $i+= 6):
                    $checked = ''; 
                    if($select){
                        if($select->desinger->count == $i)
                            $checked = "selected='selected'";
                    }
                
                ?>
                <option value="<?=$i;?>" <?=$checked;?>><?=$i;?></option>
            <?php endfor;?>
        </select>
        
        
    <br/>
        
    <br/>
    <div class="must_float_left">ბლოკების სიგანე:
        <br/> 
        <input onkeyup="pix_sm_input(this);" type="text" max="500" value="<?=($select)?$select->desinger->height:100;?>"/> პიქსელი
        <select class="pix_sm" onchange="pix_sm(this);" style="display: none">
            <option value="0">პიქსელი</option>
            <option value="1">სანტიმეტრი</option>
        </select>
        <br/>
        ზომის შეცვლა მაუსითაც შეიძლება
    </div>
    

        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <div id="_share">გაზიარების ღილაკები: <input type="checkbox" onchange="_share(this);" <?=($select && $select->desinger->share == '_display_block')?'checked="checked"':'';?>/></div>
        <br/>
    
    
    
    </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 _share(a){
      var th = $(a);
      if(th.is(':checked'))
          $('.list_share').removeClass('_display_none').addClass('_display_block');
      else
          $('.list_share').addClass('_display_none').removeClass('_display_block');
  }
  
  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');
    var _object = {};
    _object['style'] = $('select#_select_desinger_select').val();
    _object['count'] = $('select#_counter_desinger').val();
    _object['height'] = Math.round($('.must_float_left input:text').val());
    _object['share'] = $('.list_share').attr('class').split(' ')[1];

   // console.log(JSON.stringify(_object));
    $(a).remove();
    var theme = $('#_templates_container .checked').attr('app');
        $.ajax({
            type : "POST",
            async: false,
            url  : "/view/templates/how_to_view_big_pages.php?id=<?=$_ID;?>", 
            data : "how_to_view_big_pages="+JSON.stringify(_object),
            success: function(data){
                location.reload();
               
            }
        });
  }


</script>