From e197251495ae92a0818b5365a791eb074ec5d981 Mon Sep 17 00:00:00 2001
From: Jason Schuller <hi@jason.sc>
Date: Mon, 5 Aug 2013 10:25:47 -0700
Subject: [PATCH] The New Dropplets Admin Panel

---
 dropplets/functions.php          |  12 +-
 dropplets/includes/js/cookies.js |  18 +
 dropplets/includes/uploader.php  |   2 +-
 dropplets/style/style.css        | 724 ++++++++++++++-----------------
 dropplets/tools.php              | 332 ++++++++------
 index.php                        |   4 +-
 6 files changed, 549 insertions(+), 543 deletions(-)
 create mode 100644 dropplets/includes/js/cookies.js

diff --git a/dropplets/functions.php b/dropplets/functions.php
index b3b3fd8f..feb45dfc 100644
--- a/dropplets/functions.php
+++ b/dropplets/functions.php
@@ -233,7 +233,7 @@ function get_installed_templates() {
                 <div class="shadow"></div>
                 <form method="POST" action="./dropplets/save.php">
                     <img src="<?php echo $template_screenshot; ?>">
-                    <input class="hidden" type="text" name="template" id="template" required readonly value="<?php echo $template_dir_name ?>">
+                    <input type="hidden" name="template" id="template" required readonly value="<?php echo $template_dir_name ?>">
                     <button class="<?php if ($active_template == $template_dir_name) :?>active<?php else : ?>activate<?php endif; ?>" type="submit" name="submit" value="submit"><?php if ($active_template == $template_dir_name) :?>t<?php else : ?>k<?php endif; ?></button>
                 </form>
             </li>
@@ -259,7 +259,7 @@ function get_premium_templates($type = 'all') {
         $template_price=$template->price;
         
         { ?>
-        <li>
+        <li class="premium">
             <div class="shadow"></div>
             <img src="http://dropplets.com/demo/templates/<?php echo $template_file_name; ?>/screenshot.jpg" alt="<?php echo $template_name; ?>">
             <a class="buy" href="http://dropplets.com/marketplace/?template=<?php echo $template_file_name; ?>" title="Purchase/Download" target="_blank"><?php echo $template_price; ?></a> 
@@ -272,6 +272,14 @@ function get_premium_templates($type = 'all') {
 
 }
 
+function count_premium_templates($type = 'all') {
+    
+    $templates = simplexml_load_file('http://dropplets.com/marketplace/templates-'. $type .'.xml');
+    $templates_count = $templates->children();
+    echo count($templates_count);
+
+}
+
 /*-----------------------------------------------------------------------------------*/
 /* If is Home (Could use "is_single", "is_category" as well.)
 /*-----------------------------------------------------------------------------------*/
diff --git a/dropplets/includes/js/cookies.js b/dropplets/includes/js/cookies.js
new file mode 100644
index 00000000..bd2dacb4
--- /dev/null
+++ b/dropplets/includes/js/cookies.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2005 - 2010, James Auldridge
+ * All rights reserved.
+ *
+ * Licensed under the BSD, MIT, and GPL (your choice!) Licenses:
+ *  http://code.google.com/p/cookies/wiki/License
+ *
+ */
+var jaaulde=window.jaaulde||{};jaaulde.utils=jaaulde.utils||{};jaaulde.utils.cookies=(function(){var resolveOptions,assembleOptionsString,parseCookies,constructor,defaultOptions={expiresAt:null,path:'/',domain:null,secure:false};resolveOptions=function(options){var returnValue,expireDate;if(typeof options!=='object'||options===null){returnValue=defaultOptions;}else
+{returnValue={expiresAt:defaultOptions.expiresAt,path:defaultOptions.path,domain:defaultOptions.domain,secure:defaultOptions.secure};if(typeof options.expiresAt==='object'&&options.expiresAt instanceof Date){returnValue.expiresAt=options.expiresAt;}else if(typeof options.hoursToLive==='number'&&options.hoursToLive!==0){expireDate=new Date();expireDate.setTime(expireDate.getTime()+(options.hoursToLive*60*60*1000));returnValue.expiresAt=expireDate;}if(typeof options.path==='string'&&options.path!==''){returnValue.path=options.path;}if(typeof options.domain==='string'&&options.domain!==''){returnValue.domain=options.domain;}if(options.secure===true){returnValue.secure=options.secure;}}return returnValue;};assembleOptionsString=function(options){options=resolveOptions(options);return((typeof options.expiresAt==='object'&&options.expiresAt instanceof Date?'; expires='+options.expiresAt.toGMTString():'')+'; path='+options.path+(typeof options.domain==='string'?'; domain='+options.domain:'')+(options.secure===true?'; secure':''));};parseCookies=function(){var cookies={},i,pair,name,value,separated=document.cookie.split(';'),unparsedValue;for(i=0;i<separated.length;i=i+1){pair=separated[i].split('=');name=pair[0].replace(/^\s*/,'').replace(/\s*$/,'');try
+{value=decodeURIComponent(pair[1]);}catch(e1){value=pair[1];}if(typeof JSON==='object'&&JSON!==null&&typeof JSON.parse==='function'){try
+{unparsedValue=value;value=JSON.parse(value);}catch(e2){value=unparsedValue;}}cookies[name]=value;}return cookies;};constructor=function(){};constructor.prototype.get=function(cookieName){var returnValue,item,cookies=parseCookies();if(typeof cookieName==='string'){returnValue=(typeof cookies[cookieName]!=='undefined')?cookies[cookieName]:null;}else if(typeof cookieName==='object'&&cookieName!==null){returnValue={};for(item in cookieName){if(typeof cookies[cookieName[item]]!=='undefined'){returnValue[cookieName[item]]=cookies[cookieName[item]];}else
+{returnValue[cookieName[item]]=null;}}}else
+{returnValue=cookies;}return returnValue;};constructor.prototype.filter=function(cookieNameRegExp){var cookieName,returnValue={},cookies=parseCookies();if(typeof cookieNameRegExp==='string'){cookieNameRegExp=new RegExp(cookieNameRegExp);}for(cookieName in cookies){if(cookieName.match(cookieNameRegExp)){returnValue[cookieName]=cookies[cookieName];}}return returnValue;};constructor.prototype.set=function(cookieName,value,options){if(typeof options!=='object'||options===null){options={};}if(typeof value==='undefined'||value===null){value='';options.hoursToLive=-8760;}else if(typeof value!=='string'){if(typeof JSON==='object'&&JSON!==null&&typeof JSON.stringify==='function'){value=JSON.stringify(value);}else
+{throw new Error('cookies.set() received non-string value and could not serialize.');}}var optionsString=assembleOptionsString(options);document.cookie=cookieName+'='+encodeURIComponent(value)+optionsString;};constructor.prototype.del=function(cookieName,options){var allCookies={},name;if(typeof options!=='object'||options===null){options={};}if(typeof cookieName==='boolean'&&cookieName===true){allCookies=this.get();}else if(typeof cookieName==='string'){allCookies[cookieName]=true;}for(name in allCookies){if(typeof name==='string'&&name!==''){this.set(name,null,options);}}};constructor.prototype.test=function(){var returnValue=false,testName='cT',testValue='data';this.set(testName,testValue);if(this.get(testName)===testValue){this.del(testName);returnValue=true;}return returnValue;};constructor.prototype.setOptions=function(options){if(typeof options!=='object'){options=null;}defaultOptions=resolveOptions(options);};return new constructor();})();(function(){if(window.jQuery){(function($){$.cookies=jaaulde.utils.cookies;var extensions={cookify:function(options){return this.each(function(){var i,nameAttrs=['name','id'],name,$this=$(this),value;for(i in nameAttrs){if(!isNaN(i)){name=$this.attr(nameAttrs[i]);if(typeof name==='string'&&name!==''){if($this.is(':checkbox, :radio')){if($this.attr('checked')){value=$this.val();}}else if($this.is(':input')){value=$this.val();}else
+{value=$this.html();}if(typeof value!=='string'||value===''){value=null;}$.cookies.set(name,value,options);break;}}}});},cookieFill:function(){return this.each(function(){var n,getN,nameAttrs=['name','id'],name,$this=$(this),value;getN=function(){n=nameAttrs.pop();return!!n;};while(getN()){name=$this.attr(n);if(typeof name==='string'&&name!==''){value=$.cookies.get(name);if(value!==null){if($this.is(':checkbox, :radio')){if($this.val()===value){$this.attr('checked','checked');}else
+{$this.removeAttr('checked');}}else if($this.is(':input')){$this.val(value);}else
+{$this.html(value);}}break;}}});},cookieBind:function(options){return this.each(function(){var $this=$(this);$this.cookieFill().change(function(){$this.cookify(options);});});}};$.each(extensions,function(i){$.fn[i]=this;});})(window.jQuery);}})();
\ No newline at end of file
diff --git a/dropplets/includes/uploader.php b/dropplets/includes/uploader.php
index 9899f9c3..2c93394d 100644
--- a/dropplets/includes/uploader.php
+++ b/dropplets/includes/uploader.php
@@ -20,7 +20,7 @@
 	    }
 	}
 
-	echo '<span class="success">k</span>';
+	echo '<span class="success"></span>';
 }
 
 ?>
