public function appPageCustom()
    {
        $valuesNya = FeatureSessionLayer::load($this->feat_id);
        $contact_pname = isset($valuesNya[$this->feat_id . '_pname']) ? $valuesNya[$this->feat_id . '_pname'] : "Inbox";
        ?>


            dummy inbox



    <?php 
    }
Example #2
0
 function edit()
 {
     //cek ID
     if (isset($_GET['id'])) {
         $id = addslashes($_GET['id']);
         $appAcc = new AppAccount();
         $appAcc->getByID($id);
         if ($appAcc->app_client_id != Account::getMyID() && !in_array("master_admin", Account::getMyRoles())) {
             die("Owner's ID Mismatch");
         } else {
             //                ZAppFeature::clearSession();
             //load
             //                session_id($appAcc->app_keywords);
             FeatureSessionLayer::loadJSON($appAcc->app_keywords, $appAcc->app_id);
             //                sleep(1);
             //                pr($_SESSION);
             header("Location:" . _SPPATH . "apps/make?id=" . $id);
             die;
         }
     } else {
         header("Location:" . _SPPATH . "apps/makenew");
         die;
     }
 }
    public static function page()
    {
        $selectedFeature = ZAppFeature::selectedFeature();
        //        pr($selectedFeature);
        $homePage = $selectedFeature[0];
        $arrChildren = ZAppFeature::getChildren();
        //            pr($arrChildren);
        $arrObj = array();
        foreach ($arrChildren as $child) {
            $obj = new $child();
            //kalo tidak aktif continue
            if (!$obj->feat_active) {
                continue;
            }
            if (!isset($arrObj[$obj->feat_rank_tampil])) {
                $arrObj[$obj->feat_rank_tampil] = $obj;
            } else {
                $arrObj[] = $obj;
            }
        }
        ksort($arrObj);
        //            pr($arrObj);
        ?>
        <style>
            .sim_textColor{
                color: white;
            }
            .sim_maskColor{
                /*background-color: white;*/
                width: 15px;
                height: 15px;
                margin: auto;
                margin-top: 5px;
            }
            .bgblur{
                position: fixed;
                width: 100%;
                height: 100%;
                top:0px;
                left: 0px;
                background-color: rgba(0,0,0,0.8);
                z-index: 1031;
            }
            .list_item_form{
                position: fixed;
                top: 50%;
                left: 50%;
                width: auto;
                height: auto;

                -webkit-transform: translateX(-50%) translateY(-50%);
                -moz-transform: translateX(-50%) translateY(-50%);
                -ms-transform: translateX(-50%) translateY(-50%);
                -o-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
                z-index: 1032;
                background-color: white;
                border-radius: 3px;

                max-height: 90%;
                overflow: auto;
            }
            .list_item_form::-webkit-scrollbar {
                width: 2px;
            }
            .list_item_form::-webkit-scrollbar-button {
                width: 2px;
                height:5px;
            }
            .list_item_form::-webkit-scrollbar-track {
                background:#eee;
                border: thin solid lightgray;
                box-shadow: 0px 0px 3px #dfdfdf inset;
                border-radius:10px;
            }
            .list_item_form::-webkit-scrollbar-thumb {
                background:#999;
                border: thin solid gray;
                border-radius:10px;
            }
            .list_item_form::-webkit-scrollbar-thumb:hover {
                background:#7d7d7d;
            }
        </style>

        <script>


            var inTabs = [];
            var selectedTab = '<?php 
        echo $selectedFeature[0];
        ?>
';

            var arrFeats = {};


            function removeAppFeature(id){

                $.post("<?php 
        echo _SPPATH;
        ?>
FeatureSessionLayer/removeFeat",{id:id},function(data){
                    console.log('kiriman feature ');
                    console.log(data);
//                    alert(data);
                    $(".hiddenform").hide();

                    selectedTab = data[0];

                    $(".mpage").hide();
                    $('#m_'+selectedTab).show();

//                    manageView(data[0]);

                    updateSelectedAppAndSimulator();


                    if(data.length <2){
                        $('.jumlahwarning').show();
                    }


                    $("#wadahbutton_"+id+"_1").hide();
                    $("#wadahbutton_"+id+"_2").show();
                },'json');
            }

            function updateSelectedAppAndSimulator(){

                $('.jumlahwarning').hide();

                console.log("selectedTab : "+selectedTab);

                //update warna selected
                $.get("<?php 
        echo _SPPATH;
        ?>
FeatureSessionLayer/getSelectedFeat",function(data){

                    console.log("feats");
                    console.log(data);

                    var jumlahSelected = data.length;

                    var sisaNya = [];

                    var tabs = '';
                    $(".feat").removeClass("feat-selected");


                    for(var x=0;x<data.length;x++){

                        var attr = data[x];
                        //update iconss

                        $("#icon_"+data[x]).addClass("feat-selected");
//                        console.log("update "+data[x]);

                        if(jumlahSelected>5) {
                            if(x>3){
                                sisaNya.push(data[x]);

                            }else{
                                //update tabss
                                tabs += '<div onclick="manageView(\''+data[x]+'\');" class="mtab ';
                                if(data[x] == selectedTab) tabs += 'mtab-selected';
                                tabs += '" id="tab_'+data[x]+'">';
                                tabs += '<div class="mtab-img">' +
                                '<div class="sim_maskColor" style="-webkit-mask-box-image: url('+arrFeats[attr].icon_path+arrFeats[attr].feat_tab_icon+');"></div>' +
                                '</div>';

//                                tabs += '<div class="mtab-img"><i class="'+arrFeats[attr].feat_tab_icon+'"></i></div>';
                                tabs += '<div class="mtab-text" id="tabname_'+data[x]+'">'+arrFeats[attr].label_name+'</div></div>';
                            }
                        }else{
                            //update tabss
                            tabs += '<div onclick="manageView(\''+data[x]+'\');"  class="mtab ';
                            if(data[x] == selectedTab) tabs += 'mtab-selected';
                            tabs += '" id="tab_'+data[x]+'">';
                            tabs += '<div class="mtab-img">' +
                            '<div class="sim_maskColor" style="-webkit-mask-box-image: url('+arrFeats[attr].icon_path+arrFeats[attr].feat_tab_icon+');"></div>' +
                            '</div>';
                            tabs += '<div class="mtab-text" id="tabname_'+data[x]+'">'+arrFeats[attr].label_name+'</div></div>';
                        }


//                        console.log("update tabs"+tabs);

                        //backend
                        inTabs = [];
                        inTabs.push(data[x]);

                        $("#wadahbutton_"+data[x]+"_1").show();
                        $("#wadahbutton_"+data[x]+"_2").hide();
                    }

                    //dari jumlah kita tentukan width
                    var pembagi = jumlahSelected;
                    if(jumlahSelected>5){
                        pembagi = 5;
                    }



                    var tabwidth = Math.floor(271/pembagi);
                    if(jumlahSelected>5){
                        //update tabss
                        tabs += '<div class="mtab ';
                        if(data[x] == selectedTab) tabs += 'mtab-selected';
                        tabs += '" onclick="showMore();" id="tab_more">';
                        tabs += '<div class="mtab-img">' +
                        '<div class="sim_maskColor" style="-webkit-mask-box-image: url('+arrFeats[attr].icon_path+'ic_more.png'+');"></div>' +
                        '</div>';
//                        tabs += '<div class="mtab-img"><i class="glyphicon glyphicon-option-horizontal"></i></div>';
                        tabs += '<div class="mtab-text">more</div></div>';


                        //update isi dari showMore
                        updateShowMore(sisaNya);
                    }


                    tabs += '<style>.mtab{width: '+tabwidth+'px;} </style>';






                    $("#mfooter").html(tabs);

                },'json');
            }

        </script>
        <style>

            .closer{
                cursor: pointer;
                /*float: right;*/
                width: 10px;
                height: 10px;
            }
        </style>
        <?php 
        foreach ($arrObj as $obj) {
            $valuesNya = FeatureSessionLayer::load($obj->feat_id);
            $labelname = isset($valuesNya[$obj->feat_id . '_labelname']) ? $valuesNya[$obj->feat_id . '_labelname'] : $obj->feat_name;
            ?>
            <div class="hiddenform" id="form_<?php 
            echo $obj->feat_id;
            ?>
" style="display: none;">
                <div class="closer"  onclick="$('#form_<?php 
            echo $obj->feat_id;
            ?>
').hide();$('#feature').show();">x</div>

                <?php 
            $obj->formPembuatan();
            ?>
            </div>

            <script>
                //sekalian kita buat object javascriptnya untuk masing2 object spy accesible terus nantinya
                var obj_<?php 
            echo $obj->feat_id;
            ?>
 = {
                    feat_id : "<?php 
            echo $obj->feat_id;
            ?>
",
                    feat_name : "<?php 
            echo $obj->feat_name;
            ?>
",
                    feat_icon : "<?php 
            echo $obj->feat_icon;
            ?>
",
                    feat_tab_icon : "<?php 
            echo $obj->feat_tab_icon;
            ?>
",
                    label_name : "<?php 
            echo $labelname;
            ?>
",
                    icon_path : "<?php 
            echo $obj->icon_path;
            ?>
"
//                    getInfo: function () {
//                        return this.color + ' ' + this.type + ' apple';
//                    }
                }

                arrFeats.<?php 
            echo $obj->feat_id;
            ?>
 = obj_<?php 
            echo $obj->feat_id;
            ?>
;
            </script>
        <?php 
        }
        ?>

