<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="language" content="en" />

	<title><?php echo $app_title; ?></title>
    
	<link rel="icon" type="image/png" href="<?php echo base_url(); ?>assets/images/favicon.png" />
	
    <link rel="stylesheet" type="text/css" href='<?php echo base_url(); ?>assets/css/jquery.autocomplete.css' />
	<link rel="stylesheet" type="text/css" href='<?php echo base_url(); ?>assets/3rdParty/messi/messi.min.css' />
    <link rel="stylesheet" type="text/css" href='<?php echo base_url(); ?>assets/js/jui_dropdown/jquery.jui_dropdown.css' />
  
   	<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/3rdParty/dynaTree/src/skin/ui.dynatree.css" />
	
    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/default.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/3rdParty/jQLayout/complex.css" />
 	<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/3rdParty/jQLayout/jquery-u.css"> 
 
 	<link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url(); ?>assets/3rdParty/jquery.ui.1.8.0/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url(); ?>assets/3rdParty/jQgrid/css/ui.jqgrid.css" />
 
   <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/reset.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/stimenu.css" />
	<link rel="stylesheet" type="text/css" href='<?php echo base_url(); ?>assets/css/fonts.css' />
	<link rel="stylesheet" type="text/css" href='<?php echo base_url(); ?>assets/css/font.css' />
 
    <link rel="stylesheet" type="text/css" href='<?php echo base_url(); ?>assets/css/MetroJs.min.css' />
    
	<!--[if lte IE 7]>

		<style type="text/css"> body { font-size: 90%; } </style>

	<![endif]-->
     	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery-1.7.2.min.js"></script>  
   	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery-ui-latest.js"></script>    
	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.queryloader2.js"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jui_dropdown/jquery.jui_dropdown.js"></script>    
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.blockUI.js"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.autocomplete.js"></script>
 	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.layout-latest.js"></script>
 	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.validate.js"></script>
	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.numberMask.js"></script>
 	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.animate.js"></script>
	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.anchorScroll.js"></script>
	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.numeric.pack.js"></script>
	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.form.min.js"></script>
	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery-ui-timepicker-addon.js"></script>
  <!--[if IE]>
  <![endif]--> 
	
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/3rdParty/jQgrid/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/3rdParty/jQgrid/js/jquery.jqGrid.min.js"></script>
	<script type="text/javascript" src="<?php echo base_url(); ?>assets/3rdParty/jQLayout/complex.js"></script>
	<script type="text/javascript" src="<?php echo base_url(); ?>assets/3rdParty/jQLayout/jquery.layout.resizeTabLayout.min-1.1.js"></script>
	<script type="text/javascript" src="<?php echo base_url(); ?>assets/3rdParty/jQLayout/jquery.layout.resizePaneAccordions.min-1.0.js"></script>
	<script type="text/javascript" src="<?php echo base_url(); ?>assets/3rdParty/dynaTree/jquery/jquery.cookie.js"></script>
	<script type="text/javascript" src="<?php echo base_url(); ?>assets/3rdParty/dynaTree/src/jquery.dynatree.js"></script>	
	<script type="text/javascript" src="<?php echo base_url(); ?>assets/3rdParty/messi/messi.min.js"></script>
   	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.dropdown.js"></script>
   	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jszip.js"></script>
   	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/xlsx.js"></script>
	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.printElement.js"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.contextmenu.js"></script>	
   
  	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/MetroJs.min.js"></script>     
    
	<script src="<?php echo base_url()?>assets/js/ajaxfileupload.js"></script>
    <!--[if IE]>
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery-ui-latest.js"></script>   
      <script src="<?php echo base_url(); ?>assets/js/html5.js"></script>
    <![endif]-->
    
	<link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>res/uploadify.css" />
    <script type="text/javascript" src="<?php echo site_url() ?>res/jquery.uploadify-3.1.min.js"></script>
    <!--<!-- <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ajaxFileUpload.js"></script>-->	
   
	