diff --git a/dropplets/style/style.css b/dropplets/style/style.css
index 3dfe0e6a..62066b78 100755
--- a/dropplets/style/style.css
+++ b/dropplets/style/style.css
@@ -2,27 +2,27 @@
 /* Normalization
 *********************************************************************************************/
 
-#dp-admin div,
-#dp-admin span,
-#dp-admin object,
-#dp-admin iframe,
-#dp-admin h1,
-#dp-admin h2,
-#dp-admin h3,
-#dp-admin p,
-#dp-admin a,
-#dp-admin em,
-#dp-admin img,
-#dp-admin strong,
-#dp-admin ol,
-#dp-admin ul,
-#dp-admin li,
-#dp-admin fieldset,
-#dp-admin form,
-#dp-admin label,
-#dp-admin section,
-#dp-admin video,
-body.install {
+.dp-panel div,
+.dp-panel span,
+.dp-panel object,
+.dp-panel iframe,
+.dp-panel h1,
+.dp-panel h2,
+.dp-panel h3,
+.dp-panel p,
+.dp-panel a,
+.dp-panel em,
+.dp-panel img,
+.dp-panel strong,
+.dp-panel ol,
+.dp-panel ul,
+.dp-panel li,
+.dp-panel fieldset,
+.dp-panel form,
+.dp-panel label,
+.dp-panel section,
+.dp-panel video,
+body.dp-install {
     margin: 0;
     padding: 0;
     border: 0;
@@ -31,50 +31,20 @@ body.install {
     vertical-align: baseline;
 }
 
-#dp-admin a {
+.dp-panel a,
+body.dp-install a {
     text-decoration: none;
 }
 
-#dp-admin ol,
-#dp-admin ul { 
+.dp-panel ol,
+.dp-panel ul { 
     list-style: none;
 }
 
-/* The Install Screen & Panel Styles
+/* The Install Screen
 *********************************************************************************************/
 
-#dp-admin .dp-panel {
-    background: #ffffff;
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 100000;
-    display: none;
-}
-
-#dp-admin .dp-close {
-    background-color: #333332;
-    width: 35px;
-    height: 35px;
-    font-family: "dropplets";
-    font-size: 16px;
-    line-height: 35px;
-    color: #ffffff;
-    overflow: hidden;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-}
-
-#dp-admin .dp-close:hover {
-    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.75);
-    text-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
-}
-
-body.install,
-#dp-admin .dp-panel {
+body.dp-install {
     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
     font-weight: 400;
     font-size: 14px;
@@ -84,51 +54,25 @@ body.install,
     text-rendering: optimizeLegibility;
 }
 
-#dp-admin .dp-panel a.dropplets {
+body.dp-install .dp-icon-dropplets {
     background-color: #1096d7;
     font-family: "dropplets";
-    font-size: 16px;
-    line-height: 35px;
-    color: #ffffff;
-    width: 35px;
-    height: 35px;
-    position: absolute;
-    top: 10px;
-    left: 10px;
-}
-
-#dp-admin .dp-panel a.dropplets-text {
-    background-color: #1096d7;
-    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-    font-weight: 400;
-    font-size: 14px;
+    font-size: 110px;
+    line-height: 160px;
     color: #ffffff;
-    line-height: 33px;
-    height: 35px;
-    position: absolute;
-    top: 10px;
-    left: 46px;
-    padding: 0 12px;
-}
-
-#dp-admin .dp-panel a.dropplets:hover,
-#dp-admin .dp-panel a.dropplets-text:hover {
-    box-shadow: inset 0 0 20px rgba(20, 100, 140, 0.75);
-    text-shadow: 0 0 10px rgba(20, 100, 140, 0.75);
-}
-
-#dp-admin .dp-panel img {
-    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
     width: 160px;
     height: 160px;
     float: left;
     margin: -80px 0 0 80px;
-    -moz-transition-duration: 0.1s;
-    -webkit-transition-duration: 0.1s;
 }
 
