SHOPPING CART IN SIDEBAR TEMPLATE

Wednesday 6 August 2014

SHOPPING CART IN SIDEBAR TEMPLATE

------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE:
REMAINING PART
http://fbgadgets.blogspot.co.uk/2014/08/images.html
http://fbgadgets.blogspot.co.uk/2014/08/shopping-cart-in-sidebar-template_7.html
OTHER SHOPPING CART
http://fbgadgets.blogspot.co.uk/2014/08/shopping-cart-blogger-template.html
http://fbgadgets.blogspot.co.uk/2014/08/how-use-shopping-cart-blogger-template.html
http://fbgadgets.blogspot.co.uk/2014/08/shopping-cart-template-with-view-cart.html
http://fbgadgets.blogspot.co.uk/2014/08/shopping-cart-blogger-template-with.html
------------------------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>

<b:skin><![CDATA[

-----------------------------------------------
Blogger Template Style
Name: SIMPLE SHOPPING CART BLOGGER TEMPLATE
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */

/* Variable definitions
====================
<Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right">
*/

body {
background:#ccc url(http://3.bp.blogspot.com/-d4SEhY5Syr0/T7vK-PqJ5WI/AAAAAAAAGP0/kHvrYSF1faM/s1600/body-bg.png) repeat-x top;
color:#444444;
font:x-small Trebuchet MS;
font-size:small;
text-align:left;
margin:0
}
a:link {
color:#2a4978;
text-decoration:none
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none
}
a:hover {
color:$titlecolor;
text-decoration:none
}
a img {
border-width:0
}
#header-wrapper {
background:#4c7cbf url(http://4.bp.blogspot.com/-WVYxsUeal90/T7vKZVzngbI/AAAAAAAAGPs/KdM9ULNVCTQ/s1600/header-bg.png)repeat-x bottom;
width:960px;
border:0 solid #dcd9d9;
margin:0 auto
}
#header-inner {
background-position:center;
margin-left:auto;
margin-right:auto
}
#header {
float:left;
width:200px;
border:0 solid #dcd9d9;
text-align:left;
color:$pagetitlecolor;
margin:0
}
#header2 {
float:right;
width:728px;
margin-right:10px;
text-align:left;
color:#555
}
.header .widget,.header2 .widget {
margin:0 auto;
padding:10px 0
}
#header h1 {
line-height:1.2em;
text-transform:none;
letter-spacing:.1em;
font:bold 30px Arial;
margin:0 auto;
padding:10px 5px .15em;
text-shadow:-1px -1px #223b5a;
color:#d0e1f5;
}
#header a {
text-decoration:none
}
#header a:hover {
color:$pagetitlecolor
}
#header .description {
max-width:100%;
text-transform:uppercase;
letter-spacing:.01em;
line-height:1.2em;
font:$descriptionfont;
color:$descriptioncolor;
margin:0 auto;
padding:0 5px 5px
}
#header img {
margin-startside:auto;
margin-endside:auto
}
#navbar-iframe {
height:0;
visibility:hidden;
display:none
}
#crosscol-wrapper {
margin:0 auto;
padding:0 auto
}
.crosscol .widget {
margin:0 auto;
padding:0 0 6px
}
#mainpage-wrapper {
width:675px;
float:left;
word-wrap:break-word;
overflow:hidden
}
#main-wrapper {
background:#f0f0f0 url(http://4.bp.blogspot.com/-5Ulj4hKKPok/TzuWP4ACk3I/AAAAAAAAFR4/dqNxYNY99FI/s1600/maincol-grad.png) repeat-x top;
width:675px;
float:$endSide;
word-wrap:break-word;
overflow:hidden;
}
#sidebar-wrapper {
background:#d9d9d9;
width:285px;
float:$startSide;
word-wrap:break-word;
overflow:hidden
}
.sidebar h2 {
background:url(http://3.bp.blogspot.com/-UP2TzR7l-Ak/T7udRSQ6EKI/AAAAAAAAGOM/tyehSG8cvkM/s1600/sidebar-bg.png) repeat-x bottom;
font:bold 13px Arial;
color:#111;
text-transform:uppercase;
text-shadow:1px 1px #fff;
margin:10px 10px 0;
padding:7px 0 8px 10px;
-moz-border-radius:5px 5px 0 0;
-khtml-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
.sidebar {
color:red;
line-height:1.3em;
}
.sidebar li {
background:url(http://4.bp.blogspot.com/-b2PXU86078o/T7uffs0D-0I/AAAAAAAAGOU/HL2APebva4M/s1600/categories.png) no-repeat 1px 5px;
text-indent:0;
line-height:1.3em;
margin:0;
padding:4px 0 5px 20px
}
.sidebar ul {
float:left;
list-style:none;
margin:0;
padding:0
}
.sidebar li a:hover {
color:#004a84
}
.sidebar .widget {
margin:0 0 5px
}
.sidebar .widget-content {
background:#eee;
margin:0 10px;
padding:5px 10px;
-moz-border-radius:0 0 5px 5px;
-khtml-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
}
.sidebar a:link,.sidebar a:visited {
font:bold 12px Arial;
color:#555;
text-decoration:none
}
.main .widget {
border-bottom:1px dotted #dcd9d9;
margin:0 0 1.5em;
padding:0 0 1.5em
}
.main .Blog {
border-bottom-width:0
}
#outer-wrapper {
background:#fff;
width:960px;
text-align:$startSide;
font:$bodyfont;
margin:0 auto;
padding:3px;
box-shadow:0px 0px 7px #888;
-moz-box-shadow:0px 0px 7px #888;
-webkit-box-shadow: 0px 0px 7px #888;
}
/* Shopping Cart ----------------------------------------------- */
#shoppingCart {
background:#264268 url(http://1.bp.blogspot.com/-794W0ErE4ng/U-NDNWsFHjI/AAAAAAABRds/eL5FF1PXvrc/s1600/add-cart.png) repeat-x top;
border-radius:5px 5px 5px 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px 5px 5px 5px;
float:left;
color:#fff;
width:243px;
margin:10px;
padding:0 10px 10px
}
#shoppingCart h2 {
background:url(http://1.bp.blogspot.com/-rtsAcCuzy6s/U-NDNksIywI/AAAAAAABRdY/ZWJl6HQAuyQ/s1600/icon_cart.png) no-repeat left top;
display:block;
font-size:16px;
color:#fff;
text-decoration:none;
margin-bottom:10px;
padding:0 0 10px 25px
}
.itemname {
float:left;
clear:both
}
.item_thumb {
padding:10px
}
.item_price {
display:block;
height:20px;
position:absolute;
bottom:7px;
left:10px;
color:#2a4978;
font-size:13px;
font-weight:700;
text-align:left;
border:0 none;
padding:5px 10px
}
.simpleCart_items {
background:#527ab8;
-webkit-box-shadow:inset #082849 0 2px 8px;
-moz-box-shadow:inset #082849 0 2px 7px;
font-size:80%;
min-height:120px;
display:block;
margin-left:0 auto 10px;
overflow:hidden;
padding:10px
}
.simpleCart_items img {
text-align:left;
width:40px!important;
height:40px!important;
padding:2px
}
.itemContainer {
float:left;
width:210px;
text-align:center;
display:block;
position:relative;
bottom:0
}
.itemthumb {
float:left;
width:58px;
margin:0
}
.itemQuantity {
float:left;
width:25px;
margin:6px 0
}
.itemQuantity input {
border:none;
color:#fff;
background:none;
float:left;
font:bold 11px Arial,sans-serif;
height:22px;
text-align:center;
width:25px;
padding:5px
}
.itemQuantity input:focus {
outline:none
}
.itemremove a {
color:#FF0;
float:left;
font-weight:700;
margin:15px 0 0 15px
}
.itemTotal {
color:#fff;
float:left;
font:bold 11px Arial,sans-serif;
text-align:right;
width:55px;
margin:15px 0 0 10px;
padding:0
}
.simpleCart_finalTotal {
color:#fff;
font-size:18px
}
.cart table {
border-collapse:collapse;
margin-top:20px
}
.cart table td.odd {
color:#fff;
text-align:left;
width:100px
}
.cart table td.even {
color:#fff;
text-align:right;
width:100px
}
a.simpleCart_empty {
background:#45b52f url(http://1.bp.blogspot.com/-yecUewSRtJ8/U-NDNU9KzbI/AAAAAAABRdU/g7SYMGfX97o/s1600/fade.png) repeat-x top left;
border-radius:3px 3px 3px 3px;
-moz-border-radius:3px;
-webkit-border-radius:3px 3px 3px 3px;
display:block;
font:bold 12px Arial;
text-align:center;
text-decoration:none;
color:#fff;
float:left;
width:80px;
margin:0 20px;
padding:6px
}
.cartbuttons {
margin:10px 0 0
}
a.simpleCart_checkout {
background:#45b52f url(http://1.bp.blogspot.com/-yecUewSRtJ8/U-NDNU9KzbI/AAAAAAABRdU/g7SYMGfX97o/s1600/fade.png) repeat-x top left;
border-radius:3px 3px 3px 3px;
-moz-border-radius:3px;
-webkit-border-radius:3px 3px 3px 3px;
display:block;
font:bold 12px Arial;
text-align:center;
text-decoration:none;
color:#fff;
float:left;
width:80px;
padding:6px
}
input.item_add:hover {
background-position:bottom left;
color:#fff
}
input.item_add {
color:#fff;
font-size:11px;
font-weight:400;
text-align:center;
border:none;
text-shadow:1px 1px 1px #222;
border-radius:2px 2px 2px 2px;
-moz-border-radius:2px;
-webkit-border-radius:2px 2px 2px 2px;
width:80px;
background:url(http://1.bp.blogspot.com/-794W0ErE4ng/U-NDNWsFHjI/AAAAAAABRds/eL5FF1PXvrc/s1600/add-cart.png) repeat-x top;
margin-right:10px;
float:right;
padding:5px
}
#checkout {
background:#D9D9D9;
color:#000;
text-decoration:none;
font-size:80%;
display:block;
text-align:center;
-moz-border-radius:5px;
border-radius:5px;
-webkit-border-radius:5px;
padding:10px
}
#checkout:hover {
background:#333;
color:#FFF
}
.item_name,.hidden_value,.cartHeaders {
display:none
}
a.simpleCart_empty:hover,a.simpleCart_checkout:hover {
background:#d9d9d9;
color:#000
}
.product_image {
width:170px;
height:200px;
background:#fff;
border:1px solid #ccc;
float:left;
text-align:left;
margin:0 15px 10px 0;
padding:13px 10px 13px 13px
}
.product_image img {
width:160px;
height:160px
}
h2.date-header {
margin:1.5em 0 .5em
}
.post {
margin:.5em 0 .1em;
padding:15px
}
.post .jump-link {
display:none
}
.post h3 {
line-height:26px;
margin:0 0 20px;
padding:0 0 5px
}
.post h3 a,.post h3 a:visited,.post h3 strong {
font-size:30px;
font-weight:700
}
.post h3 strong,.post h3 a:hover {
text-decoration:none
}
.post-body {
line-height:1.6em;
font:14px Arial;
margin:0 0 .75em
}
.post-body blockquote {
line-height:1.3em
}
.post-footer {
padding:5px
}
.post img {
max-width:580px;
padding:4px
}
.post blockquote {
margin:1em 20px
}
.post blockquote p {
margin: .75em 0
}

]]></b:skin>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style>
.product_image{width:160px;height:160px;background:#fff;border:1px solid #ccc;float:left;text-align:left;margin:0 15px 10px 0;padding:5px}
.product_image img{width:150px;height:150px}
.post{background:#fff url(http://3.bp.blogspot.com/-3Cz9c-fGEJk/T7pbsiUyPfI/AAAAAAAAGLA/AnZ5O9F8Evk/s1600/post-img.png) repeat-x top;border:1px solid #ccc;list-style:none;width:183px;margin-left:15px;margin-bottom:10px;text-align:center;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;height:245px;display:inline;float:left;overflow:hidden;position:relative;box-shadow:0 0 4px #bbb;-moz-box-shadow:0 0 4px #bbb;-webkit-box-shadow:0 0 4px #bbb;padding:5px 10px 10px;transition:all 600ms ease-in-out;-webkit-transition:all 600ms ease-in-out;-moz-transition:all 600ms ease-in-out;-o-transition:all 600ms ease-in-out;-ms-transition:all 600ms ease-in-out}
.post:hover{border:1px solid #999;box-shadow:0 0 4px #888;-moz-box-shadow:0 0 4px #888;-webkit-box-shadow:0 0 4px #888}
.post-footer{display:none}
.post h3{border:0 none;line-height:13px;margin:0 0 5px;padding:3px}
.post h3 a,.post h3 a:visited,.post h3 strong{color:#333;font:bold 13px Arial;text-align:center;text-shadow:none;line-height:20px}
.post-body{height:200px;overflow:hidden;width:180px;padding:5px}
</style>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<style>
.item_price {
left:-10px;
top:-5px;
font-size:20px;
font-family:'
color:#fff;
font-weight:700;
position:relative;
padding:3px 6px;
height:20px;
}
input.item_add {
float:right;
font-size: 15px;
padding:5px;
margin: 5px 0 0 10px;
position: relative;
width: 100px;
}
</style>
</b:if>

<script type='text/javascript'>
//<![CDATA[
var Custom="Custom",GoogleCheckout="GoogleCheckout",PayPal="PayPal",Email="Email",AustralianDollar="AUD",AUD="AUD",CanadianDollar="CAD",CAD="CAD",CzechKoruna="CZK",CZK="CZK",DanishKrone="DKK",DKK="DKK",Euro="EUR",EUR="EUR",HongKongDollar="HKD",HKD="HKD",HungarianForint="HUF",HUF="HUF",IsraeliNewSheqel="ILS",ILS="ILS",JapaneseYen="JPY",JPY="JPY",MexicanPeso="MXN",MXN="MXN",NorwegianKrone="NOK",NOK="NOK",NewZealandDollar="NZD",NZD="NZD",PolishZloty="PLN",PLN="PLN",PoundSterling="GBP",GBP="GBP",SingaporeDollar="SGD",SGD="SGD",SwedishKrona="SEK",SEK="SEK",SwissFranc="CHF",CHF="CHF",ThaiBaht="THB",THB="THB",IndonesianRupiah="IDR",IDR="IDR",USDollar="USD",USD="USD";
function Cart(){
var me = this;
/* member variables */
me.nextId = 1;
me.Version = '2.2.2';
me.Shelf = null;
me.items = {};
me.isLoaded = false;
me.pageIsReady = false;
me.quantity = 0;
me.total = 0;
me.taxRate = 0;
me.taxCost = 0;
me.shippingFlatRate = 0;
me.shippingTotalRate = 0;
me.shippingQuantityRate = 0;
me.shippingRate = 0;
me.shippingCost = 0;
me.currency = USD;
me.checkoutTo = PayPal;
me.email = "";
me.merchantId = "";
me.successUrl = null;
me.cancelUrl = null;
me.cookieDuration = 30; // default duration in days
me.storagePrefix = "sc_";
me.MAX_COOKIE_SIZE = 4000;
me.cartHeaders = ['Name','Price','Quantity','Total'];
me.events = {};
me.sandbox = false;
me.paypalHTTPMethod = "GET";
/*
cart headers:
you can set these to which ever order you would like, and the cart will display the appropriate headers
and item info. any field you have for the items in the cart can be used, and 'Total' will automatically
be price*quantity.
there are keywords that can be used:
1) "_input" - the field will be a text input with the value set to the given field. when the user
changes the value, it will update the cart. this can be useful for quantity. (ie "Quantity_input")
2) "increment" - a link with "+" that will increase the item quantity by 1
3) "decrement" - a link with "-" that will decrease the item quantity by 1
4) "remove" - a link that will remove the item from the cart
5) "_image" or "Image" - the field will be an img tag with the src set to the value. You can simply use "Image" if
you set a field in the items called "Image". If you have a field named something else, like "Thumb", you can add
the "_image" to create the image tag (ie "Thumb_image").
6) "_noHeader" - this will skip the header for that field (ie "increment_noHeader")
*/
/******************************************************
add/remove items to cart
******************************************************/
me.add = function ( values ) {
var me=this;
/* load cart values if not already loaded */
if( !me.pageIsReady ) {
me.initializeView();
me.update();
}
if( !me.isLoaded ) {
me.load();
me.update();
}
var newItem = new CartItem();
/* check to ensure arguments have been passed in */
if( !arguments || arguments.length === 0 ){
error( 'No values passed for item.');
return null;
}
var argumentArray = arguments;
if( values && typeof( values ) !== 'string' && typeof( values ) !== 'number' ){
argumentArray = values;
}
newItem.parseValuesFromArray( argumentArray );
newItem.checkQuantityAndPrice();
if( me.trigger('beforeAdd', [newItem] ) === false ){
return false;
}
var isNew = true;
/* if the item already exists, update the quantity */
if( me.hasItem(newItem) ) {
var foundItem=me.hasItem(newItem);
foundItem.quantity= parseInt(foundItem.quantity,10) + parseInt(newItem.quantity,10);
newItem = foundItem;
isNew = false;
} else {
me.items[newItem.id] = newItem;
}
me.update();
me.trigger('afterAdd', [newItem,isNew] );
return newItem;
};
me.remove = function( id ){
var tempArray = {};
me.each(function(item){
if( item.id !== id ){
tempArray[item.id] = item;
}
});
this.items = tempArray;
};
me.empty = function () {
me.items = {};
me.update();
};
/******************************************************
item accessor functions
******************************************************/
me.find = function (criteria) {
if( !criteria ){
return null;
}
var results = [];
me.each(function(item,x,next){
fits = true;
me.each( criteria , function(value,j,name){
if( !item[name] || item[name] != value ){
fits = false;
}
});
if( fits ){
results.push( item );
}
});
return (results.length === 0 ) ? null : results;
};
me.each = function( array , callback ){
var next,
x=0,
result;
if( typeof array === 'function' ){
var cb = array
items = me.items;
} else if( typeof callback === 'function' ){
var cb = callback,
items = array;
} else {
return;
}
for( next in items ){
if( typeof items[next] !== "function" ){
result = cb.call( me , items[next] , x , next );
if( result === false ){
return;
}
x++;
}
}
};
me.chunk = function(str, n) {
if (typeof n==='undefined'){
n=2;
}
var result = str.match(RegExp('.{1,'+n+'}','g'));
return result || [];
};
/******************************************************
checkout management
******************************************************/
me.checkout = function() {
if( me.quantity === 0 ){
error("Keranjang masih kosong");
return;
}
switch( me.checkoutTo ){
case PayPal:
me.paypalCheckout();
break;
case GoogleCheckout:
me.googleCheckout();
break;
case Email:
me.emailCheckout();
break;
default:
me.customCheckout();
break;
}
};
me.paypalCheckout = function() {
var form = document.createElement("form"),
counter=1,
current,
item,
descriptionString;
form.style.display = "none";
form.method = me.paypalHTTPMethod =="GET" || me.paypalHTTPMethod == "POST" ? me.paypalHTTPMethod : "GET";
form.action = me.sandbox ? "https://www.sandbox.paypal.com/cgi-bin/webscr" : "https://www.paypal.com/cgi-bin/webscr";
form.acceptCharset = "utf-8";
// setup hidden fields
form.appendChild(me.createHiddenElement("cmd", "_cart"));
form.appendChild(me.createHiddenElement("rm", me.paypalHTTPMethod == "POST" ? "2" : "0" ));
form.appendChild(me.createHiddenElement("upload", "1"));
form.appendChild(me.createHiddenElement("business", me.email ));
form.appendChild(me.createHiddenElement("currency_code", "me.currency"));
if( me.taxRate ){
form.appendChild(me.createHiddenElement("tax_cart",me.taxCost ));
}
if( me.shipping() !== 0){
form.appendChild(me.createHiddenElement("handling_cart", me.shippingCost ));
}
if( me.successUrl ){
form.appendChild(me.createHiddenElement("return", me.successUrl ));
}
if( me.cancelUrl ){
form.appendChild(me.createHiddenElement("cancel_return", me.cancelUrl ));
}
me.each(function(item,iter){
counter = iter+1;
form.appendChild( me.createHiddenElement( "item_name_" + counter, item.name ) );
form.appendChild( me.createHiddenElement( "quantity_" + counter, item.quantity ) );
form.appendChild( me.createHiddenElement( "amount_" + counter, item.price ) );
form.appendChild( me.createHiddenElement( "item_number_" + counter, counter ) );
var option_count = 0;
me.each( item , function( value, x , field ){
if( field !== "id" && field !== "price" && field !== "quantity" && field !== "name" && field !== "shipping" && option_count < 10) {
form.appendChild( me.createHiddenElement( "on" + option_count + "_" + counter, field ) );
form.appendChild( me.createHiddenElement( "os" + option_count + "_" + counter, value ) );
option_count++;
}
});
form.appendChild( me.createHiddenElement( "option_index_" + counter, option_count) );
});
document.body.appendChild( form );
form.submit();
document.body.removeChild( form );
};
me.googleCheckout = function() {
var me = this;
if( me.currency !== USD && me.currency !== GBP ){
error( "Google Checkout only allows the USD and GBP for currency.");
return;
} else if( me.merchantId === "" || me.merchantId === null || !me.merchantId ){
error( "No merchant Id for google checkout supplied.");
return;
}
var form = document.createElement("form"),
counter=1,
current,
item,
descriptionString;
form.style.display = "none";
form.method = "POST";
form.action = "https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/" +
me.merchantId;
form.acceptCharset = "utf-8";
me.each(function(item,iter){
counter = iter+1;
form.appendChild( me.createHiddenElement( "item_name_" + counter, item.name ) );
form.appendChild( me.createHiddenElement( "item_quantity_" + counter, item.quantity ) );
form.appendChild( me.createHiddenElement( "item_price_" + counter, item.price ) );
form.appendChild( me.createHiddenElement( "item_currency_" + counter, me.currency ) );
form.appendChild( me.createHiddenElement( "item_tax_rate_" + counter, me.taxRate ) );
form.appendChild( me.createHiddenElement( "_charset_" , "" ) );
descriptionString = "";
me.each( item , function( value , x , field ){
if( field !== "id" &&
field !== "quantity" &&
field !== "price" ) {
descriptionString = descriptionString + ", " + field + ": " + value;
}
});
descriptionString = descriptionString.substring( 1 );
form.appendChild( me.createHiddenElement( "item_description_" + counter, descriptionString) );
});
// hack for adding shipping
if( me.shipping() !== 0){
form.appendChild(me.createHiddenElement("ship_method_name_1", "Shipping"));
form.appendChild(me.createHiddenElement("ship_method_price_1", parseFloat(me.shippingCost).toFixed(2)));
form.appendChild(me.createHiddenElement("ship_method_currency_1", me.currency));
}
document.body.appendChild( form );
form.submit();
document.body.removeChild( form );
};
me.emailCheckout = function() {
return;
};
me.customCheckout = function() {
return;
};
/******************************************************
data storage and retrival
******************************************************/
/* load cart from cookie */
me.load = function () {
var me = this,
id;
/* initialize variables and items array */
me.items = {};
me.total = 0.00;
me.quantity = 0;
/* retrieve item data from cookie */
if( readCookie(simpleCart.storagePrefix + 'simpleCart_' + "chunks") ){
var chunkCount = 1*readCookie(simpleCart.storagePrefix + 'simpleCart_' + "chunks"),
dataArray = [],
dataString = "",
data = "",
info,
newItem,
y=0;
if(chunkCount>0) {
for( y=0;y<chunkCount;y++){
dataArray.push( readCookie( simpleCart.storagePrefix + 'simpleCart_' + (1 + y ) ) );
}
dataString = unescape( dataArray.join("") );
data = dataString.split("++");
}
for(var x=0, xlen=data.length;x<xlen;x++){
info = data[x].split('||');
newItem = new CartItem();
if( newItem.parseValuesFromArray( info ) ){
newItem.checkQuantityAndPrice();
/* store the new item in the cart */
me.items[newItem.id] = newItem;
}
}
}
me.isLoaded = true;
};
/* save cart to cookie */
me.save = function () {
var dataString = "",
dataArray = [],
chunkCount = 0;
chunkCount = 1*readCookie(simpleCart.storagePrefix + 'simpleCart_' + "chunks");
for( var j=0;j<chunkCount;j++){
eraseCookie(simpleCart.storagePrefix + 'simpleCart_'+ j);
}
eraseCookie(simpleCart.storagePrefix + 'simpleCart_' + "chunks");
me.each(function(item){
dataString = dataString + "++" + item.print();
});
dataArray = simpleCart.chunk( dataString.substring(2) , simpleCart.MAX_COOKIE_SIZE );
for( var x=0,xlen = dataArray.length;x<xlen;x++){
createCookie(simpleCart.storagePrefix + 'simpleCart_' + (1 + x ), dataArray[x], me.cookieDuration );
}
createCookie( simpleCart.storagePrefix + 'simpleCart_' + "chunks", "" + dataArray.length , me.cookieDuration );
};

/******************************************************
view management
******************************************************/
me.initializeView = function() {
var me = this;
me.totalOutlets = getElementsByClassName('simpleCart_total');
me.quantityOutlets = getElementsByClassName('simpleCart_quantity');
me.cartDivs = getElementsByClassName('simpleCart_items');
me.taxCostOutlets = getElementsByClassName('simpleCart_taxCost');
me.taxRateOutlets = getElementsByClassName('simpleCart_taxRate');
me.shippingCostOutlets = getElementsByClassName('simpleCart_shippingCost');
me.finalTotalOutlets = getElementsByClassName('simpleCart_finalTotal');
me.addEventToArray( getElementsByClassName('simpleCart_checkout') , simpleCart.checkout , "click");
me.addEventToArray( getElementsByClassName('simpleCart_empty') , simpleCart.empty , "click" );
me.Shelf = new Shelf();
me.Shelf.readPage();
me.pageIsReady = true;
};
me.updateView = function() {
me.updateViewTotals();
if( me.cartDivs && me.cartDivs.length > 0 ){
me.updateCartView();
}
};
me.updateViewTotals = function() {
var outlets = [ ["quantity" , "none" ] ,
["total" , "currency" ] ,
["shippingCost" , "currency" ] ,
["taxCost" , "currency" ] ,
["taxRate" , "percentage" ] ,
["finalTotal" , "currency" ] ];
for( var x=0,xlen=outlets.length; x<xlen;x++){
var arrayName = outlets[x][0] + "Outlets",
outputString,
element;
for( var y = 0,ylen = me[ arrayName ].length; y<ylen; y++ ){
switch( outlets[x][1] ){
case "none":
outputString = "" + me[outlets[x][0]];
break;
case "currency":
outputString = me.valueToCurrencyString( me[outlets[x][0]] );
break;
case "percentage":
outputString = me.valueToPercentageString( me[outlets[x][0]] );
break;
default:
outputString = "" + me[outlets[x][0]];
break;
}
me[arrayName][y].innerHTML = "" + outputString;
}
}
};
me.updateCartView = function() {
var newRows = [],
y,newRow,current,header,newCell,info,outputValue,option,headerInfo;
/* create headers row */
newRow = document.createElement('div');
for(var y=0,ylen = me.cartHeaders.length; y<ylen; y++ ){
newCell = document.createElement('div');
headerInfo = me.cartHeaders[y].split("_");
newCell.innerHTML = me.print( headerInfo[0] );
newCell.className = "item" + headerInfo[0];
for(var z=1,zlen=headerInfo.length;z<zlen;z++){
if( headerInfo[z].toLowerCase() == "noheader" ){
newCell.style.display = "none";
}
}
newRow.appendChild( newCell );
}
newRow.className = "cartHeaders";
newRows[0] = newRow;
/* create a row for each item in the cart */
me.each(function(item, x){
newRow = document.createElement('div');
for(var y=0,ylen = me.cartHeaders.length; y<ylen; y++ ){
newCell = document.createElement('div');
info = me.cartHeaders[y].split("_");
outputValue = me.createCartRow( info , item , outputValue );
newCell.innerHTML = outputValue;
newCell.className = "item" + info[0];
newRow.appendChild( newCell );
}
newRow.className = "itemContainer";
newRows[x+1] = newRow;
});
for( var x=0,xlen=me.cartDivs.length; x<xlen; x++){
/* delete current rows in div */
var div = me.cartDivs[x];
if( div.childNodes && div.appendChild ){
while( div.childNodes[0] ){
div.removeChild( div.childNodes[0] );
}
for(var j=0, jLen = newRows.length; j<jLen; j++){
div.appendChild( newRows[j] );
}
}
}
};
me.createCartRow = function( info , item , outputValue ){
switch( info[0].toLowerCase() ){
case "total":
outputValue = me.valueToCurrencyString(parseFloat(item.price)*parseInt(item.quantity,10) );
break;
case "increment":
outputValue = me.valueToLink( "+" , "javascript:;" , "onclick=\"simpleCart.items[\'" + item.id + "\'].increment();\"" );
break;
case "decrement":
outputValue = me.valueToLink( "-" , "javascript:;" , "onclick=\"simpleCart.items[\'" + item.id + "\'].decrement();\"" );
break;
case "remove":
outputValue = me.valueToLink( "Remove" , "javascript:;" , "onclick=\"simpleCart.items[\'" + item.id + "\'].remove();\"" );
break;
case "price":
outputValue = me.valueToCurrencyString( item[ info[0].toLowerCase() ] ? item[info[0].toLowerCase()] : " " );
break;
default:
outputValue = item[ info[0].toLowerCase() ] ?
typeof item[info[0].toLowerCase()] === 'function' ?
item[info[0].toLowerCase()].call(item) :
item[info[0].toLowerCase()] :
" ";
break;
}
for( var y=1,ylen=info.length;y<ylen;y++){
option = info[y].toLowerCase();
switch( option ){
case "image":
case "img":
outputValue = me.valueToImageString( outputValue );
break;
case "input":
outputValue = me.valueToTextInput( outputValue , "onchange=\"simpleCart.items[\'" + item.id + "\'].set(\'" + info[0].toLowerCase() + "\' , this.value);\"" );
break;
case "div":
case "span":
case "h1":
case "h2":
case "h3":
case "h4":
case "p":
outputValue = me.valueToElement( option , outputValue , "" );
break;
case "noheader":
break;
default:
error( "unkown header option: " + option );
break;
}
}
return outputValue;
};
me.addEventToArray = function ( array , functionCall , theEvent ) {
var outlet,
element;
for(var x=0,xlen=array.length; x<xlen; x++ ){
element = array[x];
if( element.addEventListener ) {
element.addEventListener(theEvent, functionCall , false );
} else if( element.attachEvent ) {
element.attachEvent( "on" + theEvent, functionCall );
}
}
};
me.createHiddenElement = function ( name , value ){
var element = document.createElement("input");
element.type = "hidden";
element.name = name;
element.value = value;
return element;
};

/******************************************************
Event Management
******************************************************/
// bind a callback to a simpleCart event
me.bind = function( name , callback ){
if( typeof callback !== 'function' ){
return me;
}
if (me.events[name] === true ){
callback.apply( me );
} else if( typeof me.events[name] !== 'undefined' ){
me.events[name].push( callback );
} else {
me.events[name] = [ callback ];
}
return me;
};
// trigger event
me.trigger = function( name , options ){
var returnval = true;
if( typeof me.events[name] !== 'undefined' && typeof me.events[name][0] === 'function'){
for( var x=0,xlen=me.events[name].length; x<xlen; x++ ){
returnval = me.events[name][x].apply( me , (options ? options : [] ) );
}
}
if( returnval === false ){
return false;
} else {
return true;
}
};
// shortcut for ready function
me.ready = function( callback ){
if( !callback ){
me.trigger( 'ready' );
me.events['ready'] = true;
} else {
me.bind( 'ready' , callback );
}
return me;
};
/******************************************************
Currency management
******************************************************/
me.currencySymbol = function() {
switch(me.currency){
case CHF:
return "CHF ";
case CZK:
return "CZK ";
case DKK:
return "DKK ";
case HUF:
return "HUF ";
case NOK:
return "NOK ";
case PLN:
return "PLN ";
case SEK:
return "SEK ";
case JPY:
return "¥";
case EUR:
return "€";
case GBP:
return "£";
case CHF:
return "CHF ";
case THB:
return "฿";
case DKK:
return "Rp ";
case USD:
case CAD:
case AUD:
case NZD:
case HKD:
case SGD:
return "$";
default:
return "";
}
};
me.currencyStringForPaypalCheckout = function( value ){
if( me.currencySymbol() == "$" ){
return "$" + parseFloat( value ).toFixed(2);
} else {
return "" + parseFloat(value ).toFixed(2);
}
};
/******************************************************
Formatting
******************************************************/
me.valueToCurrencyString = function( value ) {
var val = parseFloat( value );
if( isNaN(val))
val = 0;
return val.toCurrency( me.currencySymbol() );
};
me.valueToPercentageString = function( value ){
return parseFloat( 100*value ) + "%";
};
me.valueToImageString = function( value ){
if( value.match(/<\s*img.*src\=/) ){ return value; } else { return "<img src=\"" + value + "\" />";
}
};
me.valueToTextInput = function( value , html ){
return "<input type=\"text\" value=\"" + value + "\" " + html + " />";
};
me.valueToLink = function( value, link, html){
return "<a href=\"" + link + "\" " + html + ">" + value + "</a>";
};
me.valueToElement = function( type , value , html ){
return "<" + type + " " + html + "> " + value + "</" + type + ">";
};
/******************************************************
Duplicate management
******************************************************/
me.hasItem = function ( item ) {
var current,
matches,
field,
match=false;
me.each(function(testItem){
matches = true;
me.each( item , function( value , x , field ){
if( field !== "quantity" && field !== "id" && item[field] !== testItem[field] ){
matches = false;
}
});
if( matches ){
match = testItem;
}
});
return match;
};
/******************************************************
Language managment
******************************************************/
me.ln = {
"en_us": {
quantity: "Quantity"
, price: "Price"
, total: "Total"
, decrement: "Decrement"
, increment: "Increment"
, remove: "Remove"
, tax: "Tax"
, shipping: "Shipping"
, image: "Image"
}
};
me.language = "en_us";
me.print = function( input ) {
var me = this;
return me.ln[me.language] && me.ln[me.language][input.toLowerCase()] ? me.ln[me.language][input.toLowerCase()] : input;
};
/******************************************************
Cart Update managment
******************************************************/
me.update = function() {
if( !simpleCart.isLoaded ){
simpleCart.load();
}
if( !simpleCart.pageIsReady ){
simpleCart.initializeView();
}
me.updateTotals();
me.updateView();
me.save();
};
me.updateTotals = function() {
me.total = 0 ;
me.quantity = 0;
me.each(function(item){
if( item.quantity < 1 ){
item.remove();
} else if( item.quantity !== null && item.quantity !== "undefined" ){
me.quantity = parseInt(me.quantity,10) + parseInt(item.quantity,10);
}
if( item.price ){
me.total = parseFloat(me.total) + parseInt(item.quantity,10)*parseFloat(item.price);
}
});
me.shippingCost = me.shipping();
me.taxCost = parseFloat(me.total)*me.taxRate;
me.finalTotal = me.shippingCost + me.taxCost + me.total;
};
me.shipping = function(){
if( parseInt(me.quantity,10)===0 )
return 0;
var shipping = parseFloat(me.shippingFlatRate) +
parseFloat(me.shippingTotalRate)*parseFloat(me.total) +
parseFloat(me.shippingQuantityRate)*parseInt(me.quantity,10),
next;
me.each(function(nextItem){
if( nextItem.shipping ){
if( typeof nextItem.shipping == 'function' ){
shipping += parseFloat(nextItem.shipping());
} else {
shipping += parseFloat(nextItem.shipping);
}
}
});
return shipping;
}
me.initialize = function() {
me.initializeView();
me.load();
me.update();
me.ready();
};
}

/********************************************************************************************************
* Cart Item Object
********************************************************************************************************/
function CartItem() {
while( simpleCart.items["c" + simpleCart.nextId] )
simpleCart.nextId++;
this.id = "c" + simpleCart.nextId;
}
CartItem.prototype = {
set : function ( field , value ){
field = field.toLowerCase();
if( typeof( this[field] ) !== "function" && field !== "id" ){
value = "" + value;
if( field == "quantity"){
value = value.replace( /[^(\d|\.)]*/gi , "" );
value = value.replace(/,*/gi, "");
value = parseInt(value,10);
} else if( field == "price" ){
value = value.replace( /[^(\d|\.)]*/gi, "");
value = value.replace(/,*/gi , "");
value = parseFloat( value );
}
if( typeof(value) == "number" && isNaN( value ) ){
error( "Improperly formatted input.");
} else {
if( typeof( value ) === "string" ){
if( value.match(/\~|\=/) ){
error("Special character ~ or = not allowed: " + value);
}
value = value.replace(/\~|\=/g, "");
}
this[field] = value;
this.checkQuantityAndPrice();
}
} else {
error( "Cannot change " + field + ", this is a reserved field.");
}
simpleCart.update();
},
increment : function(){
this.quantity = parseInt(this.quantity,10) + 1;
simpleCart.update();
},
decrement : function(){
if( parseInt(this.quantity,10) < 2 ){
this.remove();
} else {
this.quantity = parseInt(this.quantity,10) - 1;
simpleCart.update();
}
},
print : function () {
var returnString = '',
field;
simpleCart.each(this ,function(item,x,name){
returnString+= escape(name) + "=" + escape(item) + "||";
});
return returnString.substring(0,returnString.length-2);
},
checkQuantityAndPrice : function() {
if( !this.quantity || this.quantity == null || this.quantity == 'undefined'){
this.quantity = 1;
error('No quantity for item.');
} else {
this.quantity = ("" + this.quantity).replace(/,*/gi, "" );
this.quantity = parseInt( ("" + this.quantity).replace( /[^(\d|\.)]*/gi, "") , 10);
if( isNaN(this.quantity) ){
error('Quantity is not a number.');
this.quantity = 1;
}
}
if( !this.price || this.price == null || this.price == 'undefined'){
this.price=0.00;
error('No price for item or price not properly formatted.');
} else {
this.price = ("" + this.price).replace(/,*/gi, "" );
this.price = parseFloat( ("" + this.price).replace( /[^(\d|\.)]*/gi, "") );
if( isNaN(this.price) ){
error('Price is not a number.');
this.price = 0.00;
}
}
},
parseValuesFromArray : function( array ) {
if( array && array.length && array.length > 0) {
for(var x=0, xlen=array.length; x<xlen;x++ ){ /* ensure the pair does not have key delimeters */ array[x]=array[x].replace(/\|\|/g, "| |"); array[x]=array[x].replace(/\+\+/g, "+ +"); if( array[x].match(/\~/) ){ error("Special character ~ not allowed: " + array[x]); } array[x]=array[x].replace(/\~/g, ""); /* split the pair and save the unescaped values to the item */ var value=array[x].split('='); if( value.length>1 ){
if( value.length>2 ){
for(var j=2, jlen=value.length;j<jlen;j++){
value[1] = value[1] + "=" + value[j];
}
}
this[ unescape(value[0]).toLowerCase() ] = unescape(value[1]);
}
}
return true;
} else {
return false;
}
},
remove : function() {
simpleCart.remove(this.id);
simpleCart.update();
}
};

/********************************************************************************************************
* Shelf Object for managing items on shelf that can be added to cart
********************************************************************************************************/
function Shelf(){
this.items = {};
}
Shelf.prototype = {
readPage : function () {
this.items = {};
var newItems = getElementsByClassName( "simpleCart_shelfItem" ),
newItem;
me = this;
for( var x = 0, xlen = newItems.length; x<xlen; x++){
newItem = new ShelfItem();
me.checkChildren( newItems[x] , newItem );
me.items[newItem.id] = newItem;
}
},
checkChildren : function ( item , newItem) {
if( !item.childNodes )
return;
for(var x=0;item.childNodes[x];x++){
var node = item.childNodes[x];
if( node.className && node.className.match(/item_[^ ]+/) ){
var data = /item_[^ ]+/.exec(node.className)[0].split("_");
if( data[1] == "add" || data[1] == "Add" ){
var tempArray = [];
tempArray.push( node );
var addFunction = simpleCart.Shelf.addToCart(newItem.id);
simpleCart.addEventToArray( tempArray , addFunction , "click");
node.id = newItem.id;
} else {
newItem[data[1]] = node;
}
}
if( node.childNodes[0] ){
this.checkChildren( node , newItem );
}
}
},
empty : function () {
this.items = {};
},
addToCart : function ( id ) {
return function(){
if( simpleCart.Shelf.items[id]){
simpleCart.Shelf.items[id].addToCart();
} else {
error( "Shelf item with id of " + id + " does not exist.");
}
};
}
};

/********************************************************************************************************
* Shelf Item Object
********************************************************************************************************/
function ShelfItem(){
this.id = "s" + simpleCart.nextId++;
}
ShelfItem.prototype = {
remove : function () {
simpleCart.Shelf.items[this.id] = null;
},
addToCart : function () {
var outStrings = [],
valueString,
field;
for( field in this ){
if( typeof( this[field] ) !== "function" && field !== "id" ){
valueString = "";
switch(field){
case "price":
if( this[field].value ){
valueString = this[field].value;
} else if( this[field].innerHTML ) {
valueString = this[field].innerHTML;
}
/* remove all characters from price except digits and a period */
valueString = valueString.replace( /[^(\d|\.)]*/gi , "" );
valueString = valueString.replace( /,*/ , "" );
break;
case "image":
valueString = this[field].src;
break;
default:
if( this[field].value ){
valueString = this[field].value;
} else if( this[field].innerHTML ) {
valueString = this[field].innerHTML;
} else if( this[field].src ){
valueString = this[field].src;
} else {
valueString = this[field];
}
break;
}
outStrings.push( field + "=" + valueString );
}
}
simpleCart.add( outStrings );
}
};
/********************************************************************************************************
* Thanks to Peter-Paul Koch for these cookie functions (http://www.quirksmode.org/js/cookies.html)
********************************************************************************************************/
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
value = value.replace(/\=/g, '~');
document.cookie = name + "=" + escape(value) + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) === 0){
var value = unescape(c.substring(nameEQ.length, c.length));
return value.replace(/\~/g, '=');
}
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}

//*************************************************************************************************
/*
Developed by Robert Nyman, http://www.robertnyman.com
Code/licensing: http://code.google.com/p/getelementsbyclassname/
*/
var getElementsByClassName = function (className, tag, elm){
if (document.getElementsByClassName) {
getElementsByClassName = function (className, tag, elm) {
elm = elm || document;
var elements = elm.getElementsByClassName(className),
nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
returnElements = [],
current;
for(var i=0, il=elements.length; i<il; i+=1){
current = elements[i];
if(!nodeName || nodeName.test(current.nodeName)) {
returnElements.push(current);
}
}
return returnElements;
};
}
else if (document.evaluate) {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = "",
xhtmlNamespace = "http://www.w3.org/1999/xhtml",
namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
returnElements = [],
elements,
node;
for(var j=0, jl=classes.length; j<jl; j+=1){
classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
}
try {
elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
}
catch (e) {
elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
}
while ((node = elements.iterateNext())) {
returnElements.push(node);
}
return returnElements;
};
}
else {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = [],
elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
current,
returnElements = [],
match;
for(var k=0, kl=classes.length; k<kl; k+=1){
classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
}
for(var l=0, ll=elements.length; l<ll; l+=1){
current = elements[l];
match = false;
for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
match = classesToCheck[m].test(current.className);
if (!match) {
break;
}
}
if (match) {
returnElements.push(current);
}
}
return returnElements;
};
}
return getElementsByClassName(className, tag, elm);
};

