Multiple tag support added

css/template.css

@@ -295,7 +295,12 @@ body {
 	white-space: nowrap;
 }
 
-.product .badge {
+#badges{
+	position: absolute;
+	top: 5px;
+	right: 5px;
+}
+#badges .badge {
 	background: #E66346;
 	background-image: -ms-linear-gradient(top, #F37054 0%, #E66346 100%);
 	background-image: -moz-linear-gradient(top, #F37054 0%, #E66346 100%);
@@ -309,10 +314,9 @@ body {
 	font-family: 'Open Sans', sans-serif;
 	font-size: 10px;
 	font-weight: 300;
-	position: absolute;
-	top: 5px;
-	right: 5px;
+	display: block;
 }
+#badges .badge + .badge{ margin-top: 3px; }
 
 .tooltip-inner {
 	max-width: 238px;

index.html

@@ -10,14 +10,14 @@
 
 	<!-- Css -->
 
-	<!--
+
 	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 	<link href="css/template.css" rel="stylesheet" media="screen">
-	-->
+
 
 	<script>if ( top !== self ) top.location.replace( self.location.href );// Hey, don't iframe my iframe!</script>
 
-	<link href="css/template.min.css" rel="stylesheet" media="screen">
+	<!-- <link href="css/template.min.css" rel="stylesheet" media="screen"> -->
 
 	<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 
@@ -102,15 +102,15 @@
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script src="js/products.js"></script>
 
-<!--
+
 <script src="js/libs/detectmobilebrowser.js"></script>
 <script src="js/libs/jquery.mousewheel.js"></script>
 <script src="js/libs/bootstrap.min.js"></script>
 <script src="js/libs/jquery.carouFredSel-6.2.1-packed.js"></script>
 <script src="js/application.js"></script>
--->
 
-<script src="js/application.min.js"></script>
+
+<!-- <script src="js/application.min.js"></script> -->
 
 
 </body>

js/application.js

@@ -26,7 +26,7 @@ $.each( $products, function( key, object ) {
 	}
 
 	$productList.append(
-		'<a class="product pull-left" data-id="' + key + '" ' + tooltip + '><img src="' + object.img + '" alt="' + object.name + '" width="236" height="120"><span class="title">' + object.name + '</span><span class="badge">' + object.tag + '</span></a>'
+		'<a class="product pull-left" data-id="' + key + '" ' + tooltip + '><img src="' + object.img + '" alt="' + object.name + '" width="236" height="120"><span class="title">' + object.name + '</span><span id="badges">' + get_tags(object.tag) + '</span></a>'
 	);
 
 });
@@ -68,6 +68,21 @@ $( '.remove-btn' ).click( function() {
 
 });
 
+// Lets extract tags from , seperated value
+function get_tags( $tags )
+{
+	var arr = $tags.split(','),
+		span = '',
+		klass = '';
+
+	$.each( arr, function( key, val ) {
+		klass = val.replace(' ', '');
+		span += '<span class="badge '+ klass +'">' + val + '</span>';
+	});	
+
+	return span ; 
+}
+
 // Let's calculate iframe height
 function switcher_iframe_height() {
 
@@ -194,7 +209,7 @@ $( document ).ready( function() {
 	}
 
 	$( '.product-switcher a' ).html( 
-		$products[ $current_product ].name + ' <span class="badge">' + $products[ $current_product ].tag + '</span>'
+		$products[ $current_product ].name
 	);
 
 	switcher_viewport_buttons();
@@ -227,7 +242,7 @@ $( '.product' ).click( function() {
 		});
 
 		$( '.product-switcher a' ).html( 
-			$products[ $current_product ].name + ' <span class="badge">' + $products[ $current_product ].tag + '</span>'
+			$products[ $current_product ].name
 		);
 
 		$productIframe.attr( 'src', $products[ $current_product ].url );

js/products.js

@@ -7,7 +7,7 @@ $products = {
 
 	visia : {
 		name     : 'Visia',
-		tag      : 'WP',
+		tag      : 'Joomla 3.x,Joomla 2.5,Responsiv',
 		img      : 'http://i.imgur.com/hgp2v0H.jpg',
 		url      : 'http://visia.themes.pixelentity.com/',
 		purchase : 'http://themeforest.net/item/visia-responsive-one-page-retina-wordpress-theme/5602067?ref=OriginalEXE',