-body.install form,
-#dp-admin .dp-panel form {
+.dp-panel .dp-panel a.dropplets:hover,
+.dp-panel .dp-panel a.dropplets-text:hover {
+    box-shadow: inset 0 0 20px rgba(20, 100, 140, 0.75);
+    text-shadow: 0 0 10px rgba(20, 100, 140, 0.75);
+}
+
+body.dp-install form {
     border: 1px solid rgba(0, 0, 0, 0.15);
     background-color: rgba(0, 0, 0, 0.01);
     width: 320px;
@@ -139,13 +83,7 @@ body.install form,
     margin: -171px 0 0 -161px;
 }
 
-#dp-admin .dp-panel form {    
-    height: 320px;
-    margin-top: -151px;
-}
-
-body.install form h2,
-#dp-admin .dp-panel form h2 {
+body.dp-install form h2 {
     font-size: 20px;
     color: #404040;
     font-weight: normal;
@@ -155,35 +93,14 @@ body.install form h2,
     margin: 24px 0 10px;
 }
 
-body.install form p,
-#dp-admin .dp-panel form p {
+body.dp-install form p {
     width: 300px;
     float: left;
     margin: 0 0 24px;
     padding: 0 10px;
 }
 
-#dp-admin .dp-panel form span {
-    font-size: 12px;
-    color: #cccccc;
-    background-color: #f6f6f6;
-    width: 300px;
-    float: left;
-    margin: 0 0 0 10px;
-    padding: 2px 0 3px;
-}
-
-#dp-admin .dp-panel form span a {
-    color: #cccccc;
-    text-decoration: underline;
-}
-
-#dp-admin .dp-panel form a.error {
-    color: #e77556;
-}
-
-body.install form input[type="password"],
-#dp-admin .dp-panel form input[type="password"] {
+body.dp-install form input[type="password"] {
     background-color: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.15);
     outline: none;
@@ -199,12 +116,7 @@ body.install form input[type="password"],
     padding: 10px 20px;
 }
 
-#dp-admin .dp-panel form input[type="password"] {
-    margin-bottom: 0px;
-}
-
-body.install form button,
-#dp-admin .dp-panel form button {
+body.dp-install form button {
     background-color: #4ebb44;
     border: none;
     font-family: "dropplets";
@@ -223,13 +135,12 @@ body.install form button,
     -webkit-transition-duration: 0.1s;
 }
 
-body.install form button:hover,
-#dp-admin .dp-panel form button:hover {
+body.dp-install form button:hover {
     box-shadow: inset 0 0 20px rgba(54, 124, 49, 0.75);
     text-shadow: 0 0 10px rgba(54, 124, 49, 0.75);
 }
 
-/* Typography
+/* Icon Font
 *********************************************************************************************/
 
 @font-face {
@@ -243,390 +154,405 @@ body.install form button:hover,
 	font-style: normal;
 }
 
-/* Toolbar
+/* Icon Classes
 *********************************************************************************************/
 
-#dp-admin #dp-tools {
-    font: 16px/16px "dropplets";
-    text-align: center;
-    position: fixed;
-    width: 35px;
-    top: 10px !important;
-    left: 10px !important;
-    margin: 0;
-    z-index: 2000;
+.dp-icon-dropplets, .dp-icon-key, .dp-icon-settings, .dp-icon-templates, .dp-icon-close, .dp-icon-checkmark, .dp-icon-preview, .dp-icon-question, .dp-icon-twitter, .dp-icon-edit, .dp-icon-grid {
+	font-family: 'dropplets';
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	-webkit-font-smoothing: antialiased;
 }
-
-#dp-admin #dp-tools li {
-    list-style: none;
+.dp-icon-dropplets:before {
+	content: "\64";
 }
-
-#dp-admin #dp-tools li span {
-    background-color: #f44200;
-    position: absolute;
-    z-index: 950;
-    color: #ffffff;
-    font-size: 11px;
-    line-height: 1;
-    width: 18px;
-    height: 15px;
-    text-align: center;
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-    margin: 0 0 0 1px;
-    padding: 3px 0 0 0;
-    box-shadow: inset 2px 0 0 0 rgba(0, 0, 0, 0.15);
+.dp-icon-key:before {
+	content: "\6c";
 }
-
-#dp-admin #dp-tools li span.error {
-    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-    width: 260px;
-    height: 32px;
-    padding: 0;
-    border-radius: 0;
-    box-shadow: none;
-    font-size: 12px;
-    line-height: 32px;
+.dp-icon-settings:before {
+	content: "\73";
 }
-
-#dp-admin #dp-tools li,
-#dp-admin #dp-tools li a,
-#dp-admin #dp-tools li label {
-    width: 35px;
-    height: 35px;
-    line-height: 35px;
-    float: left;
-    margin-bottom: 1px;
-    overflow: hidden;
+.dp-icon-templates:before {
+	content: "\74";
 }
-
-#dp-admin #dp-tools li img {
-    width: 35px;
-    height: 35px;
+.dp-icon-close:before {
+	content: "\63";
 }
-
-#dp-admin #dp-tools li span.error a {
-    width: auto;
-    float: none;
-    background: none;
-    color: #ffffff;
-    text-decoration: underline;
+.dp-icon-checkmark:before {
+	content: "\6b";
 }
-
-#dp-admin #dp-tools li a,
-#dp-admin #dp-tools li label {
-    background-color: #f0f2f4;
-    color: #89949b;
+.dp-icon-preview:before {
+	content: "\70";
+}
+.dp-icon-question:before {
+	content: "\71";
+}
+.dp-icon-twitter:before {
+	content: "\65";
 }
+.dp-icon-edit:before {
+	content: "\69";
+}
+.dp-icon-grid:before {
+	content: "\61";
+}
+
+/* Side Admin Panel
+*********************************************************************************************/
 
-#dp-admin #dp-tools li a.dp-login,
-#dp-admin #dp-tools li a.dp-login:hover {
-    background-color: #333332;
+#dp-dropplets-icon {
+    background-color: #464646;
+    font-family: "dropplets";
+    font-size: 16px;
     color: #ffffff;
+    text-align: center;
+    line-height: 35px;
+    width: 35px;
+    height: 35px;
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    z-index: 80000;
 }
 
-#dp-admin #dp-tools li a.dp-login:hover {
+#dp-dropplets-icon:hover {
     box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.75);
     text-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
 }
 
-#dp-admin #dp-tools li a.error {
-    background-color: #f44200;
-    color: #ffffff;
+.dp-panel-wrapper {
+    width: 280px;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: -300px;
+    z-index: 100000;
+    overflow: hidden;
+    box-shadow: 0 0 3px rgba(0,0,0,0.5);
 }
 