<style>
        html, body {
    		font-size: 75%;
			height:100%;
			width:100%;
    	} 
		 
		div#dialog-form label, div#dialog-form input { display:block; }
		div#dialog-form input.text { margin-bottom:12px; width:95%; padding: .4em; }
		div#dialog-form fieldset { padding:0; border:0; margin-top:25px; }
		div#dialog-form h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain { width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
		
	.ui-jqgrid .ui-jqgrid-htable th div {
		height:auto !important;
		overflow:hidden;
		padding-right:4px;
		padding-top:2px;
		position:relative;
		vertical-align:text-top;
		white-space:normal !important;
	}
	.ui-jqgrid tr.jqgrow td {
	 white-space: normal !important;
	 height:auto;
	 vertical-align:text-top;
	 padding-top:2px;
	}
	
	.ui-jqgrid .ui-jqgrid-pager .navtable .ui-pg-div,
	.ui-jqgrid .ui-jqgrid-toppager .navtable .ui-pg-div {
		padding-right: 3px;
		padding-left: 3px;
	}
	.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div>span { margin: 0 5px; font-size: 20px; }
	
    .ui-accordion-header {
        font-size:1.3em;
    }
    
    ul.hover_block { display: block; overflow: hidden; height: 150px; padding-bottom: 15px; }
			
	ul.hover_block li {
		list-style:none;
		float:left;
		margin: 15px;
		height:90px;
		width:90px; 
		position: relative;
        text-align: center;
        vertical-align: middle;
        font-weight: bold;
        font: 1.3em/1.3 Helvetica, Arial, sans-serif;
        cursor:pointer;
		zIndex: 10000;
    }


	ul.hover_block li img {
		position: absolute;
		top: 0;
		left: 0;
		border: 0;
	}
	
	ul.hover_blockr { 
		display: block; 
		overflow: hidden;
		padding-bottom: 5px;
		text-align: center;
		vertical-align:middle;
		
	}
			
	ul.hover_blockr li {
		list-style:none;
		float:left;
		margin: 15px;
 		height:90px;
		width:80px; 
	 	position: relative;
		padding: 1px 1px 1px 1px;
	    cursor:pointer;
    }


	ul.hover_blockr li img {
		position: absolute;
		top: 0;
		left: 0;
		border: 0;
	}
	 
	.ui-tabs .ui-tabs-panel {
		overflow: auto;
	} 
	
    .border-grey {
        border:1px solid #CCC;
    }
	
		
    img.grey {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        width:265px;
        height:265px;
        padding:25px;
        margin-left:33%;
        cursor:pointer;
    }
     
    img.color {
        position: absolute;
        left: 0; top: 0;
        width:265px;
        height:265px;
        padding:25px;
        margin-left:33%;
        cursor:pointer;
    }
    
    .height-up {
        height:170px;
 	   text-align: center;
		vertical-align:middle;
   }
    
    .height-down {
        height:0px;
 	    text-align: center;
		vertical-align:middle;
   }
	 
	
	.panelgrid{ 
	border: 1px solid #a6c9e2; 
	background: #fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x; color: #222222; 
	padding:3px; 
	margin-top:2px; 
	margin-left:2px; 
	margin-right:2px;  
	}
	
	label {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
	}
	
	input[type=checkbox], input[type=radio] {
		vertical-align: middle;
		position: relative;
		bottom: 1px;
	}
	input[type=radio] {
		bottom: 2px;
	}
	.myAltRowClass { background: #DDDDDC; }
	 
	input[autocomplete="off"] {
		background:#FFFF00 ;border:1px #A9A9A9  solid; 
	} 
	
	
 	</style>
	<style type="text/css"> 

	.tablefixed {
	  table-layout: fixed;
	  border-collapse: collapse;
	  width: 100%;
	  height: 100%;
	  white-space: nowrap;
	  min-height: 100px;
	}
 	.tr420 { 
	  height: 420px;
	  padding-top: 5px;   
	}
 	.tr220 { 
	  height: 220px;
	  padding-top: 5px;   
	}
 	.tr150 { 
	  height: 150px;
	  padding-top: 5px;   
	}
 	.tr140 { 
	  height: 140px;
	  padding-top: 5px;   
	}
	.tr130 { 
	  height: 130px;
	  padding-top: 5px;   
	}
	.tr120 { 
	  height: 120px;
	  padding-top: 5px;   
	}
	.tr100 { 
	  height: 100px;
	  padding-top: 5px;   
	}
 	.tr90 { 
	  height: 90px;
	  padding-top: 5px;   
	}
 	.tr80 { 
	  height: 80px;
	  padding-top: 5px;   
	}
	.tr70 { 
	  height: 70px;
	  padding-top: 5px;   
	}
	.tr60 { 
	  height: 60px;
	  padding-top: 5px;   
	}
	.tr50 { 
	  height: 50px;
	  padding-top: 5px;   
	}
	.tr40 { 
	  height: 40px;
	  padding-top: 5px;   
	}
	.tr30 { 
	  height: 30px;
	  padding-top: 5px;   
	}
	
 	.trauto {
		height: auto; 
		min-height: 100px;
		overflow: hidden;
	} 
	
 	.container_table {
	    height: auto; 
		min-height: 100px;
		overflow: hidden;
		margin:0px; 
		padding:0px;
		border: 0px solid #cd0a0a; 
		color:red;
		background-color:red;
	    position: relative;
	} 
 
	
	.lbfield125 {
		padding-left:5px;
		width:125px;
 		display:inline-block
	}
	.lbfield115 {
		padding-left:5px;
		width:115px;
 		display:inline-block
	}
	.lbfield105 {
		padding-left:5px;
		width:105px;
 		display:inline-block
	}
	.lbfield95 {
		padding-left:5px;
		width:95px;
 		display:inline-block
	}
	.lbfield85 {
		padding-left:5px;
		width:85px;
 		display:inline-block
	}
	.lbfield75 {
		padding-left:5px;
		width:75px;
 		display:inline-block
	}
	.lbfield65 {
		padding-left:5px;
		width:65px;
 		display:inline-block
	}
	.lbfield55 {
		padding-left:5px;
		width:55px;
 		display:inline-block
	}
	.lbfieldauto {
		padding-left:5px;
		width:auto;
 		display:inline-block
	} 
	.lbcolon {
		padding-left:5px;
		width:10px;
	 		display:inline-block
	}

  	.td420 { 
	  width: 420px;
	  padding-left: 5px;  
	  height:auto !important;  
	}
 
  	.td400 { 
	  width: 400px;
	  padding-left: 5px;  
	  height:auto !important;	  
	}
 
  	.td350 { 
	  width: 350px;
	  padding-left: 5px;  
	  height:auto !important;  
	}
	
	.td320 { 
	  width: 320px;
	  padding-left: 5px;  
	  height:auto !important; 
	}
	.td280 { 
	  width: 280px;
	  padding-left: 5px;  
	  height:auto !important;  
	}

	.td210 { 
	  width: 210px;
	  padding-left: 5px;
	  height:auto !important; 
	}

	.td160 { 
	  width: 160px;
	  padding-left: 5px;
	  height:auto !important;  
	}

	.td130 { 
	  width: 120px;
	  padding-left: 5px;
	  height:auto !important;	  
	}
	.td120 { 
	  width: 120px;
	  padding-left: 5px;
	  height:auto !important;  
	}
	.td100 { 
	  width: 100px;
	  padding-left: 5px;
	  height:auto !important;  
	}


	.td77 { 
	  width: 210px;
	  padding-left: 5px;
	  height:auto !important;  
	}

	.td10 { 
	  width: 210px;
	  padding-left: 5px;
	  height:auto !important;
	}

	.tdauto {
	  width: auto !important;
	  height:auto !important;
	}

	

	.ui-tabs .ui-tabs-panel{ 
		padding:7px 7px 7px 7px; 
	} 
	
	.ui-input-text:disabled{ 
	color: red; 
	font-size: 50px !important; 
	}
	
	.ui-autocomplete {
    background: #4a4a4a;
    border-radius: 0px;
	}
	.ui-autocomplete.source:hover {
		background: #454545;
	}
	
	.td_bt {
		display:table-cell; white-space: nowrap;width:1px;padding-right:5px;vertical-align:middle;
	}
	.top_center {
		vertical-align:top;
		text-align: center;
	}
   .table-cell {
    display:table-cell;
    vertical-align: middle;
    width:100%;
    height:100%;
}
tr, td { height: 100%; }
    </style> 
	
	</style>
	<script type="text/javascript">
// Here we set the altRows option globally
//jQuery.extend(jQuery.jgrid.defaults, { altRows:true });
jQuery.extend(jQuery.jgrid.defaults, 
	{
    cmTemplate: {
        searchoptions: {
            clearSearch: false
        }
    }
	// ,
	// loadComplete: function() {
					// $("tr.jqgrow:odd").css("background", "#DDDDDC"); 
	 	 	// } 
	 	
	}
	
);
$.extend(
    $.jgrid.search,
    {
        multipleSearch: true,
        multipleGroup: true,
        recreateFilter: true,
        overlay: 0
    }
);

$.extend($.fn.jqGrid, { setData: function(data) {
this[0].p.data = data;
return true;
} } );

</script>
<script type="text/javascript">  

	var numberTemplate2 = {align: 'right', sorttype: 'number', editable: false,
        searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni']},
        formatter: function (v) {
            return Globalize.format(Number(v), "n2");
        },
        unformat: function (v) {
            return Globalize.parseFloat(v);
        }},
		numberTemplate4 = {align: 'right', sorttype: 'number', editable: false,
        searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni']},
        formatter: function (v) {
            return Globalize.format(Number(v), "n4");
        },
        unformat: function (v) {
            return Globalize.parseFloat(v);
        }},
		currencyTemplate2 = {align: 'right', sorttype: 'number', editable: false,
        searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni']},
        formatter: function (v) {
            return Globalize.format(Number(v), "c2");
        },
        unformat: function (v) {
            return Globalize.parseFloat(v);
        }},
		currencyTemplate4 = {align: 'right', sorttype: 'number', editable: false,
        searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni']},
        formatter: function (v) {
            return Globalize.format(Number(v), "c4");
        },
        unformat: function (v) {
            return Globalize.parseFloat(v);
        }};


	var pageLayout;
    var loadingIndicator1 = '<div align="center"><img src="<?php echo base_url(); ?>assets/images/loading/loading11.gif" /><br />loading content ... </div>';
	//var loadingIndicator1 = '<div align="center"><img src="<?php echo base_url(); ?>assets/images/loading/loading11.gif" /><br />loading content ... </div>';
    var baseUrl = "<?php echo base_url(); ?>"; 
    var defaultPaddingBottom = 99;
    var global_last_bapb='';
 	var center_height ;
	
    if (window.console && (window.console.firebug || window.console.exception)) {
      /*alert("firebug detected");
      window.location = baseUrl;*/
    }
     function warningBlock(msg,timing){
        $.blockUI({ message: msg, css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#FF0000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            '-khtml-border-radius': '10px', 
            'border-radius': '10px', 
            'font-size': '1.5em',
            opacity: .6, 
            color: '#FFF' 
        } }); 
        $('.blockOverlay').attr('title','Click to unblock').click($.unblockUI);
        setTimeout($.unblockUI, timing);
    }
	
	
    function checkResolution2(reload){
		  $global_tab_height=$('.ui-layout-center').height()- ($("#tab_buttons").height()+102);
	      if($(window).width() < 975 && $(window).height() < 600){ 
             if(reload != 1){
                 setTimeout(function(){ 
		 			$global_tab_height=$('.ui-layout-center').height()- ($("#tab_buttons").height()+102); 
		 		}, 10);
            } else {
                 setTimeout(function(){ 
      				$global_tab_height=$('.ui-layout-center').height()- ($("#tab_buttons").height()+102); 
	             }, 10);
            }
		  
            return false;
        } else {
            if(reload != 1){
                 setTimeout(function(){
       				$global_tab_height=$('.ui-layout-center').height()- ($("#tab_buttons").height()+102);  
              },10); 
            }
            
            
            return false;
        }
    }
	
	    function checkResolution(reload){
		  $global_tab_height=$('.ui-layout-center').height()- ($("#tab_header").height()+102);
	      if($(window).width() < 975 && $(window).height() < 600){
			
            // new Messi("<br /> Monitor resolution doesn't meet application requirement <strong>(please use monitor with minimum 1024x768px resolution or more)</strong>.<br /><br /> Application will stop for now!.<br /><br />", {title: 'ERROR!',titleClass: 'anim error', modal: true });
            // $('.messi-closebtn').remove();
            if(reload != 1){
               //  $('.ui-layout-west,.ui-layout-south,.ui-layout-east,.ui-layout-north,.ui-layout-center,.toggler').hide();
                setTimeout(function(){ 
					//$('.resizer').hide() 
					$global_tab_height=$('.ui-layout-center').height()- ($("#tab_header").height()+102);
				 
					//console.log( $global_tab_height);
	
				}, 20);
            } else {
                 setTimeout(function(){ 
               //     $('.ui-layout-west,.ui-layout-south,.ui-layout-east,.ui-layout-north,.ui-layout-center,.toggler').hide();
                   // $('.resizer').hide() 
					$global_tab_height=$('.ui-layout-center').height()- ($("#tab_header").height()+102); 
	             }, 20);
            }
		 
            return false;
        } else {
            if(reload != 1){
                $(".messi,.messi-modal").remove();
               // $('.ui-layout-west,.ui-layout-south,.ui-layout-east,.ui-layout-north,.ui-layout-center,.resizer,.toggler').show();
                
                setTimeout(function(){
                 //   pageLayout.toggle("south");
					$global_tab_height=$('.ui-layout-center').height()- ($("#tab_header").height()+102);  
              },20);
            
                /*setTimeout(function(){
                    $(".toggler-south,.toggler-north").trigger("click");
                    pageLayout.toggle("north");
                    pageLayout.toggle("south");
                },1000);
                */
                
            }
            
            
            return false;
        }
    }
	
    var focusFlag = 1; 
	var center_height=100;
	
	function resizeALLCenter(){ 
					  center_height = $('.ui-layout-center').height() - (($('#tab_buttons').height()-28.8) + defaultPaddingBottom);
					  $(".tab-panel").css('height',''+center_height+'px'); 
				         setTimeout(function(){
							$(window).trigger('resize');  
						},100); 
      
	}
		
	
	function setGridHight(grid,container,bar,staticpengurangan){
		grid.setGridHeight(50);  	
		
	 	var height = container.height(); 
	 		var title_height=0;
		var hdr_height=0;
		var ttl="#gview_" + grid.attr('id') + " .ui-jqgrid-titlebar";
		var ttlbox="#gview_" + grid.attr('id') + " .ui-jqgrid-hdiv";
		if (staticpengurangan==null)
		{
		staticpengurangan=0;
		}
	 	if (grid){ 
			title_height=$(ttl).height();
 			hdr_height=$(ttlbox).height();
 			if (title_height>0){
			 title_height=title_height+8;
 			}
		} 
		if (height == null || height < 1){
			// For IE, revert to offsetWidth if necessary
			height = container.attr('offsetHeight');
		}
		
		if (bar){ 
			grid.setGridHeight(height-( title_height+ hdr_height +  bar.height() +40 + staticpengurangan)) ;
		}else{
			grid.setGridHeight(height-(title_height + hdr_height +30 + staticpengurangan))   ;
		} 
 	}
	 
	

    	var $Tabs;    
    	var newTabCounter = 1; 
        var tab_cookie = "";        
    	
        function add_tab (id,key,url) {  
            /*alert("'"+id +"','"+key+"','"+url+"'");*/ 
            var tab_exist = $.cookie("cookie_tab").split(",");           
            
            if(tab_exist.length >= 7){
                if($(".id_"+key).html() == null){
                    alert("You can only open maximum 7 tabs");
                } else {
                    $Tabs.tabs( "select" , $('.id_'+key).attr('id'));
                }
                return false;
            } else {
                
                if($(".id_"+key).html() == null){    
                    /*$.cookie("divs", "");*/
                    $Tabs.tabs( "add", url, id );
                    $("#"+$.cookie("divs")).addClass("id_"+key);
                    /*$Tabs.tabs( "add", "initLink.php", id );*/
                    return true;
                } else {                     
                     $Tabs.tabs( "select" , $('.id_'+key).attr('id'));
                    return false;
                }
             
              
            } 
    	};
    
   
    	function remove_tab (evt) {    
   
			var	idx = $(this).closest("li").index();
            
            var tabList = $.cookie("cookie_tab").split(",");
            var removeId = $(this).closest("a").attr('href').substring(1);
            
            tabList = jQuery.grep(tabList, function(value) {
              return value != removeId;
            });                

            $.cookie("cookie_tab",tabList.join(","));
            
   			$Tabs.tabs("remove", idx);
    
    	}
    
        function activate(node) {	      	    
			if( node.data.url ){	
			  var link = (node.data.url == "#")?"dummy.php?link="+node.data.title :node.data.url;
								  
			  if(add_tab(node.data.title,node.data.key,link)){
				var link = (node.data.url == "#")?"dummy.php?link="+node.data.title :node.data.url;
				
				 /*setTimeout(function(){
					 $.ajax({
					   type: "GET",
					   url: baseUrl + link,
					   success: function(msg){

							if(node.data.isGrid || node.data.isGrid ==  true){
								
								$("#"+$.cookie("divs")).html(msg);
								$("#"+$.cookie("divs")).addClass("id_"+node.data.key);

							} else {
								$("#"+$.cookie("divs")).addClass("id_"+node.data.key);
								$("#"+$.cookie("divs")).html(msg);
							}								
						 
					   }
					});   
					
				},1000);*/
                
				
			  } else {
			  }                        

			}
				
			$("#echoActive").text(node.data.title);

		}
    
        function createTreeMenu(url,divID){
            $.ajax({
			   type: "GET",
			   url: baseUrl + "ctMain/checkSession",
			   success: function(msg){
                    if(msg == 1){
                        $("#"+ divID).dynatree({
                            debugLevel:0,
                	        imagePath: baseUrl+'assets/images/icons/16x16/',
                            persist: true,
                			onClick: function(node){
                				activate(node);
                                
                			},
                          	initAjax: {        	       
                				url: url
                    	    },
                			onDeactivate: function(node) {
                				$("#echoActive").text("-");
                			}
                	    });
                    } else {
                        alert(1);
                        window.location.reload();
                        
                    }
                    
			   }
			});  
            
            
        }

	function createTreeMenu2(url,divID,menutype,menutypeid,menu_name){
		var index_acc= $('#accordion-menu h3#' + divID + 'Link').index('h3');
		$.ajax({
		type: "POST",
		data: {menu_type:menutypeid,menu_name:menu_name},
		url: baseUrl + "ctMain/FrontPageChildMenu",
		success: function(data){ 
				$("#second-div").append(data);
				$("#second-div").show();
				var destination = $("#second-div").offset().top - 110;
				$("#tp_home").animate({ scrollTop: destination},10,"easeInQuad"); 
				
					if ($("#accordion-menu").accordion( "option","active")!=index_acc){
						createTreeMenu(url,menutype,menutypeid); 
						$("#accordion-menu").accordion( "activate" , index_acc)  ;  
					}
				
				
			
		}
		}); 
		
	 return false;
	}
	var layoutSettings = {

		name: "pageLayout"

	,defaults: {
			size:					"auto"
		,	minSize:				50
		,	paneClass:				"pane" 		
		,	resizerClass:			"resizer"	
		,	togglerClass:			"toggler"	
		,	buttonClass:			"button"	
		,	contentSelector:		".content"	
		,	contentIgnoreSelector:	"span"		
		,	togglerLength_open:		35			
		,	togglerLength_closed:	35			
		,	hideTogglerOnSlide:		true		
		,	togglerTip_open:		"Close This Pane"
		,	togglerTip_closed:		"Open This Pane"
		,	resizerTip:				"Resize This Pane"
        ,	fxName:					"slide"		
		,	fxSpeed_open:			750
		,	fxSpeed_close:			1500
		,	fxSettings_open:		{ easing: "easeInQuint" }
		,	fxSettings_close:		{ easing: "easeOutQuint" }
	}

	,north: {

			spacing_open:			1			
		,	togglerLength_open:		0			
		,	togglerLength_closed:	-1			
		,	resizable: 				false
		,	slidable:				false
		,	fxName:					"none"
        

	}

	,south: {

			height:				    250
        ,	togglerLength_open:		0
		,   spacing_open:			1	
        ,	togglerLength_closed:	-1  		
		,	slidable:				false		
		,	initClosed:				false
        ,	resizable: 				false
        ,	fxName:					"none"
                
        	                              
    }

	,west: {

			size:					240
		,	spacing_closed:			21			
		,	togglerLength_closed:	21			
		,	togglerAlign_closed:	"top"		
		,	togglerLength_open:		0			
		,	togglerTip_open:		"Close West Pane"
		,	togglerTip_closed:		"Open West Pane"
		,	resizerTip_open:		"Resize West Pane"
		,	slideTrigger_open:		"mouseover" 	
		,	initClosed:				false
		,	fxSettings_open:		{ easing: "easeOutBounce" }
	}

	,east: { 

			size:					0
        ,	spacing_closed:			0			
		,	togglerLength_closed:	0			
		,	togglerLength_open:		0 			
		,	initClosed:				true

	}

	,center: {
            minWidth:				600
		,	minHeight:				400
           ,	onresize_end:			function () {                                        
									setTimeout(function(){
									 resizeALLCenter();
									 },100);
                                                        
                                    }
		}

		
		
			
		
	};
	 	
		
	
	$(document).ready( function() {	
    
    
      
	    checkResolution(1);
		
        $(window).bind('resize', function () { 
			checkResolution(0);  
		});
        $(window).bind('resize', function () { checkResolution(0); });
		
		
		
		if(document.getElementById) {
			window.alert = function(txt, callback) {
			createCustomAlert(txt, callback);
			} 
			// window.confirm
			
		} 

		function createCustomAlert(txt, callback) {   
	 	 	new Messi('<div id="message_data"  \
			style="height:260px;overflow-y:auto;overflow-x:auto"> \
			<br />'+ arguments[0].replace(/\n/, "<br />").replace(String.fromCharCode(10), "<br />").replace(String.fromCharCode(/\t/), "&#09").replace(String.fromCharCode(9), "&#09")+"</div>"
			, {title: 'ALERT!',titleClass: 'anim info', modal: true, width: '900px', height: '250px', buttons: [{id: 0, label: 'Ok', val: 'Y'}], callback: function(val) {
				if (callback)
				callback(); 
				return false; 
                }});
            $(".btnbox .btn").focus(); 
			 
		} 
	 
        // window.alert = function() {
            // new Messi('<br />'+arguments[0].replace(/\n/, "<br />")+"", {title: 'ALERT!',titleClass: 'anim info', modal: true, width: '700px', buttons: [{id: 0, label: 'Ok', val: 'Y'}], callback: function(val) {
                // }});
            // $(".btnbox .btn").focus();
        // };
        $(".tagLine-1").append("<?php echo $company_name; ?>");
        
	    /*setInterval(function () {
            $("img.grey").trigger("mouseover");
        }, 2000);
        
        setInterval(function () {
            $("img.grey").trigger("mouseout");
        }, 3500);
        */
	    $("img.grey").mouseover(
        function() {
            $(this).stop().animate({"opacity": "0"}, "slow");
        });
        
        $("img.grey").mouseout(
        function() {
            $(this).stop().animate({"opacity": "1"}, "slow");
        });    
          
        $(".revert").click(function(){
            var destination = $("#first-div").offset().top;
            $("#tp_home").animate({ scrollTop: destination},10,"easeInQuad"); 
            
        });
        /*$.ajaxSetup({
            timeout: "15000",
            error : function(xhr, textStatus, errorThrown ) {
                if (xhr.status == 500) {
                    alert('Oops! There seems to be a server problem, please try again later.');
                } else {
                    alert('Oops! There was a problem, sorry.');
                }
            }        
         });
        */
        $(document).ajaxError(function (e, xhr, settings, exception) {
            if(xhr.responseText == 'noaccess'){
                new Messi('<br /> You cannot access that Function!', {title: 'WARNING! Unauthorize Access',titleClass: 'anim warning', modal: true, buttons: [{id: 0, label: 'Ok', val: 'Y'}], callback: function(val) {    
                    $(".ui-state-active").find('.ui-icon-close').trigger('click'); 
                    
                } });
                $(".btnbox .btn").focus();
            } else if(xhr.responseText == 'expire'){
                
                new Messi('<br /> Please (re)Login to continue!', {title: 'SESSION EXPIRE',titleClass: 'anim info', modal: true, buttons: [{id: 0, label: 'Ok', val: 'Y'}], callback: function(val) {
                                     
                    /*window.location = baseUrl;*/
                    window.location.reload();

                }});
                $(".btnbox .btn").focus();
                
            } else if(xhr.responseText == 'readonly'){
                
                new Messi('<br /> Unauthorize!', {title: 'Warning',titleClass: 'anim warning', modal: true, buttons: [{id: 0, label: 'Ok', val: 'Y'}], callback: function(val) {    
                    /*$(".ui-state-active").find('.ui-icon-close').trigger('click'); */
                    
                } });
                $(".btnbox .btn").focus();
            }/* else if (xhr.status == 500) {
                alert('Oops! There seems to be a server problem, please try again later.');
            } else {
                alert('Oops! There was a problem, sorry.');
            } 
            else {
                new Messi('<br /> There is something wrong with the response!', {title: 'Response Error',titleClass: 'anim info', modal: true, buttons: [{id: 0, label: 'Ok', val: 'Y'}], callback: function(val) {
                    $.unblockUI
                }});
            }*/
             
        });
       //$(document).ajaxStart(function(){ $('body').block({ message: loadingIndicator1 }) }).ajaxStop($.unblockUI);
		$(document).ajaxStart(
		function(){ $('body').block({ message: loadingIndicator1 }) }
	   ).ajaxStop($.unblockUI);
	    
			
			
      /*  $(window).bind('beforeunload', function(){
   		  return "Please save your work before you close/reload this page";
   	   }); */
       
        $("body").queryLoader2({
            barColor: "#FFF",
            backgroundColor: "#000",
            percentage: true,
            barHeight: 25,
            completeAnimation: "grow",
            onComplete: function() {
                $(".ui-layout-north,ui-layout-center,ui-layout-south").show();
            }
        });      
        
        $('ul.hover_block li').hover(function(){
			$(this).find('img').animate({top:'150px'},{queue:true,duration:500});
            $(this).addClass('border-grey');
		}, function(){
			$(this).find('img').animate({top:'0px'},{queue:true,duration:500});
            $(this).removeClass('border-grey');
		});
		
            
        $.cookie("cookie_tab", "");                  
         
        <?php echo $accordion_menu_js_click; ?>
		
        
		pageLayout = $("body").layout( layoutSettings );
		$('#accordion-menu').accordion({ 
		collapsible: true, 
		fillSpace: true ,
		}) ; 
		  

		$("a").each(function () {

			var path = document.location.href;
			if (path.substr(path.length-1)=="#") path = path.substr(0,path.length-1);
			if (this.href.substr(this.href.length-1) == "#") this.href = path +"#";

		});
        
        
          center_height = $('.ui-layout-center').height() - defaultPaddingBottom;
        
        $Tabs = $("#tabs").tabs({
			tabTemplate:	'<LI><A href="#{href}">#{label}  <SPAN class="ui-icon ui-icon-close"></SPAN></A></LI>'
		,	panelTemplate:	'<div class="tab-panel ui-tabs-hide"></div>'
		,	idPrefix:		"tp_" 
		,	cache:			true
	//	,   heightStyle: "fill"
		,	add: function (evt, ui ) { 				
                $(".tab-panel").css('height',''+center_height+'px');
				$Tabs.tabs("disable"); 
                $.cookie("divs", ui.panel.id);                
                var tab_cookie = (($.cookie("cookie_tab") == "")? "": $.cookie("cookie_tab")+",") +   ui.panel.id;   
                $.cookie("cookie_tab", tab_cookie);				
                $( ui.panel ).appendTo( "#tab_panels" );
				$( ui.tab ).find(".ui-icon-close").click( remove_tab ).attr("title","Close This Tab");           
				$Tabs.tabs( "select", ui.index );         
				resizeALLCenter(); 
			}
		,	remove: function (evt, ui ) { 
				resizeALLCenter();  
			}
		,	show_ALTERNATE: function (evt, ui) {
			}
		,	load: function (evt, ui ) { 		
				$Tabs.tabs("enable");
			}
		,	create: function (evt, ui ) { 		

            }
		});      
		
		$('#tabs').bind('tabsselect', function(event, ui) {
		 	resizeALLCenter();  
		});

        $("#but-close-all-tabs").click(function(){
            
            if($Tabs.tabs('length') > 1){
                var confirm_close = confirm('Are you Sure Want To Close All Open Tabs?');
                if(confirm_close){
                    for (var i = $Tabs.tabs('length'); i > 0; i--) { 
                        $Tabs.tabs('remove', i);                 
                    }
                    $.cookie("cookie_tab", "");        
                }  
            }           
            
            return false;
            
        });
        
        $("#user-cp").click(function(){
            $('#dlgchangepassword').dialog("destroy"); 
            $(".dlgchangepasswordcl").remove(); 
			$("body").append('<div id="dlgchangepassword" title="Change Password" class="dlgchangepasswordcl"><div><label style="width:100px;float:left;">Old Password </label><input type="password" id="chg_oldpass" class="chg_oldpasscl" size="45" /></div><div><label style="width:100px;float:left;">New Password</label><input type="password" id="chg_newpass" class="chg_newpasscl" size="15" /></div><div><label style="width:100px;float:left;">Confirm Password </label><input type="password" id="chg_confpass" class="chg_confpasscl" size="45" /></div></div>');               
            $("#dlgchangepassword").dialog({
                modal:true,
                width : 400,
                height : 150,
                buttons: {
                     "Close": function() {  $(".ui-dialog-titlebar-close").trigger('click');  },
                     "Submit": function() {
                         if($(".chg_newpasscl").val() != $(".chg_confpasscl").val()){
                            alert("New Password not equal with Confirm Password");
                         } else {
                            if(($(".chg_oldpasscl").val() != "") && ($(".chg_newpasscl").val() != "") && ($(".chg_confpasscl").val() != "")){
                            
                                $.ajax({	
                    				url : "<?php echo base_url()?>ctMain/changePassword",
                    				type : 'POST',
                    				data : "op="+$(".chg_oldpasscl").val()+"&np="+$(".chg_newpasscl").val()+"&cp="+$(".chg_confpasscl").val(),
                    				dataType: 'json',
                    				success: function(msg){
                                        if (msg.sts == '00'){
                    						alert(msg.desc);
                    						$('#dlgchangepassword').dialog("destroy"); 
    				                        $(".dlgchangepasswordcl").remove();
                    					} else { 
                    					   alert(msg.sts+msg.desc);  
                    				    } 
                                    }
                    			}); 
                                
                             } else {
                                alert("Please Fill in All Fields");
                             }
                         }
                         
                          
                    }
                },
				close : function(){
					$('#dlgchangepassword').dialog("destroy"); 
				    $(".dlgchangepasswordcl").remove(); 
				         
				},
				open: function(){
					
				}
            });
            
            return false;
            
        });
        
        
        $("#tab_header").removeClass('ui-corner-all');
        $(".tab-panel").css('height',''+center_height+'px'); 
         
        $("#accordion-menu").accordion( "activate" , 6 );
        
         $(".live-tile, .flip-list").not(".exclude").liveTile();
	    resizeALLCenter(); 
 	});