<section id="feature">
    <h2 class="header_besar">Which features do you want in your app? </h2>
    <div class="feature_list_heading_information">
        <p style="color: #a2a2a2;">Please choose one or more.</p>
    </div>
    <div class="alert alert-warning jumlahwarning" style="display: none;">
        <strong>Warning!</strong> Minimum one feature must be selected.
    </div>
    <script>
        $(function() {
//                                $( "#sortable" ).sortable();


            $("#sortable").sortable({
                stop: function(event, ui) {

                    var idsInOrder = $("#sortable").sortable("toArray");
                    console.log(idsInOrder);

                    $.post("<?php 
        echo _SPPATH;
        ?>
FeatureSessionLayer/updateFeatOrder",{
                        ids : idsInOrder.join()
                    },function(data){
                        console.log(data);

                        updateSelectedAppAndSimulator();
                    },'json');
//                                        var data = "";
//
//                                        $("#sortable li").each(function(i, el){
//                                            var p = $(el).text().toLowerCase().replace(" ", "_");
//                                            data += p+"="+$(el).index()+",";
//                                        });
//                                        console.log(data);
//
//                                        $("form > [name='new_order']").val(data.slice(0, -1));
//                                        $("form").submit();
                }
            });
            $( "#sortable" ).disableSelection();
        });


    </script>
    <style>
        #sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
        #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 85px; height: 100px; text-align: center; }


    </style>



    <ul id="sortable">
        <?php 
        foreach ($selectedFeature as $sel) {
            foreach ($arrObj as $obj) {
                if ($obj->feat_id == $sel) {
                    //                    pr($sel);
                    ?>
                    <li id="li___<?php 
                    echo $obj->feat_id;
                    ?>
" >
                        <div class="feat <?php 
                    if (in_array($obj->feat_id, $selectedFeature)) {
                        echo "feat-selected";
                    }
                    ?>
" onclick="manageView('<?php 
                    echo $obj->feat_id;
                    ?>
');" id="icon_<?php 
                    echo $obj->feat_id;
                    ?>
">
                            <div class="feat-img">
                                <div class="feat-img-icon"></div>
                                <!--                                        <img class="feat_icon" src="--><?php 
                    //=$obj->icon_path.$obj->feat_icon;
                    ?>
<!--">-->
                                <!--                                        <i class="--><?php 
                    //=$obj->feat_icon;
                    ?>
<!--"></i>-->
                            </div>
                            <div class="feat-text"   id="featname_<?php 
                    echo $obj->feat_id;
                    ?>
">
                                <?php 
                    echo $obj->feat_name;
                    ?>
                            </div>
                        </div>
                    </li>
                    <style>
                        #icon_<?php 
                    echo $obj->feat_id;
                    ?>
 .feat-img-icon{
                            background-color: white;
                            -webkit-mask-box-image: url(<?php 
                    echo $obj->icon_path . $obj->feat_icon;
                    ?>
);
                        }
                    </style>
                <?php 
                }
            }
        }
        ?>
        <?php 
        foreach ($arrObj as $obj) {
            if (!in_array($obj->feat_id, $selectedFeature)) {
                ?>
                <li id="li___<?php 
                echo $obj->feat_id;
                ?>
" >
                    <div class="feat <?php 
                if (in_array($obj->feat_id, $selectedFeature)) {
                    echo "feat-selected";
                }
                ?>
" onclick="manageView('<?php 
                echo $obj->feat_id;
                ?>
');" id="icon_<?php 
                echo $obj->feat_id;
                ?>
">
                        <div class="feat-img">
                            <div class="feat-img-icon"></div>
                            <!--                                <img class="feat_icon" src="--><?php 
                //=$obj->icon_path.$obj->feat_icon;
                ?>
<!--">-->
                            <!--                                <i class="--><?php 
                //=$obj->feat_icon;
                ?>
<!--"></i>-->
                        </div>
                        <div class="feat-text" id="featname_<?php 
                echo $obj->feat_id;
                ?>
">
                            <?php 
                echo $obj->feat_name;
                ?>
                        </div>
                    </div>

                </li>
                <style>
                    #icon_<?php 
                echo $obj->feat_id;
                ?>
 .feat-img-icon{
                        background-color: white;
                        -webkit-mask-box-image: url(<?php 
                echo $obj->icon_path . $obj->feat_icon;
                ?>
);
                    }
                </style>
            <?php 
            }
        }
        ?>
    </ul>
    <div class="clearfix"></div>
    <div style="text-align: center; margin-top: 20px;">
        <button id="nextpage1" style="width: 50%;" class="btn btn-danger btn-lg">Next</button>
    </div>
    <script>
        $('#nextpage1').click(function(){
            $('.nav-pills a[href="#page_themes"]').tab('show');
        });
        //$(this).toggleClass('feat-selected');
        function manageView(id){

            $( "#loadingmobile" ).show().fadeOut( 300 );

            $('#feature').hide();
            $('.hiddenform').hide();
            $('#form_'+id).show(); //dulunya toggle

            $(".mtab").removeClass("mtab-selected");

            selectedTab = id;
            $("#tab_"+id).addClass("mtab-selected");
            /*
             if(jQuery.inArray( id, inTabs )>-1){
             selectedTab = id;
             $("#tab_"+id).addClass("mtab-selected");
             }*/

            $(".mpage").hide();

            //showloading bentar
            $('#m_'+id).show();



            if(id == "map"){
                kerjakanMap();
            }
        }
    </script>
</section>
<?php 
    }
    public function formCustom()
    {
        $sel = ZAppFeature::selectedFeature();
        $valuesNya = FeatureSessionLayer::load($this->feat_id);
        $info_slogan = isset($valuesNya['info_slogan']) ? $valuesNya['info_slogan'] : "slogan";
        $info_banner = isset($valuesNya['info_banner']) ? $valuesNya['info_banner'] : $this->feat_noimage;
        ?>
        <h1 class="header_besar" style="padding: 0; margin: 0; text-align: center; margin-top: 10px; margin-bottom: 10px;">Info</h1>
        <p style="color: #666666; font-size: 12px;">Please complete one or more fields below. <em>All fields are optional.</em></p>

        <div class="form-group">
            <label for="info_slogan">What is your slogan? </label>
            <?php 
        TextLimiter::inputText("text", "info_slogan", "info_slogan", "slogan", $info_slogan, 30, 1, "mslogantext");
        ?>
<!--            <input type="text" class="form-control" id="info_slogan" placeholder="Slogan" value="--><?php 
        //=$info_slogan;
        ?>
<!--">-->
        </div>

        <div class="form-group">

            <?php 
        global $modalReg;
        $modalReg->regCropper("bannID", "Banner", "info_banner", $info_banner, "542:400", array("mbannerImg", "bannID_prev"));
        ?>

            <?php 
        $bannerModalID = "bannID";
        ?>

                <label for="info_banner" >Main Banner </label>
                <div class="previewImg">
                    <img style="cursor:pointer;" data-toggle="modal" data-target="#<?php 
        echo $bannerModalID;
        ?>
" id="<?php 
        echo $bannerModalID;
        ?>
_prev" src="<?php 
        echo $info_banner;
        ?>
">
                </div>


            <div class="clearfix"></div>

            <input type="hidden"  id="info_banner" name="info_banner" value="<?php 
        echo $info_banner;
        ?>
" >

        </div>






            <?php 
        //load from fields
        foreach ($this->fields as $field_name => $details) {
            $field[$field_name] = isset($valuesNya[$field_name]) ? $valuesNya[$field_name] : $details['default_value'];
            ?>
                <div class="form-group">
                <label for="<?php 
            echo $this->feat_id;
            ?>
_<?php 
            echo $field_name;
            ?>
"><?php 
            echo $details['form_question'];
            ?>
 <?php 
            if ($details['optional']) {
                ?>
<span class="optional">Optional</span><?php 
            }
            ?>
</label>
                <?php 
            if ($details['type'] == "text") {
                TextLimiter::inputText("text", $this->feat_id . "_" . $field_name, $this->feat_id . "_" . $field_name, $details['placeholder'], $field[$field_name], $details['limit_max'], $details['limit_min'], "sim_" . $this->feat_id . "_" . $field_name . "_text");
            } elseif ($details['type'] == "rte") {
                TextLimiter::inputTextArea("text", $this->feat_id . "_" . $field_name, $this->feat_id . "_" . $field_name, $details['placeholder'], $field[$field_name], $details['limit_max'], $details['limit_min'], "sim_" . $this->feat_id . "_" . $field_name . "_text");
            } else {
                TextLimiter::inputTextAreaBiasa("text", $this->feat_id . "_" . $field_name, $this->feat_id . "_" . $field_name, $details['placeholder'], $field[$field_name], $details['limit_max'], $details['limit_min'], "sim_" . $this->feat_id . "_" . $field_name . "_text");
            }
            ?>
                <script>
                    $("#<?php 
            echo $this->feat_id;
            ?>
_<?php 
            echo $field_name;
            ?>
").keyup(function(){


                        var name = "sim_<?php 
            echo $this->feat_id . "_" . $field_name;
            ?>
";
                        <?php 
            if ($details['type'] == "rte") {
                ?>
                        var slc = $("#<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
").html();
                        <?php 
            } else {
                ?>
                        var slc = $("#<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
").val();
                        <?php 
            }
            ?>

                        autoUpdateOnKeyup(name,slc);
                    });
                </script>
                </div>
                <?php 
        }
        ?>



        <script>
            function info_save_<?php 
        echo $this->feat_id;
        ?>
(){
                //get all data from inputs
                var info_slogan = $('#info_slogan').val();
                var info_banner = $('#info_banner').val();



        <?php 
        //load from fields
        foreach ($this->fields as $field_name => $details) {
            $field[$field_name] = isset($valuesNya[$field_name]) ? $valuesNya[$field_name] : $details['default_value'];
            if ($details['type'] == "text") {
                ?>
                var vr_<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
 = $('#<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
').val();
                <?php 
            } elseif ($details['type'] == "rte") {
                ?>
                var vr_<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
 = $('#<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
').html();
                <?php 
            } else {
                ?>
                 var vr_<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
 = $('#<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
').val();
                <?php 
            }
            $imp[] = $field_name . ": vr_" . $this->feat_id . "_" . $field_name;
        }
        ?>

        var label_name = $('#<?php 
        echo $this->feat_id;
        ?>
_labelname').val();

        //harus selalu ada ini..
        var contact_pname = $('#<?php 
        echo $this->feat_id;
        ?>
_pname').val();



                //save the data to sessions
                $.post('<?php 
        echo _SPPATH;
        ?>
FeatureSessionLayer/save?id=<?php 
        echo $this->feat_id;
        ?>
',{
                    <?php 
        echo $this->feat_id;
        ?>
_labelname : label_name,
                    <?php 
        echo $this->feat_id;
        ?>
_pname : contact_pname,
                    info_slogan : info_slogan,
                    info_banner : info_banner
                    <?php 
        if (count($imp) > 0) {
            echo ",";
            echo implode(",", $imp);
        }
        ?>
                },function(data){
                    console.log(data);
                    if(data){
                        $(".hiddenform").hide();
                        //update Selected App dan Layout di Simulator
                        updateSelectedAppAndSimulator();

                    }
                });

            }


        </script>

        <script>


            function autoUpdateOnKeyup(name,slc){
                if(slc.length == 0){
                    $("#" + name).hide();
                }
                else {
                    $("#" + name).show();
                    $("#"+name+"_text").html(slc);
                }
            }

        </script>
        <style>
            .optional{
                font-size: 12px;
                color: #666666;
            }
            .mlist-item .clearfix{
                padding: 0;
                margin: 0;
            }
            .mlist-text{
                white-space: pre-wrap;
            }
            .previewImg{

                height: 80px;
                overflow: hidden;
            }
            .previewImg img{
                height: 100%;

            }
        </style>


    <?php 
    }
    public static function page()
    {
        $selectedFeature = ZAppFeature::selectedFeature();
        $homePage = $selectedFeature[0];
        $arrChildren = ZAppFeature::getChildren();
        //            pr($arrChildren);
        $arrObj = array();
        foreach ($arrChildren as $child) {
            $obj = new $child();
            //kalo tidak aktif continue
            if (!$obj->feat_active) {
                continue;
            }
            if (!isset($arrObj[$obj->feat_rank_tampil])) {
                $arrObj[$obj->feat_rank_tampil] = $obj;
            } else {
                $arrObj[] = $obj;
            }
        }
        ksort($arrObj);
        ?>
<div style="margin-left: -50px">
    <div class="nexus">
        <div id="loadingmobile">
            <div style="float: left;">
                <img src="<?php 
        echo _SPPATH;
        ?>
images/androidspinner2.gif">
            </div>
            <div style="float: left; margin-left: 15px;">
                loading..
            </div>
            <div class="clearfix"></div>
        </div>
        <div id="app_desktop" style="display: none;">
            <?php 
        $details = ZAppFeature::loadDetails();
        ?>
            <div id="my_app_icon">
                <div id="my_app_icon_img">
                    <img id="my_app_icon_img_src" src="<?php 
        echo $details['app_icon'];
        ?>
">
                </div>
                <div id="my_app_icon_text"><?php 
        echo $details['app_name'];
        ?>
</div>
            </div>
            <style>
                #my_app_icon{
                    width: 50px;
                    margin-left: 15px;
                    margin-top: 105px;
                    text-align: center;

                }
                #my_app_icon_img{
                    width: 40px;
                    height: 40px;
/*                    background-image: url(*/<?php 
        //=_SPPATH;
        ?>
/*images/noimage2.png);*/
/*                    background-repeat: no-repeat;*/
/*                    background-size: 100% auto;*/
                    border-radius: 2px;
                    margin-left: 5px;
                    overflow: hidden;
                }
                #my_app_icon_img_src{
                    width: 40px;
                    height: 40px;

                }
                #my_app_icon_text{
                    font-size: 11px;
                    margin-top: 5px;
                    color: white;
                }
            </style>
        </div>
        <div class="menubatterei"></div>

        <div id="splash_screen" style=" display: none; z-index: 2000;"></div>
        <div class="isiapp" id="isiapp">

            <?php 
        // print isi apps here
        foreach ($arrObj as $obj) {
            ?>
                <div class="mpage" id="m_<?php 
            echo $obj->feat_id;
            ?>
" style="display: none;">
                    <?php 
            echo $obj->appPage();
            ?>
                </div>
            <?php 
        }
        ?>
            <div class="mpage" id="m_more" style="display: none;">
                <div class="mheader" id="mheader_more">
                    <div class="mheadertext" id="mheadertext_more">More</div>
                </div>
                <div class="mcontent" id="mcontent_more">
                    <?php 
        $jumlahSelected = count($selectedFeature);
        $cnt = 0;
        //manage tab here
        foreach ($selectedFeature as $sel) {
            foreach ($arrObj as $obj) {
                if ($obj->feat_id == $sel) {
                    $cnt++;
                    if ($cnt > 5) {
                        $valuesNya = FeatureSessionLayer::load($obj->feat_id);
                        $labelname = isset($valuesNya[$obj->feat_id . '_labelname']) ? $valuesNya[$obj->feat_id . '_labelname'] : $obj->feat_name;
                        ?>
                                    <div onclick="manageView('<?php 
                        echo $obj->feat_id;
                        ?>
');" id="list_<?php 
                        echo $obj->feat_id;
                        ?>
" class="listview">
                                        <!--                                                      <i class="--><?php 
                        //=$obj->feat_tab_icon;
                        ?>
<!--"></i> -->
                                        <div class="sim_maskColor" style="float:left;-webkit-mask-box-image: url(<?php 
                        echo $obj->icon_path . $obj->feat_tab_icon;
                        ?>
);"></div>
                                        &nbsp; <span id="tabname_<?php 
                        echo $obj->feat_id;
                        ?>
"><?php 
                        echo $labelname;
                        ?>
</span>

                                    </div>

                                <?php 
                    }
                }
            }
        }
        ?>
                </div>

            </div>
        </div>
        <style>
            .listview{
                padding: 5px;
                border-bottom: 1px solid #dedede;
                padding-left: 10px;
                cursor: pointer;
            }
            .mtab{
                float: left;
                width: 54px;
                height: 40x;
                line-height: 40x;
                text-align: center;
                color: white;
                cursor: pointer;
            }
            .mtab-img{
                line-height: 20px;
            }
            .mtab-text{
                line-height: 20px;
                font-size: 10px;
            }
            .mtab-selected{
                background-color: rgba(255,255,255,0.3);

            }
            .mtab-selected-black{
                background-color: rgba(0,0,0,0.3) !important;

            }
        </style>
        <div class="mfooter" id="mfooter">

            <?php 
        $jumlahSelected = count($selectedFeature);
        $cnt = 0;
        //manage tab here
        foreach ($selectedFeature as $sel) {
            foreach ($arrObj as $obj) {
                if ($jumlahSelected > 5) {
                    if ($cnt > 3) {
                        break;
                    }
                }
                if ($obj->feat_id == $sel) {
                    $cnt++;
                    $valuesNya = FeatureSessionLayer::load($obj->feat_id);
                    $labelname = isset($valuesNya[$obj->feat_id . '_labelname']) ? $valuesNya[$obj->feat_id . '_labelname'] : $obj->feat_name;
                    //                                        echo $obj->feat_id." ".$cnt;
                    ?>
                        <div onclick="manageView('<?php 
                    echo $obj->feat_id;
                    ?>
');" class="mtab <?php 
                    if ($cnt == 1) {
                        ?>
mtab-selected<?php 
                    }
                    ?>
" id="tab_<?php 
                    echo $obj->feat_id;
                    ?>
">
                            <div class="mtab-img">
                                <!--                                                <i class="--><?php 
                    //=$obj->feat_tab_icon;
                    ?>
<!--"></i>-->
                                <div class="sim_maskColor" style="-webkit-mask-box-image: url(<?php 
                    echo $obj->icon_path . $obj->feat_tab_icon;
                    ?>
);"></div>
                            </div>



                            <div class="mtab-text" id="tabname_<?php 
                    echo $obj->feat_id;
                    ?>
" ><?php 
                    echo $labelname;
                    ?>
</div>
                        </div>
                        <script>
                            inTabs.push('<?php 
                    echo $obj->feat_id;
                    ?>
');

                        </script>
                    <?php 
                }
            }
        }
        $pembagi = $jumlahSelected;
        if ($jumlahSelected > 5) {
            $pembagi = 5;
        }
        $tabwidth = floor(271 / $pembagi);
        if ($jumlahSelected > 5) {
            ?>
                <div class="mtab" onclick="showMore();"  id="tab_more">
                    <div class="mtab-img">
                        <div class="sim_maskColor" style="-webkit-mask-box-image: url(<?php 
            echo $obj->icon_path;
            ?>
ic_more.png);"></div>

                    </div>
                    <div class="mtab-text">more</div>
                </div>
            <?php 
        }
        ?>
            <style>
                .mtab{
                    width: <?php 
        echo $tabwidth;
        ?>
px;
                }
            </style>

        </div>
    </div>
</div>

        <script>
            function showMore(){
                manageView('more');
            }

            function updateShowMore(arr){

                console.log('updateShowmore');
                console.log(arr);

                var more = '';

                for(var x=0;x<arr.length;x++){
                    var attr = arr[x];

                    more += '<div onclick="manageView(\''+attr+'\');" id="list_'+attr+'" class="listview">';
                    more += '<div class="sim_maskColor" style="float:left;-webkit-mask-box-image: url('+arrFeats[attr].icon_path+arrFeats[attr].feat_tab_icon+');"></div> &nbsp; <span id="tabname_'+attr+'">'+ arrFeats[attr].label_name+'</span>';
//                    more += 'xxs<i class="'+arrFeats[attr].feat_tab_icon+'"></i> &nbsp;  <span id="tabname_'+attr+'">'+ arrFeats[attr].label_name+'</span>';

                    more += '</div>';
                }

                $('#mcontent_more').html(more);
            }
        </script>


        <style>
            .header_besar{
                font-family: "Helvetica Neue Light", "Arial", sans-serif;
                font-size: 19px;
            }
            #your_business_fields label{
                font-family: "Helvetica Neue Light", "Arial", sans-serif;
                padding-top: 10px;
                padding-bottom: 5px;
            }
            .feature_list_heading_information{
                padding-bottom: 10px;
                font-family: "Helvetica Neue Light", "Arial", sans-serif;
                margin-top: -10px;
                font-size: 13px;
            }
            .feat{
                /*float: left;*/
                width: 60px;
                height: 100px;
                cursor: pointer;
                /*margin-right: 13px;*/
                /*margin-left: 13px;*/
            }

            .feat-img{


                background-color: #dedede;
                width: 60px;
                height: 60px;
                border-radius: 60px;
                text-align: center;
                font-size: 30px;
                margin-top: 12px;
                /*padding: 5px;*/
                color: #999;
                /*border: 1px solid #dedede;*/
            }
            .feat-img-icon{
                width: 30px;
                height: 30px;
                margin-left: 15px;
                margin-top: 15px;
                position: absolute;
            }
            .feat-selected .feat-img{
                background-color: #73879C;
                color: white;
            }


            .feat-text{
                font-size: 12px;
                padding-top: 5px;
                font-family: "Helvetica Neue Light", "Arial", sans-serif;
                text-align: center;
                color: #555555;
            }

            .begin{
                /*margin-top: 28px;*/
                /*padding-right: 20px;*/
                /*padding-left: 20px;*/
            }
            .navbar-default{
                background-color: rgba(255,255,255,0.5);
            }
            .nexus{
                width: 422px;
                height: 612px;
                background: url(<?php 
        echo _SPPATH;
        ?>
images/nexus5.png);
                background-size: 422px 612px;
                background-repeat: no-repeat;

                font-family: 'Roboto', sans-serif;
            }
            .menubatterei{
                /*background-color: blue;*/
                width: 271px;
                height: 16px;
                position: relative;
                top: 57px;
                left: 75px;
                overflow: hidden;
                background: url(<?php 
        echo _SPPATH;
        ?>
images/atasbar.png);
                background-size: 271px 16px;
                background-repeat: no-repeat;
                /*display: none;*/
            }

            #mslogantext{
                font-size: 13px;
            }
            .isiapp{
                background-color: white;
                position: relative;
                top: 57px;
                left: 75px;
                width: 271px;
                height: 425px;
                /*overflow-x: auto;*/
                overflow: hidden;
                /*display: none;*/
            }
            #splash_screen{
                top: 57px;
                left: 75px;
                width: 271px;
                height: 466px;
                overflow: hidden;
                position: relative;
            }
            #app_desktop{
                top: 57px;
                left: 75px;
                width: 271px;
                height: 482px;
                overflow: hidden;
                position: relative;
                background-image: url('<?php 
        echo _SPPATH;
        ?>
images/emptyandroid.jpg');
                background-repeat: no-repeat;
                background-size: 100% auto;
                z-index: 1005;
            }
            #mfooter{
                width: 271px;
                height: 41px;
                line-height: 41px;
                background-color: black;
                position: relative;
                top: 57px;
                left: 75px;
                overflow: hidden;
                /*display: none;*/
            }




            #loadingmobile{
                position: absolute;
                width: 150px;
                padding: 15px;
                margin-left:130px;
                margin-top: 240px;
                z-index: 1008;
                background-color: #FFFFFF;
                border: 1px solid #dedede;
            }
            #loadingmobile img{
                /*width: 100%;*/
                height: 30px;
            }
            #loadingmobile div{
                line-height: 30px;
            }


            .hiddenform::-webkit-scrollbar {
                width: 2px;
            }
            .hiddenform::-webkit-scrollbar-button {
                width: 2px;
                height:5px;
            }
            .hiddenform::-webkit-scrollbar-track {
                background:#eee;
                border: thin solid lightgray;
                box-shadow: 0px 0px 3px #dfdfdf inset;
                border-radius:10px;
            }
            .hiddenform::-webkit-scrollbar-thumb {
                background:#999;
                border: thin solid gray;
                border-radius:10px;
            }
            .hiddenform::-webkit-scrollbar-thumb:hover {
                background:#7d7d7d;
            }

            #mcontent_more{
                background-color: #222222;
                color: white;
            }
        </style>

        <style>
            .mcontent{
                width: 271px;
                height: 385px;
                overflow-x: hidden;
                overflow-y: auto;
                background-color: white;
            }
            .mcontent::-webkit-scrollbar {
                width: 2px;
            }
            .mcontent::-webkit-scrollbar-button {
                width: 2px;
                height:5px;
            }
            .mcontent::-webkit-scrollbar-track {
                background:#eee;
                border: thin solid lightgray;
                box-shadow: 0px 0px 3px #dfdfdf inset;
                border-radius:10px;
            }
            .mcontent::-webkit-scrollbar-thumb {
                background:#999;
                border: thin solid gray;
                border-radius:10px;
            }
            .mcontent::-webkit-scrollbar-thumb:hover {
                background:#7d7d7d;
            }


            .mheader {
                width: 100%;
                height: 40px;
                line-height: 40px;
                background-color: #000000;
                color: white;

                overflow: hidden;
            }
            .mheadertext{
                padding-left: 10px;
                font-size: 14px;
                font-family: 'Roboto', sans-serif;
            }

        </style>

        <script>

            var homePage = '<?php 
        echo $homePage;
        ?>