-#dp-admin #dp-tools li a.error:hover {
-    background-color: #f44200;
-    color: #ffffff;
-    box-shadow: inset 0 0 20px rgba(161, 44, 17, 0.75);
-    text-shadow: 0 0 10px rgba(161, 44, 17, 0.75);
+.dp-panel-wrapper.open {
+    left: 0px;
 }
 
-#dp-admin #dp-tools li label {
-    cursor: pointer;
+.dp-panel {
+    background-color: rgba(255, 255, 255, 0.95);
+    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+    font-size: 13px;
+    line-height: 25px;
+    color: #303030;
+    width: 280px;
+    height: 100%;
+    padding-right: 20px;
+    overflow-y: scroll;
+    overflow-x: hidden;
 }
 
-#dp-admin #dp-tools li a:hover,
-#dp-admin #dp-tools li a.selected,
-#dp-admin #dp-tools li label:hover {
-    color: #1096d7;
+.dp-panel ::-webkit-scrollbar { 
+    display: none; 
 }
 
-#dp-admin #dp-tools li:last-child a {
-    margin: 0;
+.dp-sub-panel {
+    display: none;
 }
 
-/* Uploader
-*********************************************************************************************/
-
-#dp-uploaded .success
-#dp-error .error {
-    font: 60px/100px "dropplets";
-    background-color: #4ebb44;
-    color: #ffffff;
-    text-align: center;
-    width: 100px;
-    height: 100px;
-    position: absolute;
-    top: 50%;
-    margin-top: -50px;
-    left: 50%;
-    margin-left: -50px;
+.dp-sub-panel.expanded {
+    display: block;
 }
 
-/* Cards
-*********************************************************************************************/
-
-#dp-admin .dp-card {
-    background-color: #f0f2f4;
-    position: fixed;
-    top: 10px;
-    left: -800px;
-    z-index: 1000;
+.dp-panel .dp-row .title {
+    font-size: 14px;
+    font-weight: bold;
 }
 
-#dp-admin .dp-card.shown {
-    left: 46px;
+.dp-panel a {
+    color: #303030;
 }
 
-#dp-admin .dp-card.small {
-    width: 300px;
-    height: 32px;
+.dp-panel .dp-row p {
+    font-size: 12px;
+    margin: 0 0 4px;
+    line-height: 16px;
 }
 
-#dp-admin .dp-card.post {
-    width: 300px;
-    height: 300px;
+.dp-panel .dp-row {
+    width: 260px;
+    min-height: 25px;
+    float: left;
+    padding: 10px;
+    position: relative;
+    border-bottom: 1px solid rgba(0,0,0,0.05);
 }
 
-#dp-admin .dp-card.medium {
-    width: 400px;
-    height: 600px;
+.dp-panel .dp-link {
+    width: 235px;
+    min-height: 45px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    cursor: pointer;
 }
 
-#dp-admin .dp-card.large {
-    width: 700px;
-    height: 700px;
-    overflow: scroll;
+.dp-panel .dp-link:hover {
+    background-color: rgba(255, 255, 255, 0.2);
 }
 
-/* Form Styles
-*********************************************************************************************/
-
-#dp-admin .dp-card.small form {
-    width: 300px;
-    height: 32px;
+.dp-panel .dp-row .dp-icon {
+    font-family: "dropplets";
+    font-size: 16px;
+    color: #464646;
+    text-align: center;
+    width: 25px;
+    height: 25px;
     float: left;
+    padding-right: 10px;
 }
 
-#dp-admin .dp-card.medium form {
-    width: 400px;
-    height: 600px;
-    float: left;
-    overflow-x: scroll;
+.dp-panel .dp-row .dp-icon.dp-icon-large {
+    font-size: 24px;
 }
 
-body.install #dp-admin .dp-card.medium form {
-    overflow: hidden;
+.dp-panel .dp-row.dp-editable .dp-icon {
+    color: #9e9e9e;
 }
 
-#dp-admin .dp-card.large form {
-    width: 175px;
-    height: 175px;
-    float: left;
-    position: relative;
-    
+.dp-panel .dp-row.dp-editable-dark .dp-icon {
+    color: #464646;
 }
 
-#dp-admin .dp-card .input {
-    width: 100%;
+.dp-panel .dp-row .dp-content {
+    width: 220px;
     float: left;
-    position: relative;
 }
 
-#dp-admin .dp-card .hidden {
-    display: none;
+.dp-panel .dp-row.profile img{
+    background-color:  #ffffff;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    float: left;
+    margin: -2px 0 0 -2px;
 }
 
-#dp-admin .dp-card label {
-    background-color: #e4e8ea;
-    text-transform: uppercase;
-    color: #89949b;
-    width: 360px;
-    float: left;
-    padding: 6px 20px 6px;
-    font: 12px/12px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+/* Form Styles
+*********************************************************************************************/
+
+.dp-panel .dp-row.dp-editable .dp-content label {
+    color: #9e9e9e;
+    line-height: 45px;
+    width: 215px;
+    height: 45px;
+    position: absolute;
+    top: 0;
+    left: 45px;
 }
 
-#dp-admin .dp-card.large label {
-    width: 660px;
+.dp-panel .dp-row.dp-editable-dark .dp-content label {
+    color: #464646;
 }
 
-#dp-admin .dp-card input[type="text"],
-#dp-admin .dp-card input[type="password"],
-#dp-admin .dp-card input[type="email"],
-#dp-admin .dp-card textarea {
-    background-color: #f0f2f4;
+.dp-panel .dp-row.dp-editable .dp-content input[type="text"],
+.dp-panel .dp-row.dp-editable .dp-content input[type="password"],
+.dp-panel .dp-row.dp-editable .dp-content input[type="email"],
+.dp-panel .dp-row.dp-editable .dp-content textarea {
+    background: none;
     border: none;
     outline: none;
-    color: #929da3;
-    width: 360px;
+    resize: none;
+    font-size: 12px;
+    color: #464646;
     float: left;
+    width: 220px;
     margin: 0;
-    padding: 15px 20px;
+    opacity: 0;
     font: 14px/22px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+    -moz-transition-duration: 0.1s;
+    -webkit-transition-duration: 0.1s;
 }
 
-#dp-admin .dp-card.small input[type="password"] {
-    width: 280px;
-    font-size: 12px;
-    line-height: 12px;
-    padding: 10px 10px 9px;
+@-moz-document url-prefix() { 
+    .dp-panel .dp-row.dp-editable .dp-content input[type="text"],
+    .dp-panel .dp-row.dp-editable .dp-content input[type="password"],
+    .dp-panel .dp-row.dp-editable .dp-content input[type="email"],
+    .dp-panel .dp-row.dp-editable .dp-content textarea {
+        margin-top: 3px;
+    }
+    
+    .dp-panel .dp-row.dp-editable .dp-content textarea {
+        width: 230px;
+        padding-right: 40px;
+    }
 }
 