/********************************************************************************************************
* Helpers
********************************************************************************************************/

String.prototype.reverse=function(){return this.split("").reverse().join("");};
Number.prototype.withCommas=function(){var x=6,y=parseFloat(this).toFixed(2).toString().reverse();while(x<y.length){y=y.substring(0,x)+","+y.substring(x);x+=4;}return y.reverse();};
Number.prototype.toCurrency=function(){return(arguments[0]?arguments[0]:"$")+this.withCommas();};

/********************************************************************************************************
* error management
********************************************************************************************************/
function error( message ){
try{
console.log( message );
}catch(err){
// alert( message );
}
}
var simpleCart = new Cart();
if( typeof jQuery !== 'undefined' ) $(document).ready(function(){simpleCart.initialize();});
else if( typeof Prototype !== 'undefined') Event.observe( window, 'load', function(){simpleCart.initialize();});
else window.onload = simpleCart.initialize;

//]]>
</script>

<script type='text/javascript'>
simpleCart.email = "johnytemplate@gmail.com";
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.taxRate = 0.02;
simpleCart.shippingFlatRate = 3.25;
simpleCart.shippingQuantityRate = 1.00;
simpleCart.cartHeaders = ["Name", "thumb_image" , "Quantity_input" , "Total", "remove" ];
</script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function($){$(document).ready(function(){$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom()});function format(str){for(var i=1;i<arguments.length;i++){str=str.replace('%'+(i-1),arguments[i])}return str}function CloudZoom(jWin,opts){var sImg=$('img',jWin);var img1;var img2;var zoomDiv=null;var $mouseTrap=null;var lens=null;var $tint=null;var softFocus=null;var $ie6Fix=null;var zoomImage;var controlTimer=0;var cw,ch;var destU=0;var destV=0;var currV=0;var currU=0;var filesLoaded=0;var mx,my;var ctx=this,zw;setTimeout(function(){if($mouseTrap===null){var w=jWin.width();jWin.parent().append(format('<div style="width:%0px;position:absolute;top:75%;left:%1px;text-align:center" class="cloud-zoom-loading" >Loading...</div>',w/3,(w/2)-(w/6))).find(':last').css('opacity',0.5)}},200);var ie6FixRemove=function(){if($ie6Fix!==null){$ie6Fix.remove();$ie6Fix=null}};this.removeBits=function(){if(lens){lens.remove();lens=null}if($tint){$tint.remove();$tint=null}if(softFocus){softFocus.remove();softFocus=null}ie6FixRemove();$('.cloud-zoom-loading',jWin.parent()).remove()};this.destroy=function(){jWin.data('zoom',null);if($mouseTrap){$mouseTrap.unbind();$mouseTrap.remove();$mouseTrap=null}if(zoomDiv){zoomDiv.remove();zoomDiv=null}this.removeBits()};this.fadedOut=function(){if(zoomDiv){zoomDiv.remove();zoomDiv=null}this.removeBits()};this.controlLoop=function(){if(lens){var x=(mx-sImg.offset().left-(cw*0.5))>>0;var y=(my-sImg.offset().top-(ch*0.5))>>0;if(x<0){x=0}else if(x>(sImg.outerWidth()-cw)){x=(sImg.outerWidth()-cw)}if(y<0){y=0}else if(y>(sImg.outerHeight()-ch)){y=(sImg.outerHeight()-ch)}lens.css({left:x,top:y});lens.css('background-position',(-x)+'px '+(-y)+'px');destU=(((x)/sImg.outerWidth())*zoomImage.width)>>0;destV=(((y)/sImg.outerHeight())*zoomImage.height)>>0;currU+=(destU-currU)/opts.smoothMove;currV+=(destV-currV)/opts.smoothMove;zoomDiv.css('background-position',(-(currU>>0)+'px ')+(-(currV>>0)+'px'))}controlTimer=setTimeout(function(){ctx.controlLoop()},30)};this.init2=function(img,id){filesLoaded++;if(id===1){zoomImage=img}if(filesLoaded===2){this.init()}};this.init=function(){$('.cloud-zoom-loading',jWin.parent()).remove();$mouseTrap=jWin.parent().append(format("<div class='mousetrap' style='background-image:url(\".\");z-index:999;position:absolute;width:%0px;height:%1px;left:%2px;top:%3px;\'></div>",sImg.outerWidth(),sImg.outerHeight(),0,0)).find(':last');$mouseTrap.bind('mousemove',this,function(event){mx=event.pageX;my=event.pageY});$mouseTrap.bind('mouseleave',this,function(event){clearTimeout(controlTimer);if(lens){lens.fadeOut(299)}if($tint){$tint.fadeOut(299)}if(softFocus){softFocus.fadeOut(299)}zoomDiv.fadeOut(300,function(){ctx.fadedOut()});return false});$mouseTrap.bind('mouseenter',this,function(event){mx=event.pageX;my=event.pageY;zw=event.data;if(zoomDiv){zoomDiv.stop(true,false);zoomDiv.remove()}var xPos=opts.adjustX,yPos=opts.adjustY;var siw=sImg.outerWidth();var sih=sImg.outerHeight();var w=opts.zoomWidth;var h=opts.zoomHeight;if(opts.zoomWidth=='auto'){w=siw}if(opts.zoomHeight=='auto'){h=sih}var appendTo=jWin.parent();switch(opts.position){case'top':yPos-=h;break;case'right':xPos+=siw;break;case'bottom':yPos+=sih;break;case'left':xPos-=w;break;case'inside':w=siw;h=sih;break;default:appendTo=$('#'+opts.position);if(!appendTo.length){appendTo=jWin;xPos+=siw;yPos+=sih}else{w=appendTo.innerWidth();h=appendTo.innerHeight()}}zoomDiv=appendTo.append(format('<div id="cloud-zoom-big" class="cloud-zoom-big" style="display:none;position:absolute;left:%0px;top:%1px;width:%2px;height:%3px;background-image:url(\'%4\');z-index:99;"></div>',xPos,yPos,w,h,zoomImage.src)).find(':last');if(sImg.attr('title')&&opts.showTitle){zoomDiv.append(format('<div class="cloud-zoom-title">%0</div>',sImg.attr('title'))).find(':last').css('opacity',opts.titleOpacity)}if($.browser.msie&&$.browser.version<7){$ie6Fix=$('<iframe frameborder="0" src="#"></iframe>').css({position:"absolute",left:xPos,top:yPos,zIndex:99,width:w,height:h}).insertBefore(zoomDiv)}zoomDiv.fadeIn(500);if(lens){lens.remove();lens=null}cw=(sImg.outerWidth()/zoomImage.width)*zoomDiv.width();ch=(sImg.outerHeight()/zoomImage.height)*zoomDiv.height();lens=jWin.append(format("<div class = 'cloud-zoom-lens' style='display:none;z-index:98;position:absolute;width:%0px;height:%1px;'></div>",cw,ch)).find(':last');$mouseTrap.css('cursor',lens.css('cursor'));var noTrans=false;if(opts.tint){lens.css('background','url("'+sImg.attr('src')+'")');$tint=jWin.append(format('<div style="display:none;position:absolute; left:0px; top:0px; width:%0px; height:%1px; background-color:%2;" />',sImg.outerWidth(),sImg.outerHeight(),opts.tint)).find(':last');$tint.css('opacity',opts.tintOpacity);noTrans=true;$tint.fadeIn(500)}if(opts.softFocus){lens.css('background','url("'+sImg.attr('src')+'")');softFocus=jWin.append(format('<div style="position:absolute;display:none;top:2px; left:2px; width:%0px; height:%1px;" />',sImg.outerWidth()-2,sImg.outerHeight()-2,opts.tint)).find(':last');softFocus.css('background','url("'+sImg.attr('src')+'")');softFocus.css('opacity',0.5);noTrans=true;softFocus.fadeIn(500)}if(!noTrans){lens.css('opacity',opts.lensOpacity)}if(opts.position!=='inside'){lens.fadeIn(500)}zw.controlLoop();return})};img1=new Image();$(img1).load(function(){ctx.init2(this,0)});img1.src=sImg.attr('src');img2=new Image();$(img2).load(function(){ctx.init2(this,1)});img2.src=jWin.attr('href')}$.fn.CloudZoom=function(options){try{document.execCommand("BackgroundImageCache",false,true)}catch(e){}this.each(function(){var relOpts,opts;eval('var a = {'+$(this).attr('rel')+'}');relOpts=a;if($(this).is('.cloud-zoom')){$(this).css({'position':'relative','display':'block'});$('img',$(this)).css({'display':'block'});if($(this).parent().attr('id')!='wrap'){$(this).wrap('<div id="wrap" style="top:0px;z-index:9999;position:relative;"></div>')}opts=$.extend({},$.fn.CloudZoom.defaults,options);opts=$.extend({},opts,relOpts);$(this).data('zoom',new CloudZoom($(this),opts))}else if($(this).is('.cloud-zoom-gallery')){opts=$.extend({},relOpts,options);$(this).data('relOpts',opts);$(this).bind('click',$(this),function(event){var data=event.data.data('relOpts');$('#'+data.useZoom).data('zoom').destroy();$('#'+data.useZoom).attr('href',event.data.attr('href'));$('#'+data.useZoom+' img').attr('src',event.data.data('relOpts').smallImage);$('#'+event.data.data('relOpts').useZoom).CloudZoom();return false})}});return this};$.fn.CloudZoom.defaults={zoomWidth:'auto',zoomHeight:'auto',position:'right',tint:false,tintOpacity:0.5,lensOpacity:0.5,softFocus:false,smoothMove:3,showTitle:true,titleOpacity:0.5,adjustX:0,adjustY:0}})(jQuery);
//]]>
</script>
</head>

