Welcome to the future.

3 files changed, 106 insertions, 50 deletions

diff --git a/Cydia.app/menes/style.css b/Cydia.app/menes/style.css
index a7e1949..d9915c9 100644
--- a/Cydia.app/menes/style.css
+++ b/Cydia.app/menes/style.css
@@ -178,7 +178,7 @@ dialog > toolbar > a.forward-button {
     float: right;
 }
 /* }}} */
-/* fieldset {{{ */
+
 panel > block {
     background-color: #c7ced5;
     border-bottom: 1px solid #999999;
@@ -335,39 +335,37 @@ fieldset > div > select {
     -webkit-appearance: none;
 }
 
-fieldset > a,
-fieldset > div > select {
-    background: no-repeat url(chevron.png);
-}
-
-fieldset > a {
-    background-position-y: 13px;
-}
-
-fieldset > a.thumb {
-    background-position-y: 24px; 
-}
+/* Chevrons {{{ */
 
+fieldset > a[href],
 fieldset > div > select {
-    background-position-y: 11px;
+    background-repeat: no-repeat;
+    background-image: url(chevron.png);
+    background-position-y: center;
 }
 
-list > fieldset > a {
+/* Horizontal */
+
+list > fieldset > a[href] {
     background-position-x: 295px;
 }
 
-panel > fieldset > a {
+panel > fieldset > a[href] {
     background-position-x: 275px;
 }
 
+list > fieldset > a:not([href]) > select,
 list > fieldset > div > select {
     background-position-x: 192px;
 }
 
+panel > fieldset > a:not([href]) > select,
 panel > fieldset > div > select {
     background-position-x: 163px;
 }
 
+/* }}} */
+
 fieldset > textarea,
 fieldset > div > input,
 fieldset > div > select,
@@ -419,7 +417,7 @@ fieldset > div > div {
     width: 273px;
 }
 
-fieldset > a > div {
+fieldset > a:not(.thumb) > div {
     width: 250px;
 }
 
@@ -490,4 +488,3 @@ fieldset > a.thumb > back {
     top: -1px;
     width: 237px;
 }
-/* }}} */
diff --git a/Cydia.app/package.html b/Cydia.app/package.html
index 3e63475..75b86f0 100644
--- a/Cydia.app/package.html
+++ b/Cydia.app/package.html
@@ -14,7 +14,7 @@
             if (count++ != 0)
                 return;
             $("#depiction-load").remove();
-            $("#depiction-src").css("display" "block");
+            $("#depiction-src").css("display", "block");
         }
 
         var remove = function() {
@@ -24,6 +24,32 @@
     </script>
 
     <style>
+        .flip-180 {
+            -webkit-backface-visibility: hidden;
+            -webkit-transform: rotateY(180deg);
+            -webkit-transition-duration: 2s;
+            -webkit-transition-property: transform;
+        }
+
+        .flip-360 {
+            -webkit-backface-visibility: hidden;
+            -webkit-transform: rotateY(360deg);
+            -webkit-transition-duration: 2s;
+            -webkit-transition-property: transform;
+        }
+
+        .fade-out { 
+            opacity: 0;
+            -webkit-transition-property: opacity;
+            -webkit-transition-duration: 2s;
+        }
+
+        .fade-in { 
+            opacity: 1;
+            -webkit-transition-property: opacity;
+            -webkit-transition-duration: 2s;
+        }
+
         #remove {
             margin-top: 7px;
             text-align: center;
@@ -70,19 +96,25 @@
             color: red;
         }
 
-        #boundry {
+        #boundary {
             float: left;
+            height: 64;
             width: 64px;
         }
 
+        #thumb,
         #icon {
             background-position: center center;
             background-repeat: no-repeat;
-            -webkit-border-radius: 9px;
             height: 64px;
+            position: absolute;
             width: 64px;
         }
 
+        #thumb {
+            -webkit-border-radius: 9px;
+        }
+
         /* XXX: this style is out of date */
         #reflection {
             height: 59px;