';
            var listOfFeat = [<?php 
        echo explode(",", $selectedFeature);
        ?>
];

            $( document ).ready(function() {
//                console.log(homePage);
                // Handler for .ready() called.
                $(".mpage").hide();
                $('#m_'+homePage).show();

//                listOfFeat.push("mobile");
                updateSelectedAppAndSimulator();
            });


            function closeBlur(){
                $('.list_item_form').hide();
                $('.bgblur').hide();
            }

        </script>
    <?php 
    }
    function appListViewer()
    {
        $valuesNya = FeatureSessionLayer::load($this->feat_id);
        $arrDeals = $valuesNya[$this->arrayID];
        ?>
        <?php 
        foreach ($arrDeals as $num => $deal) {
            ?>
            <div class="<?php 
            echo $this->feat_id;
            ?>
_item" id="<?php 
            echo $this->feat_id;
            ?>
_<?php 
            echo $num;
            ?>
">
                <div class="<?php 
            echo $this->feat_id;
            ?>
_item_pic">
                    <img src="<?php 
            echo $deal[$this->feat_id . '_pic'];
            ?>
">
                </div>
                <div class="<?php 
            echo $this->feat_id;
            ?>
_item_title">
                    <?php 
            echo $deal[$this->feat_id . '_name'];
            ?>
                </div>
                <div class="<?php 
            echo $this->feat_id;
            ?>
_item_description" ><?php 
            echo $this->keepLines($deal[$this->feat_id . '_des'], 2);
            ?>
</div>
            </div>
        <?php 
        }
        ?>

    <?php 
    }
    function appListViewer()
    {
        $valuesNya = FeatureSessionLayer::load($this->feat_id);
        $arrDeals = $valuesNya[$this->arrayID];
        ?>
        <?php 
        foreach ($arrDeals as $num => $deal) {
            ?>
            <div class="<?php 
            echo $this->feat_id;
            ?>
_item" id="<?php 
            echo $this->feat_id;
            ?>
_<?php 
            echo $num;
            ?>
">
                <?php 
            //limit the limit_text_for_more
            //                $des = strip_tags($deal[$this->feat_id.'_des'],"<div>");
            $des = $deal[$this->feat_id . '_des'];
            if (strlen($des) > $this->limit_text_for_more) {
                //                    $des = truncateHtml($des,$this->limit_text_for_more);
            }
            $mystring = $deal[$this->feat_id . '_pic'];
            $findme = $this->feat_noimage;
            $pos = strpos($mystring, $findme);
            if ($pos === false) {
                ?>
                    <div class="<?php 
                echo $this->feat_id;
                ?>
_item_pic">
                        <img src="<?php 
                echo $deal[$this->feat_id . '_pic'];
                ?>
">
                    </div>
                    <?php 
            }
            ?>

                <?php 
            if ($deal[$this->feat_id . '_des'] != '') {
                ?>
                <div class="<?php 
                echo $this->feat_id;
                ?>
_item_description" ><?php 
                echo $des;
                ?>
</div>
                <?php 
            }
            ?>
            </div>
        <?php 
        }
        ?>

    <?php 
    }
    public function formCustom()
    {
        $sel = ZAppFeature::selectedFeature();
        $valuesNya = FeatureSessionLayer::load($this->feat_id);
        //        $info_bname = isset($valuesNya['info_bname'])?$valuesNya['info_bname']:"Business Name";
        $info_slogan = isset($valuesNya['info_slogan']) ? $valuesNya['info_slogan'] : "slogan";
        //        $info_profilepic = isset($valuesNya['info_profilepic'])?$valuesNya['info_profilepic']:_BPATH."images/noimage.jpg";
        $info_banner = isset($valuesNya['info_banner']) ? $valuesNya['info_banner'] : _BPATH . "images/iphone.jpg";
        //        $info_phone = $valuesNya['info_phone'];
        //        $info_email = $valuesNya['info_email'];
        //        $info_website = $valuesNya['info_website'];
        //        $info_address = $valuesNya['info_address'];
        //        $info_additional = $valuesNya['info_additional'];
        ?>
        <h1 class="header_besar" style="padding: 0; margin: 0; text-align: center; margin-top: 10px; margin-bottom: 10px;">Info</h1>
        <p style="color: #666666; font-size: 12px;">Please complete one or more fields below. <em>All fields are optional.</em></p>

        <div class="form-group">
            <label for="info_slogan">What is your slogan? </label>
            <input type="text" class="form-control" id="info_slogan" placeholder="Slogan" value="<?php 
        echo $info_slogan;
        ?>
">
        </div>

        <div class="form-group">

            <?php 
        $bannerModalID = "logoID";
        ?>

<!--            <div class="col-md-3" style="margin-left: -15px;">-->
<!--                <label for="info_profilepic">Profile picture </label>-->
<!--                <div class="previewImg">-->
<!--                    <img style="cursor:pointer;"  data-toggle="modal" data-target="#--><?php 
        //=$bannerModalID;
        ?>
<!--" id="--><?php 
        //=$bannerModalID;
        ?>
<!--_prev" src="--><?php 
        //=$info_profilepic;
        ?>
<!--">-->
<!--                </div>-->
<!--            </div>-->
            <?php 
        global $modalReg;
        $modalReg->regCropper("bannID", "Banner", "info_banner", $info_banner, "542:400", array("mbannerImg", "bannID_prev"));
        //            $modalReg->regCropper("logoID","Profile Picture","info_profilepic",$info_profilepic,"400:400",array("mlogoImg","logoID_prev"));
        ?>

            <?php 
        $bannerModalID = "bannID";
        ?>
<!--            <div class="col-md-6" >-->
                <label for="info_banner" >Main Banner </label>
                <div class="previewImg">
                    <img style="cursor:pointer;" data-toggle="modal" data-target="#<?php 
        echo $bannerModalID;
        ?>
" id="<?php 
        echo $bannerModalID;
        ?>
_prev" src="<?php 
        echo $info_banner;
        ?>
">
                </div>
<!--            </div>-->

            <div class="clearfix"></div>

            <input type="hidden"  id="info_banner" name="info_banner" value="<?php 
        echo $info_banner;
        ?>
" >
            <input type="hidden"  id="info_profilepic" name="info_profilepic" value="<?php 
        echo $info_profilepic;
        ?>
" >

        </div>




        <div class="form-group">

            <?php 
        //load from fields
        foreach ($this->fields as $field_name => $details) {
            //                $field[$field_name] = isset($valuesNya[$field_name])?$valuesNya[$field_name]:$details['default_value'];
            ?>
                <label for="<?php 
            echo $this->feat_id;
            ?>
_<?php 
            echo $field_name;
            ?>
"><?php 
            echo $details['form_question'];
            ?>
 <?php 
            if ($details['optional']) {
                ?>
<span class="optional">Optional</span><?php 
            }
            ?>
</label>
                <?php 
            if ($details['type'] == "text") {
                TextLimiter::inputText("text", $this->feat_id . "_" . $field_name, $this->feat_id . "_" . $field_name, $details['placeholder'], $field[$field_name], $details['limit_max'], $details['limit_min'], "sim_" . $this->feat_id . "_" . $field_name . " .mlist-text");
            } else {
                TextLimiter::inputTextArea("text", $this->feat_id . "_" . $field_name, $this->feat_id . "_" . $field_name, $details['placeholder'], $field[$field_name], $details['limit_max'], $details['limit_min'], "sim_" . $this->feat_id . "_" . $field_name . "_text");
            }
            ?>
                <script>
                    $("#<?php 
            echo $this->feat_id;
            ?>
_<?php 
            echo $field_name;
            ?>
").keyup(function(){

                        var name = "<?php 
            echo "sim_" . $this->feat_id . "_" . $field_name;
            ?>
";
                        var slc = $("#<?php 
            echo $this->feat_id;
            ?>
_<?php 
            echo $field_name;
            ?>
").val();

                        autoUpdateOnKeyup(name,slc);
                    });
                </script>
                <?php 
        }
        ?>
            <label for="info_phone">Your phone number <span class="optional">Optional</span></label>
            <?php 
        TextLimiter::inputText("text", "info_phone", "info_phone", "Page Name", $info_phone, 15, 5, "ninfo_phone .mlist-text");
        ?>
<!--            <input type="text" class="form-control" id="info_phone" placeholder="Phone Number" value="--><?php 
        //=$info_phone;
        ?>
<!--" >-->
        </div>

<!--        <div class="form-group">-->
<!--            <label for="info_email">Your email address <span class="optional">Optional</span></label>-->
<!--            <input type="email" class="form-control" id="info_email" placeholder="Email Address" value="--><?php 
        //=$info_email;
        ?>
<!--"  >-->
<!--        </div>-->
<!---->
<!--        <div class="form-group">-->
<!--            <label for="info_website">Your website URL <span class="optional">Optional</span></label>-->
<!--            <input type="url" class="form-control" id="info_website" placeholder="Website URL" value="--><?php 
        //=$info_website;
        ?>
<!--"  >-->
<!--        </div>-->
<!---->
<!--        <div class="form-group">-->
<!--            <label for="info_address">Your address <span class="optional">Optional</span></label>-->
<!--            <textarea id="info_address" class="form-control" rows="4" maxlength="800" placeholder="Address">--><?php 
        //=$info_address;
        ?>
<!--</textarea>-->
<!---->
<!--        </div>-->
<!---->
<!--        <div class="form-group">-->
<!--            <label for="info_additional">Additional information  <span class="optional">Optional</span></label>-->
<!--            <textarea id="info_additional" class="form-control" rows="10" maxlength="800" placeholder="Example: Opening Hours">--><?php 
        //=$info_additional;
        ?>
<!--</textarea>-->
<!---->
<!--        </div>-->


        <script>
            function info_save_<?php 
        echo $this->feat_id;
        ?>
(){
                //get all data from inputs
//                var info_bname = $('#info_bname').val();
                var info_slogan = $('#info_slogan').val();

//                var info_phone = $('#info_phone').val();
//                var info_email = $('#info_email').val();
//                var info_website = $('#info_website').val();
//                var info_address = $('#info_address').val();
//                var info_additional = $('#info_additional').val();

                var info_banner = $('#info_banner').val();

//                var info_profilepic = $('#info_profilepic').val();

        <?php 
        //load from fields
        foreach ($this->fields as $field_name => $details) {
            $field[$field_name] = isset($valuesNya[$field_name]) ? $valuesNya[$field_name] : $details['default_value'];
            if ($details['type'] == "text") {
                ?>
                var vr_<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
 = $('#<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
').val();
                <?php 
            } else {
                ?>
                var vr_<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
 = $('#<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
').html();
                <?php 
            }
            $imp[] = $field_name . ": vr_" . $this->feat_id . "_" . $field_name;
        }
        ?>

        var label_name = $('#<?php 
        echo $this->feat_id;
        ?>
_labelname').val();

        //harus selalu ada ini..
        var contact_pname = $('#<?php 
        echo $this->feat_id;
        ?>
_pname').val();
//                var label_name = $('#<?php 
        //=$this->feat_id;
        ?>
//_labelname').val();


                //save the data to sessions
                $.post('<?php 
        echo _SPPATH;
        ?>
FeatureSessionLayer/save?id=<?php 
        echo $this->feat_id;
        ?>
',{
                    <?php 
        echo $this->feat_id;
        ?>
_labelname : label_name,
                    <?php 
        echo $this->feat_id;
        ?>
_pname : contact_pname,
//                    info_bname : info_bname,
//                    info_slogan : info_slogan,
//                    info_phone : info_phone,
//                    info_email : info_email,
//                    info_website : info_website,
//                    info_address : info_address,
//                    info_additional : info_additional,
                    info_banner : info_banner
//                    info_profilepic : info_profilepic
                    <?php 
        if (count($imp) > 0) {
            echo ",";
            echo implode(",", $imp);
        }
        ?>
                },function(data){
                    console.log(data);
                    if(data){
                        $(".hiddenform").hide();
                        //update Selected App dan Layout di Simulator
                        updateSelectedAppAndSimulator();

                    }
                });

            }


        </script>

        <script>
//            $("#info_bname").keyup(function(){
//
//                console.log("in1");
//                var slc = $("#info_bname").val();
//                $("#mheadertext_<?php 
        //=$this->feat_id;
        ?>
//").html(slc);
//                console.log("in2");
//            });
//            $("#info_slogan").keyup(function(){
//
//                console.log("in1");
//                var slc = $("#info_slogan").val();
//                $("#mslogantext").html(slc);
//                console.log("in2");
//            });
//
//            $("#info_phone").keyup(function(){
//                var name = "ninfo_phone";
//                var slc = $("#info_phone").val();
//
//                autoUpdateOnKeyup(name,slc);
//
////                if(slc.length == 0){
////                    $("#" + name).remove();
////                }
////                else {
////                    if ($("#" + name).length == 0) {
////                        //it doesn't exist
////                        var texthtml = '<div id="' + name + '" class="mlist-item">' +
////                            '<i class="glyphicon glyphicon-phone-alt"></i> &nbsp; <div class="mlist-text">' + slc + '</div>' +
////                            '<div class="clearfix"></div></div>';
////
////                        $("#mlist").append(texthtml);
////                    } else {
////                        $("#" + name + " div.mlist-text").html(slc);
////                    }
////                }
//            });
//
//            $("#info_email").keyup(function(){
//                var name = "ninfo_email";
//                var slc = $("#info_email").val();
//
//                autoUpdateOnKeyup(name,slc);
//            });
//
//            $("#info_website").keyup(function(){
//                var name = "ninfo_website";
//                var slc = $("#info_website").val();
//
//                autoUpdateOnKeyup(name,slc);
//            });
//
//            $("#info_address").keyup(function(){
//                var name = "ninfo_address";
//                var slc = $("#info_address").val();
//
//                autoUpdateOnKeyup(name,slc);
//            });
//
//            $("#info_additional").keyup(function(){
//                var name = "ninfo_additional";
//                var slc = $("#info_additional").val();
//
//                autoUpdateOnKeyup(name,slc);
//
//            });

            function autoUpdateOnKeyup(name,slc){
                if(slc.length == 0){
                    $("#" + name).hide();
                }
                else {
                    $("#" + name).show();
                    $("#"+name+" .mlist-text").html(slc);
                }
            }

        </script>
        <style>
            .optional{
                font-size: 12px;
                color: #666666;
            }
            .mlist-item .clearfix{
                padding: 0;
                margin: 0;
            }
            .mlist-text{
                white-space: pre-wrap;
            }
            .previewImg{

                height: 80px;
                overflow: hidden;
            }
            .previewImg img{
                height: 100%;

            }
        </style>


    <?php 
    }
    public function appPageCustom()
    {
        $valuesNya = FeatureSessionLayer::load($this->feat_id);
        $sim_loyalty_offer = isset($valuesNya['loyalty_offer']) ? $valuesNya['loyalty_offer'] : "";
        $loyalty_des = isset($valuesNya['loyalty_des']) ? $valuesNya['loyalty_des'] : "";
        $loyalty_nr = isset($valuesNya['loyalty_nr']) ? $valuesNya['loyalty_nr'] : 6;
        $loyalty_pin = isset($valuesNya['loyalty_pin']) ? $valuesNya['loyalty_pin'] : "";
        $ukuranBUlet = 70;
        ?>

        <div class="mdescription" id="sim_loyalty_offer"><?php 
        echo $sim_loyalty_offer;
        ?>
</div>
        <div class="mdescription" id="sim_jumlah_loyalty">
            <?php 
        for ($x = 1; $x <= $loyalty_nr; $x++) {
            ?>
                <div class="loyalty_stamp">
                    <?php 
            echo $x;
            ?>
                </div>
           <?php 
        }
        ?>

        </div>
        <div class="clearfix"></div>
        <div class="mdescription prewrap" id="sim_loyalty_description"><?php 
        echo $loyalty_des;
        ?>
</div>
        <style>
            #sim_loyalty_offer{
                font-size: 13px;
                color: #555555;
            }
            #sim_loyalty_description{
                font-size: 13px;
                color: #333333;
            }
            .mdescription{
                padding: 10px;

            }
            .prewrap{
                white-space: pre-wrap;
            }
            .loyalty_stamp{
                width: <?php 
        echo $ukuranBUlet;
        ?>
px;
                border-radius: <?php 
        echo $ukuranBUlet;
        ?>
px;
                border: 5px solid #dedede;
                height: <?php 
        echo $ukuranBUlet;
        ?>
px;
                line-height: 65px;
                text-align: center;
                float: left;
                margin: 5px;
                color: #dedede;
                font-size: 30px;
            }
        </style>

    <?php 
    }
    public function appPageCustom()
    {
        $valuesNya = FeatureSessionLayer::load($this->feat_id);
        $contact_pslogan = isset($valuesNya[$this->feat_id . '_pslogan']) ? $valuesNya[$this->feat_id . '_pslogan'] : "description";
        ?>

            <div class="mdescription" id="<?php 
        echo $this->feat_id;
        ?>
_des"><?php 
        echo $contact_pslogan;
        ?>
</div>
        <style>
            .mdescription{
                padding: 10px;
                font-weight: normal;
                margin: 10px;
                background-color: #FFFFFF;
            }

        </style>

        <?php 
    }
    public function appPageCustom()
    {
        $valuesNya = FeatureSessionLayer::load($this->feat_id);
        $contact_pslogan = isset($valuesNya[$this->feat_id . '_pslogan']) ? $valuesNya[$this->feat_id . '_pslogan'] : "";
        //lokasi maps
        $arrLatLng = $valuesNya[$this->arrayID];
        if (isset($arrLatLng['lat'])) {
            $lat = $arrLatLng['lat'];
        } else {
            $lat = '';
        }
        if (isset($arrLatLng['lng'])) {
            $lng = $arrLatLng['lng'];
        } else {
            $lng = '';
        }
        ?>
        <div id="map-canvas"></div>
        <div class="mdescription" id="<?php 
        echo $this->feat_id;
        ?>
_des"><?php 
        echo $contact_pslogan;
        ?>
</div>
        <style>
            .mdescription{
                padding: 10px;
            }
        </style>
        <style>
            #map-canvas {
                width: 269px;
                height: 385px;
            }
            #map_canvas {
                background: transparent url(<?php 
        echo _SPPATH;
        ?>
images/leaploader.gif) no-repeat center center;
            }

        </style>

        <script>

            var latawal = '<?php 
        echo $lat;
        ?>
