diff --git a/scm-webapp/src/main/webapp/index.html b/scm-webapp/src/main/webapp/index.html
index 0de37f789d..768ea45402 100644
--- a/scm-webapp/src/main/webapp/index.html
+++ b/scm-webapp/src/main/webapp/index.html
@@ -84,6 +84,10 @@
     <script type="text/javascript" src="resources/js/login/sonia.login.form.js"></script>
     <script type="text/javascript" src="resources/js/login/sonia.login.window.js"></script>
     
+    <!-- sonia.panel -->
+    <script type="text/javascript" src="resources/js/panel/sonia.panel.js"></script>
+    <script type="text/javascript" src="resources/js/panel/sonia.panel.syntaxhighlighterpanel.js"></script>
+    
     <!-- sonia.rest -->
     <script type="text/javascript" src="resources/js/rest/sonia.rest.js"></script>
     <script type="text/javascript" src="resources/js/rest/sonia.rest.jsonstore.js"></script>
diff --git a/scm-webapp/src/main/webapp/resources/js/panel/sonia.panel.js b/scm-webapp/src/main/webapp/resources/js/panel/sonia.panel.js
new file mode 100644
index 0000000000..4362409381
--- /dev/null
+++ b/scm-webapp/src/main/webapp/resources/js/panel/sonia.panel.js
@@ -0,0 +1,34 @@
+/* *
+ * Copyright (c) 2010, Sebastian Sdorra
+ * All rights reserved.
+ * 
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ * 
+ * 1. Redistributions of source code must retain the above copyright notice,
+ *    this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright notice,
+ *    this list of conditions and the following disclaimer in the documentation
+ *    and/or other materials provided with the distribution.
+ * 3. Neither the name of SCM-Manager; nor the names of its
+ *    contributors may be used to endorse or promote products derived from this
+ *    software without specific prior written permission.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED.  IN NO EVENT SHALL THE REGENTS OR CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ * ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ * 
+ * http://bitbucket.org/sdorra/scm-manager
+ * 
+ */
+
+
+// register namespace
+Ext.ns('Sonia.panel');
\ No newline at end of file
diff --git a/scm-webapp/src/main/webapp/resources/js/panel/sonia.panel.syntaxhighlighterpanel.js b/scm-webapp/src/main/webapp/resources/js/panel/sonia.panel.syntaxhighlighterpanel.js
new file mode 100644
index 0000000000..f1c3b58ae0
--- /dev/null
+++ b/scm-webapp/src/main/webapp/resources/js/panel/sonia.panel.syntaxhighlighterpanel.js
@@ -0,0 +1,244 @@
+/* *
+ * Copyright (c) 2010, Sebastian Sdorra
+ * All rights reserved.
+ * 
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ * 
+ * 1. Redistributions of source code must retain the above copyright notice,
+ *    this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright notice,
+ *    this list of conditions and the following disclaimer in the documentation
+ *    and/or other materials provided with the distribution.
+ * 3. Neither the name of SCM-Manager; nor the names of its
+ *    contributors may be used to endorse or promote products derived from this
+ *    software without specific prior written permission.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED.  IN NO EVENT SHALL THE REGENTS OR CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ * ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ * 
+ * http://bitbucket.org/sdorra/scm-manager
+ * 
+ */
+
+
+Sonia.panel.SyntaxHighlighterPanel = Ext.extend(Ext.Panel, {
+  
+  syntaxes: [{
+    name: 'ActionScript3',
+    aliases: ['as3', 'actionscript3'],
+    fileName: 'shBrushAS3.js'
+  },{
+    name: 'Bash/shell',
+    aliases: ['bash', 'shell'],
+    fileName: 'shBrushBash.js'
+  },{
+    name: 'ColdFusion',
+    aliases: ['cf', 'coldfusion'],
+    fileName: 'shBrushColdFusion.js'
+  },{
+    name: 'C#',
+    aliases: ['c-sharp', 'csharp'],
+    fileName: 'shBrushCSharp.js'
+  },{
+    name: 'C++',
+    aliases: ['cpp', 'c'],
+    fileName: 'shBrushCpp.js'
+  },{
+    name: 'CSS',
+    aliases: ['css'],
+    fileName: 'shBrushCss.js'
+  },{
+    name: 'Delphi',
+    aliases: ['delphi', 'pas', 'pascal'],
+    fileName: 'shBrushDelphi.js'
+  },{
+    name: 'Diff',
+    aliases: ['diff', 'patch'],
+    fileName: 'shBrushDiff.js'
+  },{
+    name: 'Erlang',
+    aliases: ['erl', 'erlang'],
+    fileName: 'shBrushErlang.js'
+  },{
+    name: 'Groovy',
+    aliases: ['groovy'],
+    fileName: 'shBrushGroovy.js'
+  },{
+    name: 'JavaScript',
+    aliases: ['js', 'jscript', 'javascript' ],
+    fileName: 'shBrushJScript.js'
+  },{
+    name: 'Java',
+    aliases: ['java'],
+    fileName: 'shBrushJava.js'
+  },{
+    name: 'JavaFX',
+    aliases: ['jfx', 'javafx'],
+    fileName: 'shBrushJavaFX.js'
+  },{
+    name: 'Perl',
+    aliases: ['perl', 'pl'],
+    fileName: 'shBrushPerl.js'
+  },{
+    name: 'PHP',
+    aliases: ['php'],
+    fileName: 'shBrushPhp.js'
+  },{
+    name: 'Plain Text',
+    aliases: ['plain', 'text', 'txt'],
+    fileName: 'shBrushPlain.js'
+  },{
+    name: 'PowerShell',
+    aliases: ['ps', 'powershell'],
+    fileName: 'shBrushPowerShell.js'
+  },{
+    name: 'Python',
+    aliases: ['py', 'python'],
+    fileName: 'shBrushPython.js'
+  },{
+    name: 'Ruby',
+    aliases: ['rails', 'ror', 'ruby', 'rb'],
+    fileName: 'shBrushRuby.js'
+  },{
+    name: 'Scala',
+    aliases: ['scala'],
+    fileName: 'shBrushScala.js'
+  },{
+    name: 'SQL',
+    aliases: ['sql'],
+    fileName: 'shBrushScala.js'
+  },{
+    name: 'Visual Basic',
+    aliases: ['vb', 'vbnet'],
+    fileName: 'shBrushVb.js'
+  },{
+    name: 'Python',
+    aliases: ['py', 'python'],
+    fileName: 'shBrushPython.js'
+  },{
+    name: 'XML',
+    aliases: ['xml', 'xhtml', 'xslt', 'html', 'xhtml'],
+    fileName: 'shBrushXml.js'
+  }],
+  
+  syntax: 'plain',
+  brushUrl: 'shBrushPlain.js',
+  theme: 'Default',
+  shPath: 'resources/syntaxhighlighter',
+  contentUrl: null,
+  
+  contentLoaded: false,
+  scriptsLoaded: false,
+  
+  initComponent: function(){
+    
+    if (debug){
+      console.debug( 'try to find brush for ' + this.syntax );
+    }
+    
+    if ( this.syntax != 'plain' ){
+      var s = null;
+      var found = false;
+      for (var i=0; i<this.syntaxes.length; i++){
+        s = this.syntaxes[i];
+        for ( var j=0;j<s.aliases.length; j++ ){
+          if ( this.syntax == s.aliases[j] ){
+            found = true;
+            this.syntax = s.name;
+            this.brushUrl = s.fileName;
+            if (debug){
+              console.debug( "found brush " + this.syntax + " at " + this.brushUrl );
+            }
+            break;
+          }
+        }
+        if ( found ){
+          break;
+        }
+      }
+      
+      if (! found){
+        if ( debug ){
+          console.debug( 'could not find syntax for ' + this.syntax );
+        }
+        this.syntax = 'plain';
+      }
+    }
+    
+    // load core stylesheet
+    main.loadStylesheet( this.shPath + '/styles/shCore.css');
+    // load theme stylesheet
+    if ( debug ){
+      console.debug( 'load theme ' + this.theme );
+    }
+    main.loadStylesheet(this.shPath + '/styles/shCore' + this.theme + '.css');
+    
+    var config = {
+      autoScroll: true,
+      listeners: {
+        afterrender: {
+          fn: this.loadContent,
+          scope: this
+        }
+      }
+    };
+    
+    this.loadContent();
+    
+    Ext.apply(this, Ext.apply(this.initialConfig, config));
+    
+    if (debug){
+      console.debug(config);
+    }
+    
+    Sonia.panel.SyntaxHighlighterPanel.superclass.initComponent.apply(this, arguments);
+  },
+  
+  loadContent: function(){
+    main.loadScript(this.shPath + '/scripts/shCore.js', this.loadBrush, this);
+    Ext.Ajax.request({
+      url: this.contentUrl,
+      scope: this,
+      success: function(response){
+        console.debug( this.syntax );
+        this.update('<pre class="brush: ' + this.syntax + '">' + Ext.util.Format.htmlEncode(response.responseText) + '</pre>');
+        this.contentLoaded = true;
+        this.highlight();
+      },
+      failure: function(){
+        // TODO
+      }
+    });
+  },
+  
+  loadBrush: function(){
+    main.loadScript(this.shPath + '/scripts/' + this.brushUrl, function(){
+      this.scriptsLoaded = true;
+      this.highlight();
+    }, this);
+  },
+  
+  highlight: function(){
+    if (debug){
+      console.debug('loaded, script: ' + this.scriptsLoaded + ", content: " + this.contentLoaded );
+    }
+    if ( this.scriptsLoaded && this.contentLoaded ){
+      if (debug){
+        console.debug('call SyntaxHighlighter.highlight()');
+      }
+      SyntaxHighlighter.highlight({}, this.body.el);
+    }
+  }
+  
+});
+
+Ext.reg('syntaxHighlighterPanel', Sonia.panel.SyntaxHighlighterPanel);
\ No newline at end of file
diff --git a/scm-webapp/src/main/webapp/resources/js/repository/sonia.repository.repositorybrowser.js b/scm-webapp/src/main/webapp/resources/js/repository/sonia.repository.repositorybrowser.js
index 50004c86fd..2db1adf536 100644
--- a/scm-webapp/src/main/webapp/resources/js/repository/sonia.repository.repositorybrowser.js
+++ b/scm-webapp/src/main/webapp/resources/js/repository/sonia.repository.repositorybrowser.js
@@ -44,11 +44,6 @@ Sonia.repository.RepositoryBrowser = Ext.extend(Ext.grid.GridPanel, {
 
   initComponent: function(){
     
-    this.syntaxes = new Array();
-    this.syntaxes['java'] = 'resources/syntaxhighlighter/scripts/shBrushJava.js';
-    this.syntaxes['xml'] = 'resources/syntaxhighlighter/scripts/shBrushXml.js';
-    this.syntaxes['txt'] = 'resources/syntaxhighlighter/scripts/shBrushPlain.js';
-    
     var browserStore = new Sonia.rest.JsonStore({
       proxy: new Ext.data.HttpProxy({
         url: restUrl + 'repositories/' + this.repository.id  + '/browse.json',
@@ -113,8 +108,7 @@ Sonia.repository.RepositoryBrowser = Ext.extend(Ext.grid.GridPanel, {
         click: {
           fn: this.onClick,
           scope: this
-        },
-        afterRender: this.afterRender
+        }
       }
     };
     
@@ -122,14 +116,6 @@ Sonia.repository.RepositoryBrowser = Ext.extend(Ext.grid.GridPanel, {
     Sonia.repository.RepositoryBrowser.superclass.initComponent.apply(this, arguments);
   },
   
-  afterRender: function(){
-    // preload syntaxhighlighter
-    main.loadScript('resources/syntaxhighlighter/scripts/shCore.js');
-    main.loadStylesheet('resources/syntaxhighlighter/styles/shCore.css');
-    // theme onfigureable ??
-    main.loadStylesheet('resources/syntaxhighlighter/styles/shCoreDefault.css');
-  },
-  
   loadStore: function(store, records, extra){
     var path = extra.params.path;
     if ( path != null && path.length > 0 ){
@@ -201,39 +187,16 @@ Sonia.repository.RepositoryBrowser = Ext.extend(Ext.grid.GridPanel, {
       console.debug( 'open file: ' + path );
     }
     
-    var ext = this.getExtension( path );
-    var url = this.syntaxes[ext];
-    if ( url == null ){
-      // load plain on default
-      ext = "plain";
-      url = this.syntaxes['txt'];
-    }
-    
-    main.loadScript(url);
+    var ext = this.getExtension( path );    
     
     main.addTab({
       id: this.repository.id + "-b-"  + path,
-      xtype: 'panel',
+      contentUrl: restUrl + 'repositories/' + this.repository.id  + '/content?path=' + path,
+      xtype: 'syntaxHighlighterPanel',
       title: this.getName(path),
       closable: true,
       autoScroll: true,
-      listeners: {
-        afterrender: {
-          fn: function(panel){
-            Ext.Ajax.request({
-              url: restUrl + 'repositories/' + this.repository.id  + '/content?path=' + path,
-              success: function(response){
-                panel.update('<pre class="brush: ' + ext + '">' + Ext.util.Format.htmlEncode(response.responseText) + '</pre>');
-                SyntaxHighlighter.highlight({}, panel.body.el);
-              },
-              failure: function(){
-                // TODO
-              }
-            });
-          },
-          scope: this
-        }
-      }
+      syntax: ext
     });
   },
   
diff --git a/scm-webapp/src/main/webapp/resources/js/sonia.scm.js b/scm-webapp/src/main/webapp/resources/js/sonia.scm.js
index ae55d966d5..80d8fa0ed4 100644
--- a/scm-webapp/src/main/webapp/resources/js/sonia.scm.js
+++ b/scm-webapp/src/main/webapp/resources/js/sonia.scm.js
@@ -376,13 +376,46 @@ Sonia.scm.Main = Ext.extend(Ext.util.Observable, {
     }
   },
   
-  loadScript: function(url){
+  loadScript: function(url, callback, scope){
+    var doCallback = function(){
+      if (debug){
+        console.debug('call callback for script ' + url);
+      }
+      if ( scope ){
+        callback.call(scope);
+      } else {
+        callback();
+      }
+    }
     if ( this.scripts.indexOf(url) < 0 ){
       var js = document.createElement('script');
       js.type = "text/javascript";
       js.src = url;
-      document.head.appendChild(js);
+      
+      if ( Ext.isIE ){
+        js.onreadystatechange = function (){
+          if (this.readyState === 'loaded' ||
+              this.readyState === 'complete'){
+              doCallback();
+          }
+        }
+      } else {
+        js.onload = doCallback;
+        js.onerror = doCallback;
+      }
+      
+      if (debug){
+        console.debug('load script ' + url);
+      }
+      
+      var head = document.getElementsByTagName('head')[0];
+      head.appendChild(js);
       this.scripts.push(url);
+    } else {
+      if (debug){
+        console.debug( 'script ' + url + ' allready loaded' );
+      }
+      doCallback();
     }
   },