<body>

<div id='outer-wrapper'>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='WhereIsMyIpAdress (Header)' type='Header'>
</b:widget>
</b:section>
</div>

<div id='content-wrapper'>

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<b:if cond='data:mobile == "false"'>
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == "false"'>
</div></div>
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer simpleCart_shelfItem'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
<data:adEnd/>
</div>
<b:include name='nextprev'/>
<b:include name='feedLinks'/>
<b:if cond='data:top.showStars'>
<script src='//www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>/*<![CDATA[*/google.load("annotations","1",{"locale":"<data:top.languageCode/>"});function initialize(){google.annotations.setApplicationId(<data:top.blogspotReviews/>);google.annotations.createAll();google.annotations.fetch();}
google.setOnLoadCallback(initialize);/*]]>*/</script>
</b:if>
<b:else/>
<b:include name='mobile-main'/>
</b:if>
<b:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
</b:if>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'></b:includable>
<b:includable id='comment-form' var='post'></b:includable>
<b:includable id='commentDeleteIcon' var='comment'></b:includable>
<b:includable id='comment_count_picker' var='post'></b:includable>
<b:includable id='comment_picker' var='post'></b:includable>
<b:includable id='comments' var='post'></b:includable>
<b:includable id='feedLinks'></b:includable>
<b:includable id='feedLinksBody' var='links'></b:includable>
<b:includable id='iframe_comments' var='post'></b:includable>
<b:includable id='mobile-index-post' var='post'></b:includable>
<b:includable id='mobile-main' var='top'></b:includable>
<b:includable id='mobile-nextprev'></b:includable>
<b:includable id='mobile-post' var='post'></b:includable>
<b:includable id='nextprev'></b:includable>

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template simpleCart_shelfItem'>
<a expr:name='data:post.id'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='simpleCart_shelfItem'>
<div class='item_name'>
<data:post.title/></div>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<data:post.body/>
</div>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<div style='clear:both'/>
</div>
<b:if cond='data:blog.pageType != "static_page"'>
<input class='item_add' type='button' value='Add to Cart'/>
</b:if>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>
<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
</b:if>
</span>
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>
<span class='post-icons'>
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<b:include data='post' name='postQuickEdit'/>
</span>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>
</div>
</div>
</div>
</b:includable>