-#dp-admin .dp-card textarea {
-    height: 200px;
-    resize: none;
+.dp-panel .dp-row.dp-editable-dark .dp-content input[type="password"] {
+    color: #464646;
+}
+
+.dp-panel .dp-row.dp-editable .dp-content input[type="text"]:focus,
+.dp-panel .dp-row.dp-editable .dp-content input[type="password"]:focus,
+.dp-panel .dp-row.dp-editable .dp-content input[type="email"]:focus,
+.dp-panel .dp-row.dp-editable .dp-content textarea:focus {
+    opacity: 1;
 }
 
-#dp-admin .dp-card textarea.code {
-    font-family: "Courier New", Courier, mono;
+.dp-panel .dp-row.dp-editable textarea {
+    height: 20px;
 }
 
-body.install #dp-admin .dp-card textarea {
-    height: 165px;
+.dp-panel .dp-row.dp-editable textarea:focus {
+    height: auto;
 }
 
-#dp-admin .dp-card input[type="text"]:focus,
-#dp-admin .dp-card input[type="password"]:focus,
-#dp-admin .dp-card input[type="email"]:focus,
-#dp-admin .dp-card textarea:focus {
-    background-color: #f5f7f8;
-    color: #333b3f;
+.dp-panel .dp-row.dp-editable ::-webkit-input-placeholder {
+   font-size: 13px;
+   color: #303030;
 }
 
-#dp-admin .dp-card input[type="submit"],
-#dp-admin .dp-card button,
-#dp-admin .dp-card a {
+.dp-panel .dp-row.dp-editable input[type="submit"],
+.dp-panel .dp-row.dp-editable button,
+.dp-panel .dp-row .dp-button,
+.dp-panel .dp-row .dp-number {
     background-color: #4ebb44;
     border: none;
     font-family: "dropplets";
     color: #ffffff;
-    font-size: 30px;
+    font-size: 13px;
+    line-height: 22px;
     text-align: center;
-    width: 60px;
-    height: 60px;
+    width: 25px;
+    height: 25px;
     position: absolute;
-    bottom: 10px;
+    top: 10px;
     right: 10px;
     cursor: pointer;
     -webkit-appearance: none;
     z-index: 20;
 }
 
-#dp-admin .dp-card button.active {
-    background-color: #1096d7;
+.dp-panel .dp-row.dp-editable input[type="submit"]:hover,
+.dp-panel .dp-row.dp-editable button:hover,
+.dp-panel .dp-row .dp-button:hover {
+    box-shadow: inset 0 0 10px rgba(54, 124, 49, 0.65);
+    text-shadow: 0 0 5px rgba(54, 124, 49, 0.65);
 }
 
-#dp-admin .dp-card input[type="submit"]:hover,
-#dp-admin .dp-card button:hover,
-#dp-admin .dp-card a:hover {
-    box-shadow: inset 0 0 20px rgba(54, 124, 49, 0.75);
-    text-shadow: 0 0 10px rgba(54, 124, 49, 0.75);
+.dp-panel .dp-row a.dp-button.dp-button-dark,
+.dp-panel .dp-row .dp-number.dp-number-dark {
+    background-color: #464646;
+    font-size: 11px;
+    line-height: 24px;
 }
 
-#dp-admin .dp-card.large input[type="submit"],
-#dp-admin .dp-card.large button,
-#dp-admin .dp-card.large a,
-#dp-admin .dp-card.small input[type="submit"],
-#dp-admin .dp-card.small button,
-#dp-admin .dp-card.small a {
-    font-size: 16px;
-    line-height: 29px;
-    width: 32px;
-    height: 32px;
-    top: 0;
-    right: 0;
+.dp-panel .dp-row a.dp-button.dp-button-dark:hover {
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.65);
+    text-shadow: 0 0 5px rgba(0, 0, 0, 0.65);
 }
 
-#dp-admin .dp-card.small a {
-    background-color: #1096d7;
-    font-size: 18px;
-    line-height: 32px;
-    right: -33px;
+.dp-panel .dp-row .dp-number.dp-number-dark {
+    font: 12px/25px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+    cursor: auto;
 }
 
-#dp-admin .dp-card.large input[type="submit"],
-#dp-admin .dp-card.large button,
-#dp-admin .dp-card.large a {
-    top: 138px;
-    right: 5px;
-}
-
-/* Templates
+/* Template Styles
 *********************************************************************************************/
 
-#dp-admin .dp-card.large a.buy {
-    width: auto;
-    padding-left: 10px;
-    padding-right: 10px;
-    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-    font-size: 13px;
-    line-height: 31px;
-    right: 38px;
+.dp-panel .dp-row.dp-templates {
+    padding-bottom: 0;
 }
 
-#dp-admin .dp-card.large a.preview {
-    background-color: #1096d7;
-    line-height: 32px;
-    z-index: 20;
+.dp-panel .dp-row.dp-templates li {
+    list-style: none;
+    margin: 0 10px 10px 0;
+    position: relative;
 }
 
-#dp-admin .dp-card.large a.preview:hover {
-    box-shadow: inset 0 0 20px rgba(20, 100, 140, 0.75);
-    text-shadow: 0 0 10px rgba(20, 100, 140, 0.75);
+.dp-panel .dp-row.dp-templates li:nth-child(even) {
+    margin: 0 0 10px 0;
 }
 
-#dp-admin .dp-card.large li {
-    list-style: none;
-    width: 175px;
-    height: 175px;
+.dp-panel .dp-row.dp-templates li,
+.dp-panel .dp-row.dp-templates li img {
+    width: 125px;
+    height: 125px;
     float: left;
-    position: relative;
-    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.15);
 }
 
-#dp-admin .dp-card.large li .shadow {
-    width: 175px;
-    height: 175px;
+.dp-panel .dp-row.dp-templates li button {
+    width: 125px;
+    height: 125px;
     position: absolute;
-    z-index: 10;
     top: 0;
     left: 0;
-    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.25);
+    opacity: 0;
+    cursor: pointer;
+}
+
+.dp-panel .dp-row.dp-templates li img {
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
     -moz-transition-duration: 0.1s;
     -webkit-transition-duration: 0.1s;
+    opacity: 0.5;
 }
 
-#dp-admin .dp-card.large li:hover .shadow,
-#dp-admin .dp-card.large li.active .shadow {
-    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1);
+.dp-panel .dp-row.dp-templates li:hover img,
+.dp-panel .dp-row.dp-templates li.active img,
+.dp-panel .dp-row.dp-templates li.premium img {
+    opacity: 1;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
 }
 
