Joshua's html

app/assets/javascripts/lib/jquery.preload.min.js

@@ -0,0 +1,42 @@
+// (function($) {
+//   var cache = [];
+//   // Arguments are image paths relative to the current page.
+//   $.preLoadImages = function() {
+//     var args_len = arguments.length;
+//     for (var i = args_len; i--;) {
+//       var cacheImage = document.createElement('img');
+//       cacheImage.src = arguments[i];
+//       cache.push(cacheImage);
+//     }
+//   }
+// })(jQuery)
+
+
+(function($) {
+  $.preloadimages = function (arr){
+    var newimages=[], loadedimages=0
+    var postaction=function(){}
+    var arr=(typeof arr!="object")? [arr] : arr
+    function imageloadpost(){
+        loadedimages++
+        if (loadedimages==arr.length){
+            postaction(newimages) //call postaction and pass in newimages array as parameter
+        }
+    }
+    for (var i=0; i<arr.length; i++){
+        newimages[i]=new Image()
+        newimages[i].src=arr[i]
+        newimages[i].onload=function(){
+            imageloadpost()
+        }
+        newimages[i].onerror=function(){
+            imageloadpost()
+        }
+    }
+    return { //return blank object with done() method
+        done:function(f){
+            postaction=f || postaction //remember user defined callback functions to be called when images load
+        }
+    }
+  }
+})(jQuery)

app/assets/stylesheets/templatestore.css.erb

@@ -0,0 +1,170 @@
+ul, li{
+	margin: 0;
+	list-style: none;
+}
+body{
+    color: #000;
+	font-family: helvetica, arial, sans-serif;
+}
+.tp-store{
+	margin: 0 40px;
+	min-width: 780px;
+}
+.home{
+	margin: 39px 0 0 18px;
+	background: url(<%= asset_path 'templatestore/h1_bg.png' %>) left top no-repeat;
+	width: 195px;
+	height: 42px;
+	display: block;
+}
+.home:hover{	
+	-moz-transition: all 0.1s ease-in-out;
+	-ms-transition: all 0.1s ease-in-out;
+	-webkit-transition: all 0.1s ease-in-out;
+	transition: all 0.1s ease-in-out;
+	opacity: .85;
+}
+.home:active{
+	position: relative;
+	top: 1px;
+}
+.home a{
+	text-indent: -9999px;
+	display: block;
+}
+.header{
+	margin-bottom: 35px;
+}
+
+.template-list a{
+	width: 200px;
+	height: 200px;
+	overflow: hidden;
+	display: block;
+	background: #00699f;
+	position: relative;
+	margin: 0 0 40px 0;
+	-webkit-box-shadow:  0px 2px 10px 0px #a3a3a3;
+    box-shadow:  0px 2px 10px 0px #a3a3a3;	
+}
+.template-list .detail{
+	background: #f0f0f0;
+	position: absolute;
+	width: 180px;
+	bottom: 0;
+	left: 0;
+	padding: 10px 10px 5px 10px;
+}
+.template-list .detail .template-title{
+	display: block;
+	font-size: 13px;
+	margin-bottom: 2px;
+}
+.template-list .detail .template-title:hover{
+	text-decoration: underline;
+}
+.template-list .detail .template-title:active{
+	position: relative;
+	top: 1px;
+}
+
+.template-list .detail .price{
+	font-size: 12px;
+	color: #76787a;
+}
+
+/* orbit template detail page*/
+.orbit_template_detail .header{
+	margin-bottom: 30px;
+}
+.breadcrumb{
+	background: none;
+	font-size: 12px;
+	margin: 10px 0 0 0;
+	padding: 0;
+	font-style: italic;
+}
+.left-col.span3{
+	width: 170px;
+}
+.template-icon{
+	border: 1px solid #ddd;
+	margin: 0 0 5px 0;
+}
+.price.btn.btn-primary{
+	margin: 0 0 5px 10px;
+}
+.views{
+	font-size: 12px;
+	color: #363636;
+}
+.views span{
+	color: #727272;
+}
+.view-meta{
+	margin-left: 17px;
+}
+.view-meta ul li{
+	font-size: 11px;
+	padding-left: 5px;
+}
+.right-col.span6{
+	width: 530px;
+}
+.right-col h2{
+	font-size: 24px;
+	color: #3e94e4;
+	font-weight: 100;
+	line-height: 28px;
+}
+.right-col h3{
+	color: #363636;
+	font-size: 15px;
+	font-weight: 100;
+	margin: 8px 0;
+	line-height: 20px;
+}
+.template-description{
+	color: #5d5d5d;
+	font-size: 12px;
+}
+
+.screenshots .slide{
+	width: 580px;
+	height: 360px;
+}
+.detail-slide-nav {
+	text-align: center;
+	z-index: 50;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	background: #000000;
+	opacity: .75;
+	width: 580px;
+	line-height: 20px;
+}
+.detail-slide-nav a{
+	color: #fff;
+	background: #fff;
+	margin: 0 7px 0 0;
+	-webkit-border-radius: 5px;
+    border-radius: 5px;
+	height: 10px;
+	width: 10px;
+	display: inline-block;
+	overflow: hidden;
+}
+.detail-slide-nav a:hover{
+	color: #4bbaf3;
+	background: #4bbaf3;
+	text-decoration: none;
+}
+.detail-slide-nav a.activeSlide { 
+	background: #4bbaf3;
+	color: #4bbaf3;
+}
+.detail-slide-nav a:focus {
+	outline: none;
+}
+