<b:includable id='postQuickEdit' var='post'></b:includable>
<b:includable id='shareButtons' var='post'></b:includable>
<b:includable id='status-message'></b:includable>
<b:includable id='threaded_comments' var='post'></b:includable>
</b:widget>
</b:section>
</div>
<div id='sidebar-wrapper'>
<div id='shoppingCart'>
<h2>Shopping Cart</h2>
<div class='simpleCart_items'/>
<table><tbody>
<tr><td class='odd'>Total Items: </td><td class='even'><span class='simpleCart_quantity'/></td></tr>
<tr><td class='odd'>SubTotal: </td><td class='even'><span class='simpleCart_total'/></td></tr>
<tr><td class='odd'>Tax Cost: </td><td class='even'><span class='simpleCart_taxCost'/></td></tr>
<tr><td class='odd'>Shipping Cost: </td><td class='even'><span class='simpleCart_shippingCost'/></td></tr>
<tr><td class='odd'>Final Total: </td><td class='even'><span class='simpleCart_finalTotal'/></td></tr>
</tbody></table>
<div class='cartbuttons'>
<a class='simpleCart_empty' href='javascript:'>Empty Cart</a>
<a class='simpleCart_checkout' href='javascript:'>Checkout</a>
</div>
</div>
<div class='clear'/>
</div>
<div class='clear'> </div>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div></div>
</body>
</html>

--------------------------------------------------------------------------------------------------------
READ MORE:
METHOD HOW TO ADD POST IN THIS TEMPLATE