-#dp-admin .dp-card.large li img {
-    width: 175px;
-    height: 175px;
-    float: left;
-    -webkit-filter: grayscale(100%);
-    -moz-filter: grayscale(100%);
-    filter: grayscale(100%);
-    -moz-transition-duration: 0.1s;
-    -webkit-transition-duration: 0.1s;
+/* Premium Template Styles
+*********************************************************************************************/
+
+.dp-panel .dp-row.dp-templates li a.buy,
+.dp-panel .dp-row.dp-templates li a.preview {
+    height: 20px;
+    line-height: 20px;
+    position: absolute;
+    bottom: -1px;
+    color: #ffffff;
+    font-size: 11px;
+    text-align: center;
+}
+
+.dp-panel .dp-row.dp-templates li a.buy {
+    background-color: #4ebb44;
+    width: 85px;
+    left: 0;
+}
+
+.dp-panel .dp-row.dp-templates li a.buy:hover {
+    box-shadow: inset 0 0 10px rgba(54, 124, 49, 0.45);
+    text-shadow: 0 0 5px rgba(54, 124, 49, 0.45);
 }
 
-#dp-admin .dp-card.large li:hover img,
-#dp-admin .dp-card.large li.active img {
-    -webkit-filter: grayscale(0%);
-    -moz-filter: grayscale(0%);
-    filter: grayscale(0%);
+.dp-panel .dp-row.dp-templates li a.preview {
+    background-color: #1096d7;
+    font-family: "dropplets";
+    width: 40px;
+    right: 0;
+}
+
+.dp-panel .dp-row.dp-templates li a.preview:hover {
+    box-shadow: inset 0 0 10px rgba(20, 100, 140, 0.45);
+    text-shadow: 0 0 5px rgba(20, 100, 140, 0.45);
 }
