<!DOCTYPE html>
<html lang="en">
<head>        
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />    
    <!--[if gt IE 8]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />        
    <![endif]-->                
    <title>Code Editor - Leo - Premium Admin Template</title>
    <link rel="icon" type="image/ico" href="favicon.ico"/>
    
    <link href="css/stylesheets.css" rel="stylesheet" type="text/css" />
    
    <!--[if lte IE 7]>
        <script type='text/javascript' src='js/other/lte-ie7.js'></script>
    <![endif]-->    
    
    <script type='text/javascript' src='js/jquery/jquery-2.0.0.min.js'></script>
    <script type='text/javascript' src='js/jquery/jquery-ui-1.10.3.custom.min.js'></script>
    <script type='text/javascript' src='js/jquery/jquery-migrate-1.1.1.min.js'></script>
    <script type='text/javascript' src='js/jquery/globalize.js'></script>
    
    <script type='text/javascript' src='js/bootstrap/bootstrap.min.js'></script>
    <script type='text/javascript' src='js/cookies/jquery.cookies.2.2.0.min.js'></script>
    
    <script type='text/javascript' src='js/codemirror/codemirror.js'></script>
    <script type='text/javascript' src="js/codemirror/addon/edit/matchbrackets.js"></script>
    <script type='text/javascript' src="js/codemirror/mode/htmlmixed/htmlmixed.js"></script>
    <script type='text/javascript' src="js/codemirror/mode/xml/xml.js"></script>
    <script type='text/javascript' src="js/codemirror/mode/javascript/javascript.js"></script>
    <script type='text/javascript' src="js/codemirror/mode/css/css.js"></script>
    <script type='text/javascript' src="js/codemirror/mode/clike/clike.js"></script>
    <script type='text/javascript' src="js/codemirror/mode/php/php.js"></script>
    
    <script type='text/javascript' src="js/filetree/jqueryFileTree.js"></script>
    
    <script type='text/javascript' src='js/scrollup/jquery.scrollUp.min.js'></script>
    
    <script type='text/javascript' src='js/plugins.js'></script>    
    <script type='text/javascript' src='js/actions.js'></script>