</script>
</head>
<body>
<div class="ui-layout-west ui-widget ui-widget-content ui-corner-all" style="padding: 5px; margin-bottom: 1ex; visibility: hidden;">
   
        <div class="ui-widget ui-widget-header ui-corner-top">Main Menu</div>
    	<div class="content">
        	<div id="accordion-menu">				
				
            <?php echo $accordion_menu_html; ?>   
                        
    	    </div>   
    	</div> 

    <div class="footer ui-widget ui-widget-header ui-corner-bottom" style="font-size: 0.5em;">:: <?php echo  ''; ?></div>
</div>

<div class="ui-layout-east">
</div>


<div class="ui-layout-north" style="background: url(assets/images/blue-abstract-background_sm_.jpg); visibility: hidden;">
  	<div style="">        
	    <div id="tagline-container"><?php echo $app_tagline; ?></div>
		<div id="link-logout-container"><a href="<?php echo base_url(); ?>ctAuth/logout" style="color: #FFFFFF;margin-left:5px">Logout</a></div>
 	</div>

</div>
<div class="ui-layout-south" style="padding: 5px; margin-bottom: 1ex; visibility: hidden;">
   
        <div class="ui-widget ui-widget-header ui-corner-all"><?php echo 'Date: '.date('d/m/Y') ?><span style="padding-left:20px"></span></div>
    	<div class="content" style="text-align:center;">    		
    		<div id="link-user-container">User Level : <?php echo $user_level; ?></div>
    	</div>   

