diff --git a/index.html b/index.html
index ad60fc52..c82b7089 100755
--- a/index.html
+++ b/index.html
@@ -30,7 +30,13 @@
-
+
diff --git a/winamp.css b/winamp.css
index a182f088..ea766317 100755
--- a/winamp.css
+++ b/winamp.css
@@ -40,6 +40,11 @@ body {
cursor:url('cursors/MAINMENU.PNG'), auto;
}
+#winamp.doubled {
+ zoom: 2;
+ -moz-transform: scale(2);
+}
+
#winamp.loading {
background-color: #FFFFFF;
background-image: url('images/loading.gif');
@@ -134,6 +139,35 @@ body {
background-position: -312px 0;
}
+.doubled .status #clutter-bar {
+ background-position: -328px -44px;
+}
+
+#clutter-bar div {
+ position: absolute;
+ height: 7px;
+ width: 8px;
+ left: 0px;
+}
+
+#clutter-bar #button-o {
+ top: 3px;
+ height: 8px;
+}
+#clutter-bar #button-a {
+ top: 11px;
+ }
+#clutter-bar #button-i {
+ top: 18px;
+}
+#clutter-bar #button-d {
+ top: 25px;
+ }
+#clutter-bar #button-v {
+ top: 32px;
+ height: 8px;
+}
+
.status #play-pause {
position: absolute;
top: 28px;
diff --git a/winamp.js b/winamp.js
index e65f1b8c..b716d3bf 100755
--- a/winamp.js
+++ b/winamp.js
@@ -10,6 +10,7 @@ function Winamp () {
'option': document.getElementById('option'),
'close': document.getElementById('close'),
'shade': document.getElementById('shade'),
+ 'buttonD': document.getElementById('button-d'),
'position': document.getElementById('position'),
'fileInput': document.getElementById('file-input'),
'volumeMessage': document.getElementById('volume-message'),
@@ -102,6 +103,10 @@ function Winamp () {
self.nodes.winamp.classList.add('closed');
}
+ this.nodes.buttonD.onclick = function() {
+ self.nodes.winamp.classList.toggle('doubled');
+ }
+
this.media.addEventListener('timeupdate', function() {
if(!self.nodes.winamp.classList.contains('setting-position')) {
self.nodes.position.value = self.media.percentComplete();