</head>
<body>    
    
    <div id="wrapper">
        
        <div id="header">
            
            <div class="wrap">
                
                <a href="index.html" class="logo"></a>
                
                <div class="buttons fl">
                    <div class="item">
                        <a href="#" class="btn btn-primary btn-small c_layout">
                            <span class="i-layout-8"></span>                            
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="btn btn-primary btn-small c_screen">
                            <span class="i-stretch"></span>                            
                        </a>
                    </div>                    
                </div>
                
                <div class="buttons">
                    <div class="item">
                        <a href="#" class="btn btn-primary btn-small">
                            <span class="i-cog"></span>
                        </a>
                        <div class="popup">
                            <div class="head">
                                <h2>Settings</h2>
                            </div>
                            <div class="content np">      
                                <div class="row-fluid">
                                    <div class="controls-row">
                                        <div class="span3">Themes:</div>
                                        <div class="span9 themes">
                                            <a href="#" class="default tip" data-theme="" title="Default"></a>
                                            <a href="#" class="dark tip" data-theme="themeDark" title="Dark"></a>
                                            <a href="#" class="simple tip" data-theme="themeSimple" title="Simple"></a>
                                            <div class="help-block">On click theme will changed and saved settings</div>
                                        </div>
                                    </div>               
                                    <div class="controls-row">
                                        <div class="span3">Backgrounds:</div>
                                        <div class="span9 backgrounds">
                                            <a href="#" class="default tip" data-theme="" title="Default"></a>                                            
                                            <a href="#" class="b_bcrosshatch" data-back="b_bcrosshatch"></a>
                                            <a href="#" class="b_crosshatch" data-back="b_crosshatch"></a>
                                            <a href="#" class="b_cube" data-back="b_cube"></a>
                                            <a href="#" class="b_dots" data-back="b_dots"></a>
                                            <a href="#" class="b_grid" data-back="b_grid"></a>
                                            <a href="#" class="b_hline" data-back="b_hline"></a>
                                            <a href="#" class="b_simple" data-back="b_simple"></a>
                                            <a href="#" class="b_vline" data-back="b_vline"></a>
                                            <div class="help-block">On click background will changed and saved settings</div>
                                        </div>
                                    </div>                                    
                                </div>
                            </div>
                            <div class="footer">
                                <div class="side fr">
                                    <button class="btn btn-primary popup-close">Close</button>
                                </div>                                
                            </div>
                        </div>                        
                    </div>
                    <div class="item">
                        <a href="#" class="btn btn-primary btn-small">
                            <span class="i-chat"></span>
                        </a>
                        <div class="popup">
                            <div class="head">
                                <h2>Messages</h2>
                            </div>
                            <div class="content npb messages minify" id="messages"></div>
                            <div class="footer">
                                <div class="side fl">
                                    <button class="btn btn-link">Show all</button>
                                </div>
                                <div class="side fr">
                                    <button class="btn btn-primary popup-close">Close</button>
                                </div>                                
                            </div>
                        </div>                        
                    </div>
                    <div class="item">                        
                        <div class="btn-group">                        
                            <a href="#" class="btn btn-primary btn-small dropdown-toggle" data-toggle="dropdown">
                                <span class="i-forward"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#"><span class="i-profile"></span> Profile</a></li>
                                <li><a href="#"><span class="i-tools"></span> Controls</a></li>                                
                                <li><a href="#"><span class="i-locked"></span> Lock</a></li>
                                <li><a href="#"><span class="i-forward"></span> Logout</a></li>
                            </ul> 
                        </div>
                    </div>                
                </div>
                
            </div>
            
        </div>
        
        <div id="layout">
        
            <div id="sidebar">

                <div class="user">
                    <div class="pic">
                        <img src="img/examples/users/dmitry_m.jpg"/>
                    </div>
                    <div class="info">
                        <div class="name">
                            <a href="#">John Doe</a>
                        </div>
                        <div class="buttons">
                            <a href="#"><span class="i-cog"></span> Settings</a>
                            <a href="#"><span class="i-chat"></span> Messages</a>
                            <a href="#" class="fr"><span class="i-forward"></span> Logout</a>
                        </div>
                    </div>
                </div>

                <ul class="navigation">
                    <li>
                        <a href="index.html">Dashboard</a>
                    </li>
                    <li class="openable">
                        <a href="#">UI Elements</a>
                        <ul>
                            <li>
                                <a href="ui_elements.html">Elements</a>
                            </li>
                            <li>
                                <a href="ui_widgets.html">Widgets</a>
                            </li>
                            <li>
                                <a href="ui_buttons.html">Buttons</a>
                            </li>
                            <li>
                                <a href="ui_icons.html">Icons</a>
                            </li>
                            <li>
                                <a href="ui_grid.html">Grid system</a>
                            </li>                        
                        </ul>
                    </li> 
                    <li class="openable open">
                        <a href="#">Form Stuff</a>
                        <ul>
                            <li>
                                <a href="form_elements.html">Form elements</a>
                            </li>                            
                            <li>
                                <a href="form_validation.html">Form validation</a>
                            </li>                                                        
                            <li>
                                <a href="form_wizard.html">Wizard</a>
                            </li>
                            <li>
                                <a href="form_wysiwyg.html">WYSIWYG</a>
                            </li>                             
                            <li class="active">
                                <a href="form_code_editor.html">Code editor</a>
                            </li>                            
                        </ul>                        
                    </li>                
                    <li>
                        <a href="messages.html">Messages</a>
                    </li>                                
                    <li>
                        <a href="charts.html">Charts</a>
                    </li>                                   
                    <li class="openable">                        
                        <a href="tables.html">Tables</a>
                        <ul>
                            <li>
                                <a href="tables_default.html">Default tables</a>
                            </li>
                            <li>
                                <a href="tables_sort.html">Sorting tables</a>
                            </li>
                            <li>
                                <a href="tables_edit.html">Editable tables</a>
                            </li>
                        </ul>
                    </li>        
                    <li>
                        <a href="typography.html">Typography</a>                       
                    </li>     
                    <li>
                        <a href="files.html">File handling</a>                       
                    </li>
                    <li>
                        <a href="calendar.html">Calendar</a>                       
                    </li>                    
                    <li class="openable">
                        <a href="#">Maps</a>
                        <ul>
                            <li>
                                <a href="maps_vector.html">Vector maps</a>
                            </li>
                            <li>
                                <a href="maps_google.html">Google maps</a>
                            </li>                            
                        </ul>
                    </li>                    
                    <li class="openable">
                        <a href="#">Sample Pages</a>
                        <ul>
                            <li>
                                <a href="sample_login.html">Login</a>
                            </li>     
                            <li>
                                <a href="sample_user_edit.html">User edit</a>
                            </li>             
                            <li>
                                <a href="sample_search.html">Search result</a>
                            </li>      
                            <li>
                                <a href="sample_faq.html">FAQ</a>
                            </li>                    
                            <li>
                                <a href="sample_mailbox.html">Mailbox</a>
                            </li>
                            <li>
                                <a href="sample_invoice.html">Invoice</a>
                            </li>                  
                            <li>
                                <a href="sample_gallery.html">Gallery</a>
                            </li>                            
                            <li>
                                <a href="sample_blank.html">Blank page</a>
                            </li>
                            <li>
                                <a href="sample_price.html">Pricing table</a>
                            </li>
                            <li>
                                <a href="sample_payment.html">Payment table</a>
                            </li>                            
                            <li class="openable">
                                <a href="#">Error pages</a>
                                <ul>
                                    <li><a href="sample_error_403.html">Error 403 forbidden</a></li>
                                    <li><a href="sample_error_404.html">Error 404 not found</a></li>
                                    <li><a href="sample_error_503.html">Error 503 service unavailable</a></li>
                                </ul>
                            </li>                            
                        </ul>
                    </li>
                    <li class="openable">
                        <a href="#" class="icon"><span class="i-star text-info"></span>Navigation samples<span class="label label-important fr">+6</span></a>
                        <ul>
                            <li><a href="#" class="icon"><span class="i-battery text-error"></span>Second level<span class="label label-info fr">$35,224</span></a></li>                            
                            <li class="openable">
                                <a href="#" class="icon"><span class="i-cart text-success"></span>Second level<span class="label label-important fr">+3</span></a>
                                <ul>
                                    <li><a href="#" class="icon"><span class="i-film"></span>Third level<span class="label label-info fr">3</span><span class="label label-success fr">2</span><span class="label fr">1</span></a></li>
                                    <li class="active"><a href="#" class="icon"><span class="i-cube text-info"></span>Active third level<span class="label label-info fr">3</span><span class="label label-info fr">2</span><span class="label label-info fr">1</span></a></li>
                                    <li><a href="#" class="icon"><span class="i-info"></span>Third level<span class="label label-warning fr">3</span><span class="label label-important fr">2</span><span class="label fr">1</span></a></li>
                                </ul>
                            </li>                            
                            <li><a href="#" class="icon"><span class="i-box text-warning"></span>Second level<span class="label label-success fr">$1989.02</span></a></li>
                        </ul>
                    </li>                     
                </ul>

            </div>

            <div id="content">                        
                <div class="wrap">
                    
                    <div class="head">
                        <div class="info">
                            <h1>Code editor</h1>
                            <ul class="breadcrumb">
                                <li><a href="#">Dashboard</a> <span class="divider">-</span></li>
                                <li><a href="#">Form Stuff</a> <span class="divider">-</span></li>
                                <li class="active">Code editor</li>
                            </ul>
                        </div>
                        
                        <div class="search">
                            <form action="" method="post">
                                <input type="text" placeholder="search..."/>                                
                                <button type="submit"><span class="i-calendar"></span></button>
                                <button type="submit"><span class="i-magnifier"></span></button>
                            </form>
                        </div>                        
                    </div>                                                                    
                    
                    <div class="content">

                        <div class="row-fluid">
                            <div class="alert alert-info">
                                <strong>Atention!</strong> Plugin supports lots of languages, mods, addons and themes.
                                <button type="button" class="close" data-dismiss="alert">×</button>
                            </div>
                        </div>                        
                        
                        <div class="row-fluid">                            
                            <div class="span12">
                                <div class="block">
                                    <div class="head">                                        
                                        <h2>/www/includes/someClassName.php</h2>
                                        <ul class="buttons">                                            
                                            <li><a href="#" class="block_toggle"><span class="i-arrow-down-3"></span></a></li>
                                            <li><a href="#" class="block_remove"><span class="i-cancel-2"></span></a></li>
                                        </ul>
                                    </div>                
                                    <div class="content np">
                                        <textarea id="codeEditor">