</div>

           
            <div class="ui-layout-center" style="visibility: hidden;">  
                    
                    <div id="tabs">      
                                      
                    	<div id="tab_buttons" >  
                        <a id="but-close-all-tabs" style="position:absolute; right:15px; top:13px; z-index:9999999; cursor:pointer; color:#FFF;" alt="Close All Tabs" title="Close All Tabs">close all </a>                  
                    		<ul id="tab_header" class="ui-corner-top">                     
                    			<li><a href="#tp_home">Home</a></li>                     
                    		</ul>                    
                    	</div>                  
                    
                    	<div id="tab_panels">             
                                                                    
                    		<div id="tp_home" class="tab-panel ui-tabs-hide" style="overflow:hidden;"> 
                              <div class="container">
                                <div id="frontpage-container" >
									
									<div class="tiles blue tile-group four-wide" style="height:250px;width:750px">
										
										<div class="live-tile accent blue exclude" style="height:260px;width:260px">
											<img src="<?php echo base_url(); ?>assets/images/gedung.png" style="vertical-align: middle;height:260px;width:260px"/>
										</div>
										<div class="live-tile" data-speed="750" data-delay="3000" style="height:140px;width:140px" >
											<span class="tile-title">EXPORT IMPORT</span>
											<div><img class="full"  src="assets/images/tiles/out.png" alt="1" /></div>
											<div><img class="full" src="assets/images/tiles/boat.jpg" alt="2" /></div>
										</div>
																	   
										<div class="red live-tile" data-mode="flip" data-delay="4000" style="height:140px;width:140px" >           
											<div>
												<img class="full" src="assets/images/tiles/pabrik.jpg" alt="3" />
												<span class="tile-title">INVENTORY</span>
											</div>
											<div>
												<img class="full" src="assets/images/tiles/product.jpg" alt="4" />
												<span class="tile-title" style="color:black">PRODUCTION</span>
											</div>
										</div>
										<div class="list-tile yellow" style="position:absolute;height:140px;width:140px;left:570px">
											<span class="tile-title">REPORTS</span>
											<ul class="flip-list fourTiles" data-mode="flip-list" data-delay="2000" >
												<li>
													<div><img class="full" src="assets/images/tiles/report1.png" alt="1" /></div>
													<div><img class="full" src="assets/images/tiles/report2.png" alt="1" /></div>
												</li>
												<li>
													<div><img class="full" src="assets/images/tiles/windows.jpg" alt="2" /></div>
													<div><img class="full" src="assets/images/tiles/windows1.jpg" alt="2" /></div>
												</li>
												<li data-direction="horizontal">
													<div><img class="full" src="assets/images/tiles/komputer.jpg" alt="4" /></div>
													<div><img class="full" src="assets/images/tiles/komputer2.jpg" alt="4" /></div>
												</li>
												<li>
													<div><img class="full" src="assets/images/tiles/document_xls1.png" alt="3" /></div>
													<div><img class="full" src="assets/images/tiles/document_xls2.png" alt="3" /></div>
												</li>
											</ul>
										</div>
										<div style="position:absolute;top:129px;left:90px">
											<img src="<?php echo base_url(); ?>assets/images/YAZAKIPEMI.png" style="padding-left:180px;vertical-align: middle;height:70px;width:450px"/>
										</div>
										<div class="tile-strip four-wide half-tall" style="position:absolute;top:184px;left:100px;">
											<ul class="flip-list color-strip" data-mode="flip-list" data-always-trigger="true" data-initdelay="250" data-delay="3500">
												<li class="half-tile" data-direction="horizontal"><div class="accent yellow" style="width:50px;left:170px"></div>
													<div class="accent orange" style="width:50px;left:170px">
														
													</div>
												</li>
												<li class="half-tile"><div style="width:50px;left:146px"></div><div class="accent green" style="width:50px;left:146px"></div></li>
												<li class="half-tile"><div style="width:50px;left:122px" align="center"><font size="7"><b>P</b></font></div><div class="accent teal" style="width:50px;left:122px" align="center"><font size="7"><b>P</b></font></div></li>                        
												<li class="half-tile"><div style="width:50px;left:98px" align="center"><font size="7" ><b>E</b></font></div><div class="accent red" style="width:50px;left:98px" align="center"><font size="7"><b>E</b></font></div></li>
												<li class="half-tile"><div style="width:50px;left:74px" align="center"><font size="7"><b>M</b></font></div><div class="accent yellow" style="width:50px;left:74px" align="center"><font size="7"><b>M</b></font></div></li>
												<li class="half-tile"><div style="width:50px;left:50px;" align="center"><font size="7"><b>I</b></font></div><div class="accent steel" style="width:50px;left:50px;" align="center"><font size="7"><b>I</b></font></div></li>
												<li class="half-tile"><div style="width:50px;left:26px"></div><div class="accent pink" style="width:50px;left:26px"></div></li>
												<li class="half-tile"><div class="accent teal" style="width:50px"></div><div class="accent purple" style="width:50px"></div></li>                        
											</ul>
										</div>
									</div>
									<br />
									<h2>Perhatian: <br />
									<ul>
									<li>Tiap pengguna telah memiliki User ID dan Password masing-masing.</li> 
									<li>Tiap pengguna wajib merahasiakan serta bertanggungjawab terhadap penggunaan User ID tersebut. </li> 
									<li>Dilarang saling menginformasikan atau tukar menukar User ID saat pengoperasian CCS-P, karena kegiatan user akan dicatat! </li>
									</ul>
									Selamat Bekerja - Semoga Sukses
									</h2>			
								</div>
                  		  	  </div>
                    		</div>  
                    	</div>                        
                        <div class="ui-widget ui-widget-header ui-corner-bottom" style="text-align: left;"> <img src="<?php echo base_url(); ?>assets/images/icons/22x22/level.png" style="vertical-align: middle;"/> Login As : <?php echo $user_name; ?> <span id="user-cp" style="position: absolute; right:10px;cursor:pointer;"><img src="<?php echo base_url(); ?>assets/images/icons/22x22/personal.png" style="vertical-align: middle;"/> Change Password</span></div>
                    </div>


	</div>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.iconmenu.js"></script>
<script type="text/javascript">
	$(function() {
		$('#sti-menu').iconmenu();
        setTimeout(function(){
            $("#infoTreeLink").trigger("click");    
        },1000)
        
	});
</script>    
</body>
</html> 