OpenLayers Shapefiles Drag and Drop Files onto Map

HTML

<script src="http://www.w3.org/TR/FileAPI/"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<body onload="init()">
    <div id="wasndas">OpenLayers Drag and Drop Files onto Map</div>
    <div id="map"></div>
    <div id="message">
        <input type="image" src="http://renevier.net/misc/close.png" onclick="hide(this.parentNode)" alt="X">
        <div id="message-content">This document is a demo of <a href="http://www.w3.org/TR/FileAPI/">FileAPI</a> with drag and drop. Drag a geographic file (KML, GPX or OSM) on the map, and it will be drawn.</div>
    </div>
</body>

CSS

#map {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
 }
 #message {
     max-width: 12em;
     text-align: center;
     position: fixed;
     padding: 1em 3em 1em 3em;
     border: 3px double black;
     -moz-border-radius: 15px;
     -webkit-border-radius: 15px;
     border-radius: 15px;
     left: 20%;
     bottom: 20%;
     background-color: white;
     z-index: 2000;
 }
 #message > input[type="image"] {
     float: right;
     margin: -0.8em -2.6em 0 0;
 }
 #message.warn {
     color: #FF8C00;
     border-color: #FF8C00;
     font-weight: bold;
 }
 .olControlLayerSwitcher .layersDiv {
     background-Color: rgba(0, 60, 136, 0.5) !important;
     border: 1px solid #8B8B8B;
     border-radius: 5px 0px 0px 5px;
 }
 #wasndas {
     position: absolute;
     margin:auto;
     background: rgba(255, 255, 255, 0.7);
     border-radius:5px;
     z-index:10000;
     padding:5px;
     left:50px;
     border: 1px solid #8B8B8B;
 }
.olControlAttribution 
{
   bottom: 3px !important;
    
}
#attribution
{
    font-weight:bold;
    color:red;
}

JavaScript

var WGS84 = new OpenLayers.Projection("EPSG:4326");
 var Mercator = new OpenLayers.Projection("EPSG:900913");

// http://www.html5rocks.com/de/tutorials/file/dndfiles/


 function $(aId) {
     return document.getElementById(aId);
 }

 function show(aEl) {
     aEl.style.display = '';
 }

 function hide(aEl) {
     aEl.style.display = 'none';
 }

 function init() {
     jQuery("#message").fadeOut(15000);

     this.map = new OpenLayers.Map('map');
     var baseLayer = new OpenLayers.Layer.OSM("");

     var viewLayer = new OpenLayers.Layer.Vector("ViewLayer", {
         projection: WGS84,
         styleMap: new OpenLayers.StyleMap({
             fillColor: "blue",
             strokeColor: "blue",
             strokeWidth: 3
         }),
         attribution: "<span id='attribution'>Example adapted from <a href='http://renevier.net/misc/mapfileapi.html' target='_blank'>renevier.net</a></span>"
     }
                                                
                                                );
     map.addLayers([baseLayer, viewLayer]);
     var switcher = new OpenLayers.Control.LayerSwitcher();
     map.addControl(switcher);
     switcher.maximizeControl();
     var lonlat = new OpenLayers.LonLat(0, 0).transform(WGS84, Mercator);
     map.setCenter(lonlat, 3);
     if (!window.FileList || !window.FileReader) {
         $('message-content').textContent = 'You browser does not support local file api';
         $('message-content').className = 'warn';
         return;
     }

     function readerror() {
         $("message-content").textContent = "could not analyze file";
         $("message").className = "warn";
         show($("message"));
     }
     var handleFile = function (file) {
         var reader = new FileReader();
         reader.onload = function (evt) {
             if (evt.error) {
                 readerror();
                 return;
             }

             var results = null;
             var content = evt.target.result;
            ...