<?php
    class SomeClassName extends AnotherClassName{

        var $someVar,$anotherVar;
        var $someArray = array();

        private function __construct($id,$param1,$param2){
            $this->someVar    = $param1;
            $this->anotherVar = $param2;
            
            $this->someArray = $this->load_data($id);
        }

        public function build(){
            return (($this->someVar / $this->anotherVar) * $this->buffer) > 0 ? true : false ;
        }
        
        public function load_data($id){
            $data = array();

            $query = mysql_query("SELECT * FROM `base` WHERE `id`='".$this->int($id)."'");

            if(mysql_num_rows($query) > 0){
                while($row = mysql_fetch_array($query))
                    $data[] = $row['somecol'];                                
                return $data;    
            }else
                return false;
        }

        private function __destruct(){
            $this->someVar    = false;
            $this->anotherVar = false;
        }
    }
?>
</textarea>
                                        <script>
                                            var editor = CodeMirror.fromTextArea(document.getElementById("codeEditor"), {
                                                lineNumbers: true,
                                                matchBrackets: true,
                                                mode: "application/x-httpd-php",
                                                indentUnit: 4,
                                                indentWithTabs: true,
                                                enterMode: "keep",
                                                tabMode: "shift"                                                
                                            });
                                            editor.setSize('100%','420px');

                                        </script>                                        
                                    </div>
                                    <div class="footer">
                                        <div class="side fr">
                                            <div class="btn-group">                                                
                                                <button class="btn btn-primary">Save</button>
                                            </div>
                                        </div>
                                    </div>                                     
                                </div>

                                <div class="alert alert-info">
                                    <strong>Atention!</strong> File tree plugin display same file as in <a href="files.html" target="_blank">File manager</a> plugin
                                    <button type="button" class="close" data-dismiss="alert">×</button>
                                </div>                                
                                
                                <div class="block">
                                    <div class="head">
                                        <h2>File tree</h2>                                        
                                        <ul class="buttons">                                            
                                            <li><a href="#" class="block_toggle"><span class="i-arrow-down-3"></span></a></li>
                                            <li><a href="#" class="block_remove"><span class="i-cancel-2"></span></a></li>
                                        </ul>                                        
                                    </div>
                                    <div class="content oh">
                                        <div id="filetree"></div>
                                        <script>
                                            $('#filetree').fileTree({
                                                root: '/',
                                                script: 'php/filetree/jqueryFileTree.php',
                                                expandSpeed: 200,
                                                collapseSpeed: 200,
                                                multiFolder: false
                                            }, function(file) {
                                                alert(file);
                                            });                                            
                                        </script>                            
                                    </div>
                                </div>                                
                                
                            </div>
                            
                        </div>
                        
                    </div>
                        
                </div>
            </div>
            
        </div>

    </div>
    
</body>
</html>