@@ -118,7 +150,7 @@
         }
 
         #name {
-            margin-bottom: 10px;
+            margin-bottom: 13px;
             font-weight: bold;
             font-size: 17px;
             overflow: hidden;
@@ -186,9 +218,10 @@
 <dialog><panel>
 
 <fieldset id="header">
-    <div class="clearfix">
-        <div id="boundry">
-            <div id="icon"></div>
+    <div>
+        <div id="boundary">
+            <div class="flip-0" id="icon"></div>
+            <div class="flip-180" id="thumb"></div>
             <!--img id="reflection"/-->
         </div>
 
diff --git a/Cydia.app/package.js b/Cydia.app/package.js
index 71ac849..de1343c 100644
--- a/Cydia.app/package.js
+++ b/Cydia.app/package.js
@@ -33,13 +33,29 @@ function space(selector, html, max) {
     }
 }
 
+function cache(url) {
+    return url.replace('://', '://ne.edgecastcdn.net/8003A4/');
+}
+
+var swap_, swap = function (on, off, time) {
+    setTimeout(swap_(on, off, time), time);
+};
+
+swap_ = function (on, off, time) {
+    return function () {
+        on.className = 'fade-out';
+        off.className = 'fade-in';
+        swap(off, on, time);
+    };
+};
+
 $(function () {
     var id = package.id;
     var idc = encodeURIComponent(id);
     var name = package.name;
     var regarding = encodeURIComponent("Cydia/APT: " + name);
     var icon = 'cydia://package-icon/' + idc;
-    var icon = 'http://cydia.saurik.com/thumb/net.ispazio.deeptheme.png';
+    var api = 'http://cydia.saurik.com/api/';
 
     $("#icon").css("background-image", 'url("' + icon + '")');
     $("#reflection").src("cydia://package-icon/" + idc);
@@ -47,36 +63,46 @@ $(function () {
     $("#name").html(name);
     space("#latest", package.latest, 96);
 
-    var rating = package.rating;
-    if (rating == null)
-        $(".rating").remove();
-    else {
-        $.xhr(rating, 'GET', {}, null, {
-            success: function (value) {
-                value = eval(value);
+    $.xhr(api + 'package/' + idc, 'GET', {}, null, {
+        success: function (value) {
+            value = eval(value);
 
-                $("#rating-load").remove();
-                $("#rating-href").href(value.reviews);
+            $("#rating-load").remove();
 
-                var none = $("#rating-none");
-                var done = $("#rating-done");
+            var href = $("#rating-href");
+            href.href(value.reviews);
 
-                if (value.rating == null) {
-                    done.remove();
-                    none.css("display", "block");
-                } else {
-                    none.remove();
-                    done.css("display", "block");
+            var none = $("#rating-none");
+            var done = $("#rating-done");
 
-                    $("#rating-value").css('width', 16 * value.rating);
-                }
-            },
+            if (value.rating == null) {
+                done.remove();
+                none.css("display", "block");
+            } else {
+                none.remove();
+                done.css("display", "block");
 
-            failure: function (status) {
-                $(".rating").remove();
+                $("#rating-value").css('width', 16 * value.rating);
             }
-        });
-    }
+
+            if (typeof value.icon != "undefined" && value.icon != null) {
+                var icon = $("#icon");
+                var thumb = $("#thumb");
+                icon[0].className = 'flip-180';
+                thumb[0].className = 'flip-360';
+                thumb.css("background-image", 'url("' + value.icon + '")');
+
+                setTimeout(function () {
+                    icon.css("display", "none");
+                    thumb[0].className = 'flip-0';
+                }, 2000);
+            }
+        },
+
+        failure: function (status) {
+            $(".rating").remove();
+        }
+    });
 
     $("#settings").href("cydia://package-settings/" + idc);