';
            var lngawal = '<?php 
        echo $lng;
        ?>
';



            function addAddress2Map(){
                var geocoder =  new google.maps.Geocoder();
                var address = $("#<?php 
        echo $this->feat_id;
        ?>
_pslogan").val();
                console.log('map');
                console.log(address);
                geocoder.geocode( { 'address': address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        latawal = results[0].geometry.location.lat();
                        lngawal = results[0].geometry.location.lng();
                        kerjakanMap();
//                alert("location : " + results[0].geometry.location.lat() + " " +results[0].geometry.location.lng());
                        saveCurrent(latawal,lngawal);

                    } else {
                        alert("Something got wrong " + status);
                    }
                });
            }






        </script>

        <script>
            function kerjakanMap() {

                if (latawal != '' && lngawal != '') {
//        var rukobintaro = new google.maps.LatLng(-6.2819987, 106.7130693);
                    var center = new google.maps.LatLng(latawal, lngawal);

                    console.log(latawal + ' lng : ' + lngawal);

                    var mapOptions = {
                        zoom: 17,
                        center: center,
                        streetViewControl: false,
                        mapTypeControl: false
                    }

                    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

                    // Place a draggable marker on the map
                    var marker = new google.maps.Marker({
                        position: center,
                        map: map,
                        draggable: true,
                        title: "Drag me to pinpoint your location!"
                    });


                    google.maps.event.addListener(marker, "dragend", function (event) {
                        var lat = event.latLng.lat();
                        var lng = event.latLng.lng();

                        latawal = lat;
                        lngawal = lng;
//            alert('drag end' + lat + ' lng ' + lng);
                        saveCurrent(lat, lng);
                    });
                }
            }
            function saveCurrent(lat,lng){
                $.get("<?php 
        echo _SPPATH;
        ?>
FeatureSessionLayer/saveMap?id=<?php 
        echo $this->feat_id;
        ?>
&lat="+lat+"&lng="+lng,
                    function(data){
                        console.log("map saved");
                        console.log(data);
                    },'json');
            }

            $(document).ready(function() {
                    kerjakanMap();
            });
        </script>
    <?php 
    }
    public function appPageCustom()
    {
        $valuesNya = FeatureSessionLayer::load($this->feat_id);
        $contact_pslogan = isset($valuesNya[$this->feat_id . '_social_id']) ? $valuesNya[$this->feat_id . '_social_id'] : "";
        ?>

        <div class="msos" id="<?php 
        echo $this->feat_id;
        ?>
_social_load"></div>
        <style>
            .msos{

                font-weight: normal;
                margin: 10px;

            }

        </style>

    <?php 
    }