+
+/* Uploader
+*********************************************************************************************/
+
+#dp-uploaded .success,
+#dp-error .error {
+    background-color: rgba(255, 255, 255, 0.5);
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 220000;
+    -moz-transition-duration: 0.5s;
+    -webkit-transition-duration: 0.5s;
+}
\ No newline at end of file
diff --git a/dropplets/tools.php b/dropplets/tools.php
index a7540867..dac498b6 100644
--- a/dropplets/tools.php
+++ b/dropplets/tools.php
@@ -8,39 +8,44 @@
 
 if (!isset($_SESSION['user'])) { ?>
 
-<div id="dp-admin">
-    <ul id="dp-tools">
-        <li>
-            <a class="view-panel<?php if (isset($login_error)) { ?> error<?php } else { ?> dp-login<?php }; ?>" href="#dp-login"><?php if (isset($login_error)) { ?>c<?php } else { ?>d<?php }; ?></a>
-        </li>
-    </ul>
-    
-    <div class="dp-panel" id="dp-login">
-        <a class="dropplets" href="http://dropplets.com" target="_blank">d</a>
-        <a class="dropplets-text" href="http://dropplets.com" target="_blank">Powered by Dropplets</a> 
-        
-        <form method="POST" action="?action=login">
-            <a class="close-panel" href="#dp-login"><img src="<?php echo get_twitter_profile_img(BLOG_TWITTER); ?>" alt="<?php echo(BLOG_TITLE); ?>" /></a>
-            
-            <h2>Welcome Back!</h2>
-            <p>Enter your password below to login.</p>
+<div class="dp-panel-wrapper <?php if($_COOKIE['dp-panel']) { echo($_COOKIE['dp-panel']); } ?>" id="dp-dropplets">
+    <div class="dp-panel">
+        <div class="dp-row profile">
+            <div class="dp-icon">
+                <img src="<?php echo get_twitter_profile_img(BLOG_TWITTER); ?>" alt="<?php echo(BLOG_TITLE); ?>" />
+            </div>
             
-            <fieldset>
-                <div class="input">
-                    <input type="password" name="password" id="password" placeholder="Enter Your Password">
-                </div>
-            </fieldset>
+            <div class="dp-content">
+                <span class="title">Hey There!</span>
+                <a class="dp-button dp-button-dark dp-close dp-icon-close" href="#dp-dropplets"></a>
+            </div>
+        </div>
+        
+        <div class="dp-row dp-editable dp-editable-dark">
+            <div class="dp-icon dp-icon-key"></div>
             
-            <?php if (isset($login_error)) { ?>
-                <span><a class="error" href="?action=forgot">Did you forget your password?</a></span>
-            <?php } else { ?>
-                <span><a href="http://dropplets.com" target="_blank">What is This?</a></span>
-            <?php }; ?>
-    
-            <button type="submit" name="submit" value="submit">k</button>
-        </form>    
+            <div class="dp-content">
+                <form method="POST" action="?action=login">
+                    <label>Enter Your Password</label>
+                    <input type="password" name="password" id="password">
+                    <button class="dp-icon-checkmark" type="submit" name="submit" value="submit"></button>
+                </form>
+            </div>
+        </div>
+        
+        <?php if (isset($login_error)) { ?>
+        <div class="dp-row">
+            <div class="dp-icon dp-icon-large dp-icon-question"></div>
+            <div class="dp-content">Forget Your password?</div>
+            <a class="dp-link" href="?action=forgot" target="_blank"></a>
+        </div>    
+        <?php }; ?>
         
-        <a class="dp-close close-panel" href="#dp-login">c</a>   
+        <div class="dp-row">
+            <div class="dp-icon dp-icon-dropplets"></div>
+            <div class="dp-content">What is This?</div>
+            <a class="dp-link" href="http://dropplets.com" target="_blank"></a>
+        </div>
     </div>
 </div>
 
@@ -52,109 +57,153 @@
 
 } else { ?>
 
-<div id="dp-admin">
-    <ul id="dp-tools">
-        <li>
-            <label for="postfiles">d</label>
-            <input style="display: none;" type="file" name="postfiles" id="postfiles" class="postfiles" multiple="multiple" />
-        </li>
-        <li><a class="view" href="#dp-settings">s</a></li>
-        <li><a class="view" href="#dp-templates">t</a></li>
-        <li><a href="?action=logout">l</a></li>
-    </ul>
-    
-    <div class="dp-card post" id="dp-post">
-        <div id="publish">
-            <div id="dropbox">
-                <!-- Drag & Drop Publishing -->
+<div class="dp-panel-wrapper <?php if($_COOKIE['dp-panel']) { echo($_COOKIE['dp-panel']); } ?>" id="dp-dropplets">
+    <div class="dp-panel">
+        <div class="dp-row profile">
+            <div class="dp-icon">
+                <img src="<?php echo get_twitter_profile_img(BLOG_TWITTER); ?>" alt="<?php echo(BLOG_TITLE); ?>" />
             </div>
-    
-            <div id="loader">
-                <!-- The Publishing Loader -->
+            
+            <div class="dp-content">
+                <span class="title">Welcome Back!</span>
+                <a class="dp-button  dp-button-dark dp-close  dp-icon-close" href="#dp-dropplets"></a>
             </div>
         </div>
-    </div>
-    
-    <div class="dp-card medium" id="dp-settings">
+        
+        <div class="dp-row">
+            <div class="dp-icon dp-icon-dropplets"></div>
+            <div class="dp-content">Publish or Update Posts</div>
+            <label class="dp-link" for="postfiles"></label>
+            <input style="display: none;" type="file" name="postfiles" id="postfiles" class="postfiles" multiple="multiple" />
+        </div>
+        
         <form method="POST" action="./dropplets/save.php">
-            <fieldset>
-                <div class="input">
-                    <label>Blog Email</label>
-                    <input type="text" name="blog_email" id="blog_email" required value="<?php echo BLOG_EMAIL; ?>">
-                </div>
-    
-                <div class="input">
-                    <label>Blog Twitter ID</label>
-                    <input type="text" name="blog_twitter" id="blog_twitter" required value="<?php echo BLOG_TWITTER; ?>">
-                </div>
-            </fieldset>
-    
-            <fieldset>
-                <div class="input hidden">
-                    <input type="text" name="blog_url" id="blog_url" required readonly value="<?php echo BLOG_URL; ?>">
-                </div>
-    
-                <div class="input">
-                    <label>Blog Title</label>
-                    <input type="text" name="blog_title" id="blog_title" required value="<?php echo BLOG_TITLE; ?>">
-                </div>
-    
-                <div class="input">
-                    <label>Blog Description</label>
-                    <textarea name="meta_description" id="meta_description" rows="6" required placeholder="Add your site description here... just a short sentence that describes what your blog is going to be about."><?php echo META_DESCRIPTION; ?></textarea>
+            <div class="dp-row">
+                <div class="dp-icon dp-icon-settings"></div>
+                <div class="dp-content">Blog Settings</div>                
+                <a class="dp-link dp-toggle <?php if($_COOKIE['#dp-settings']) { echo($_COOKIE['#dp-settings']); } ?>" href="#dp-settings"></a>
+                <button class="dp-button" type="submit" name="submit" value="submit">k</button>
+            </div>
+            
+            <div class="dp-sub-panel <?php if($_COOKIE['#dp-settings']) { echo($_COOKIE['#dp-settings']); } ?>" id="dp-settings">
+                <div class="dp-row dp-editable">
+                    <div class="dp-icon dp-icon-edit"></div>
+                    
+                    <div class="dp-content">
+                        <label>Blog Email</label>
+                        <input type="text" name="blog_email" id="blog_email" required value="<?php echo BLOG_EMAIL; ?>">
+                    </div>
                 </div>
-            </fieldset>
-    
-            <fieldset>
-                <div class="input">
-                    <label>Intro Title</label>
-                    <input type="text" name="intro_title" id="intro_title" required value="<?php echo INTRO_TITLE; ?>">
+                
+                <div class="dp-row dp-editable">
+                    <div class="dp-icon dp-icon-edit"></div>
+                    
+                    <div class="dp-content">
+                        <label>Blog Twitter</label>
+                        <input type="text" name="blog_twitter" id="blog_twitter" required value="<?php echo BLOG_TWITTER; ?>">
+                    </div>
                 </div>
-    
-                <div class="input">
-                    <label>Intro Text</label>
-                    <textarea name="intro_text" id="intro_text" rows="12" required><?php echo INTRO_TEXT; ?></textarea>
+                
+                <div class="dp-row dp-editable">
+                    <div class="dp-icon dp-icon-edit"></div>
+                    
+                    <div class="dp-content">
+                        <label>Blog Title</label>
+                        <input type="text" name="blog_title" id="blog_title" required value="<?php echo BLOG_TITLE; ?>">
+                    </div>
                 </div>
-            </fieldset>
-    
-            <fieldset>
-                <div class="input">
-                    <label>Password</label>
-                    <input type="password" name="password" id="password" value="">
+                
+                <div class="dp-row dp-editable">
+                    <div class="dp-icon dp-icon-edit"></div>
+                    
+                    <div class="dp-content">
+                        <label>Blog Description</label>
+                        <textarea name="meta_description" id="meta_description" rows="6" required placeholder="Add your site description here... just a short sentence that describes what your blog is going to be about."><?php echo META_DESCRIPTION; ?></textarea>
+                    </div>
                 </div>
-            </fieldset>
-    
-            <fieldset class="last">
-                <div class="input">
-                    <label>Header Injection (e.g. Custom Styles)</label>
-                    <textarea class="code" name="header_inject" id="header_inject" rows="12"><?php echo HEADER_INJECT; ?></textarea>
+                
+                <div class="dp-row dp-editable">
+                    <div class="dp-icon dp-icon-edit"></div>
+                    
+                    <div class="dp-content">
+                        <label>Intro Title</label>
+                        <input type="text" name="intro_title" id="intro_title" required value="<?php echo INTRO_TITLE; ?>">
+                    </div>
                 </div>
-    
-                <div class="input">
-                    <label>Footer Injection (e.g. Tracking Code)</label>
-                    <textarea class="code" name="footer_inject" id="footer_inject" rows="12"><?php echo FOOTER_INJECT; ?></textarea>
+                
+                <div class="dp-row dp-editable">
+                    <div class="dp-icon dp-icon-edit"></div>
+                    
+                    <div class="dp-content">
+                        <label>Intro Text</label>
+                        <textarea name="intro_text" id="intro_text" rows="12" required><?php echo INTRO_TEXT; ?></textarea>
+                    </div>
                 </div>
-            </fieldset>
-    
-            <button type="submit" name="submit" value="submit">k</button>
+            </div>
         </form>
-    </div>
-    
-    <div class="dp-card large" id="dp-templates">
-        <label>Installed Templates</label>
-        <?php get_installed_templates('all'); ?>
         
-        <div class="shadow one"></div>
-        <label>Featured Premium Templates</label>
-        <?php get_premium_templates('featured'); ?>
+        <div class="dp-row">
+            <div class="dp-icon dp-icon-large dp-icon-grid"></div>
+            <div class="dp-content">Installed Templates</div>        
+            <a class="dp-link dp-toggle <?php if($_COOKIE['#dp-templates']) { echo($_COOKIE['#dp-templates']); } ?>" href="#dp-templates"></a>
+        </div>
+        
+        <div class="dp-sub-panel <?php if($_COOKIE['#dp-templates']) { echo($_COOKIE['#dp-templates']); } ?>" id="dp-templates">
+            <div class="dp-row dp-templates">
+                <?php get_installed_templates('all'); ?>
+            </div>
+        </div>
         
-        <div class="shadow two"></div>
-        <label>Popular Premium Templates</label>
-        <?php get_premium_templates('popular'); ?>
+        <div class="dp-row">
+            <div class="dp-icon dp-icon-templates"></div>
+            <div class="dp-content">Featured Templates</div>
+            <a class="dp-link dp-toggle <?php if($_COOKIE['#dp-featured']) { echo($_COOKIE['#dp-featured']); } ?>" href="#dp-featured"></a>
+            <span class="dp-number dp-number-dark"><?php count_premium_templates('featured'); ?></span>
+        </div>
         
-        <div class="shadow three"></div>
-        <label>All Premium Templates</label>
-        <?php get_premium_templates('all'); ?>
+        <div class="dp-sub-panel <?php if($_COOKIE['#dp-featured']) { echo($_COOKIE['#dp-featured']); } ?>" id="dp-featured">
+            <div class="dp-row dp-templates">
+                <?php get_premium_templates('featured'); ?>
+            </div>
+        </div>
+        
+        <div class="dp-row">
+            <div class="dp-icon dp-icon-templates"></div>
+            <div class="dp-content">Popular Templates</div>
+            <a class="dp-link dp-toggle <?php if($_COOKIE['#dp-popular']) { echo($_COOKIE['#dp-popular']); } ?>" href="#dp-popular"></a>        
+            <span class="dp-number dp-number-dark"><?php count_premium_templates('popular'); ?></span>
+        </div>
+        
+        <div class="dp-sub-panel <?php if($_COOKIE['#dp-popular']) { echo($_COOKIE['#dp-popular']); } ?>" id="dp-popular">
+            <div class="dp-row dp-templates">
+                <?php get_premium_templates('popular'); ?>
+            </div>
+        </div>
+        
+        <div class="dp-row">
+            <div class="dp-icon dp-icon-templates"></div>
+            <div class="dp-content">All Templates</div>
+            <a class="dp-link dp-toggle <?php if($_COOKIE['#dp-all']) { echo($_COOKIE['#dp-all']); } ?>" href="#dp-all"></a>
+            <span class="dp-number dp-number-dark"><?php count_premium_templates('all'); ?></span>
+        </div>
+        
+        <div class="dp-sub-panel <?php if($_COOKIE['#dp-all']) { echo($_COOKIE['#dp-all']); } ?>" id="dp-all">
+            <div class="dp-row dp-templates">
+                <?php get_premium_templates('all'); ?>
+            </div>
+        </div>
+        
+        <div class="dp-row">
+            <div class="dp-icon dp-icon-large dp-icon-question"></div>
+            <div class="dp-content">Need Some Help?</div>
+            <a class="dp-link" href="mailto:support@dropplets.com"></a>
+        </div>
+        
+        <div class="dp-row">
+            <div class="dp-icon dp-icon-key"></div>
+            <div class="dp-content">Log Out</div>
+            <a class="dp-link" href="?action=logout" title="Logout"></a>
+        </div>
     </div>
 </div>
 
@@ -168,39 +217,45 @@
 
 ?>
 
+<a class="dp-open dp-icon-dropplets" id="dp-dropplets-icon" href="#dp-dropplets"></a>
+
+<script type="text/javascript" src="<?php echo(BLOG_URL); ?>dropplets/includes/js/cookies.js"></script>
 <script type="text/javascript">
     jQuery(document).ready(function($) {
-        $(".view").click(function(){
-            $(".view").removeClass('selected'); 
-            $(this).addClass('selected');
+        $(".dp-open").click(function(){
             var myelement = $(this).attr("href")
-            $(myelement).animate({left:"46px"}, 200);
-            $(".dp-card:visible").not(myelement).animate({left:"-800px"}, 100);
+            $(myelement).animate({left:"0"}, 200);
+            $.cookies.set('dp-panel', 'open');
             $("body").css({ overflow: 'hidden' });
             return false;
         });
         
-        $(".view-panel").click(function(){
+        $(".dp-close").click(function(){
             var myelement = $(this).attr("href")
-            $(myelement).fadeIn(200);
-            $("body").css({ overflow: 'hidden' });
+            $(myelement).animate({left:"-300px"}, 200);
+            $.cookies.set('dp-panel', 'closed');
+            $("body").css({ overflow: 'scroll' });
             return false;
         });
         
-        $(".close-panel").click(function(){
+        $(".dp-toggle").click(function(){
             var myelement = $(this).attr("href")
-            $(myelement).fadeOut(100);
-            $("body").css({ overflow: 'scroll' });
+            $(myelement).toggle(100);
+            $.cookies.set(myelement, 'expanded');
             return false;
         });
         
-        $(document).keydown(function(e) {            
-            // Close all panels
-            if (e.keyCode == 27) {
-                $(".view").removeClass('selected'); 
-                $(".dp-card:visible").animate({left:"-800px"}, 100);
-                $("body").css({ overflow: 'scroll' });
-            }
+        $(".expanded").click(function(){
+            var myelement = $(this).attr("href")
+            $.cookies.set(myelement, 'collapsed');
+        });
+        
+        // For Input Labels
+        $('input, textarea').focus(function () {
+            $(this).prev('label').hide(200);
+        })
+        .blur(function () {
+            $(this).prev('label').show(200);
         });
     });
 </script>
@@ -219,9 +274,8 @@
         $('.postfiles').liteUploader(
 		{
 			script: './dropplets/includes/uploader.php',
-			// allowedFileTypes: 'image/jpeg,image/jpg,image/png,doc/md', need to figure this out
 			maxSizeInBytes: 1048576,
-			typeMessage: 'You can put your custom type validation message here',
+			typeMessage: '',
 			before: function ()
 			{
 				$('#details').html('');
diff --git a/index.php b/index.php
index 93dddbdf..efc5d207 100644
--- a/index.php
+++ b/index.php
@@ -433,9 +433,9 @@
             <link rel="shortcut icon" href="./dropplets/style/images/favicon.png">
         </head>
 
-        <body class="install">
+        <body class="dp-install">
             <form method="POST" action="./dropplets/save.php">
-                <a class="dropplets" href="http://dropplets.com" target="_blank">d</a>
+                <a class="dp-icon-dropplets" href="http://dropplets.com" target="_blank"></a>
                 
                 <h2>Install Dropplets</h2>
                 <p>Welcome to an easier way to blog.</p>