Hi there,I have been looking for solutions but no one seems to be able to help me.Days ago,I created a blogger blot at this url http://wshienrun.blogspot.com/
However,when I tried to add the code for drop down menu from [url}http://www.bloggerhome.net/2010/04/how-to-add-horizontal-dropdown-menu.html[/url] original content slider in the blog suddenly disappeared and it dropped down into the post,causing them to be 'fused' together.Any help pls?:S I will put credits for those who helped me.

Ps:The theme I used is games hit blogger theme from http://btemplates.com/2010/blogger-template-games-hit/

did you get help for this already? Ifnot then plase post your code here to better undrstand what you have and wat you want to do.

Please post your code, and just as a side note, there a couple of JavaScript errors there...

Alright.This is the last place I can ask for help.Other forums are not responsive and helpful though..This is the code with widgets expanded...

<?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 expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
</b:if>


<!-- Start www.bloggertipandtrick.net: Changing the Blogger Title Tag  -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
<!-- End www.bloggertipandtrick.net: Changing the Blogger Title Tag  -->


<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>


<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:   GamesHit
Author: Lasantha Bandara
URL 1:  http://www.premiumbloggertemplates.com/
URL 2:  http://www.bloggertipandtrick.net/
Date:   September 2010
License:  This free Blogger template is licensed under the Creative Commons Attribution 3.0 License, which permits both personal and commercial use.
However, to satisfy the 'attribution' clause of the license, you are required to keep the footer links intact which provides due credit to its authors. For more specific details about the license, you may visit the URL below:http://creativecommons.org/licenses/by/3.0/
----------------------------------------------- */


/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc6600">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#999999">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<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">
*/


/* Use this with templates/template-twocol.html */


]]></b:skin>


<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js' type='text/javascript'/>


<script type='text/javascript'>
//<![CDATA[


//MooTools More, <http://mootools.net/more>. Copyright (c) 2006-2008 Valerio Proietti, <http://mad4milk.net>, MIT Style License.


eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('11.36=f 12({1M:11,a:{1m:"2s"},X:8(B,A){7.P("1v",8(){7.1w=(7.13["k"+7.1x.37()]!=0);b(7.1w&&2t.2u.38){7.e.39().2v(7.13)}},n);7.e=7.2w=$(B);7.Q(A);9 C=7.e.1n("13");7.13=C||f 1c("3Y",{3Z:$1Y(7.e.40("14","1N"),{41:"42"})}).43(7.e);7.e.1Z("13",7.13).1d("14",0);7.l=[];7.1w=n},2s:8(){7.14="14-15";7.1x="21";7.k=7.e.2x},22:8(){7.14="14-16";7.1x="23";7.k=7.e.2y},17:8(A){7.e.1d(7.14,A[0]);7.13.1d(7.1x,A[1]);c 7},1O:8(E,D,C){9 B=[];9 A=2;A.3a(8(F){B[F]=11.1O(E[F],D[F],C)});c B},h:8(B,E){b(!7.z(Y.2z,B,E)){c 7}7[E||7.a.1m]();9 D=7.e.1e(7.14).1P();9 C=7.13.1e(7.1x).1P();9 A=[[D,C],[0,7.k]];9 G=[[D,C],[-7.k,0]];9 F;1Q(B){o"R":F=A;1f;o"3b":F=G;1f;o"1R":F=(7.13["k"+7.1x.37()]==0)?A:G}c 7.Q(F[0],F[1])},3c:8(A){c 7.h("R",A)},3d:8(A){c 7.h("3b",A)},2A:8(A){7[A||7.a.1m]();7.1w=j;c 7.17([-7.k,0])},2B:8(A){7[A||7.a.1m]();7.1w=n;c 7.17([0,7.k])},1R:8(A){c 7.h("1R",A)}});1c.44.r={17:8(B){9 A=7.1n("r");b(A){A.Z()}c 7.3e("r").1Z("r:a",$1Y({2C:"Z"},B))},2D:8(A){b(A||!7.1n("r")){b(A||!7.1n("r:a")){7.17("r",A)}7.1Z("r",f 11.36(7,7.1n("r:a")))}c 7.1n("r")}};1c.1o({r:8(D,E){D=D||"1R";9 B=7.2D("r"),A;1Q(D){o"2A":B.2A(E);1f;o"2B":B.2B(E);1f;o"1R":9 C=7.1n("r:2E",B.1w);B[(C)?"3d":"3c"](E);7.1Z("r:2E",!C);A=n;1f;45:B.h(D,E)}b(!A){7.3e("r:2E")}c 7}});11.46=f 12({1M:11,a:{k:{x:0,y:0},3f:n},X:8(B,A){7.e=7.2w=$(B);7.Q(A);9 D=7.Z.M(7,j);b($10(7.e)!="e"){7.e=$(7.e.24().25)}9 C=7.e;b(7.a.3f){7.P("h",8(){C.P("2F",D)},n);7.P("1v",8(){C.18("2F",D)},n)}},17:8(){9 A=1y.3g(Y);7.e.3h(A[0],A[1])},1O:8(E,D,C){9 B=[];9 A=2;A.3a(8(F){B.26(11.1O(E[F],D[F],C))});c B},h:8(C,H){b(!7.z(Y.2z,C,H)){c 7}9 E=7.e.3i(),F=7.e.47();9 B=7.e.3j(),D={x:C,y:H};S(9 G R D){9 A=F[G]-E[G];b($1z(D[G])){D[G]=($10(D[G])=="2G")?D[G].m(0,A):A}s{D[G]=B[G]}D[G]+=7.a.k[G]}c 7.Q([B.x,B.y],[D.x,D.y])},48:8(){c 7.h(j,0)},49:8(){c 7.h(0,j)},4a:8(){c 7.h("1A",j)},4b:8(){c 7.h(j,"1B")},4c:8(B){9 A=$(B).27(7.e);c 7.h(A.x,A.y)}});11.3k=f 12({1M:11.4d,X:8(B,A){7.2H=7.2w=$$(B);7.Q(A)},1O:8(G,H,I){9 C={};S(9 D R G){9 A=G[D],E=H[D],F=C[D]={};S(9 B R A){F=7.Q(A,E,I)}}c C},17:8(B){S(9 C R B){9 A=B[C];S(9 D R A){7.4e(7.2H[C],D,A[D],7.a.2I)}}c 7},h:8(C){b(!7.z(Y.2z,C)){c 7}9 H={},I={};S(9 D R C){9 F=C[D],A=H[D]={},G=I[D]={};S(9 B R F){9 E=7.4f(7.2H[D],B,F);A=E.4g;G=E.4h}}c 7.Q(H,I)}});9 1C=f 12({2J:[2K,2L],a:{1p:6,2I:"4i",1g:j,2M:n,m:j,28:j,29:j,1q:j,U:{x:"16",y:"15"}},X:8(){9 B=1y.2C(Y,{a:4j.10,e:$4k});7.e=$(B.e);7.t=7.e.24();7.2N(B.a||{});9 A=$10(7.a.28);7.2O=(A=="4l"||A=="4m")?$$(7.a.28):$(7.a.28)||7.e;7.19={l:{},2P:{}};7.p={h:{},l:{}};7.2a=(2t.2u.4n)?"4o":"2b";7.v={h:7.h.M(7),z:7.z.M(7),V:7.V.M(7),1h:7.1h.M(7),Z:7.Z.M(7),2c:$2Q(j)};7.3l()},3l:8(){7.2O.P("2b",7.v.h);c 7},4p:8(){7.2O.18("2b",7.v.h);c 7},h:8(C){b(7.a.1q){C.1q()}7.u("4q",7.e);7.19.h=C.N;9 A=7.a.m;7.m={x:[],y:[]};S(9 D R 7.a.U){b(!7.a.U[D]){3m}b(7.a.2M){7.p.l[D]=7.e.1e(7.a.U[D]).1P()}s{7.p.l[D]=7.e[7.a.U[D]]}b(7.a.29){7.p.l[D]*=-1}7.19.2P[D]=C.N[D]-7.p.l[D];b(A&&A[D]){S(9 B=2;B--;B){b($1z(A[D])){7.m[D]=$2Q(A[D])()}}}}b($10(7.a.1g)=="2G"){7.a.1g={x:7.a.1g,y:7.a.1g}}7.t.2R({1D:7.v.z,2d:7.v.Z});7.t.P(7.2a,7.v.2c)},z:8(A){b(7.a.1q){A.1q()}9 B=i.O(i.4r(i.3n(A.N.x-7.19.h.x,2)+i.3n(A.N.y-7.19.h.y,2)));b(B>7.a.1p){7.Z();7.t.2R({1D:7.v.V,2d:7.v.1h});7.u("h",7.e).u("1p",7.e)}},V:8(A){b(7.a.1q){A.1q()}7.19.l=A.N;S(9 B R 7.a.U){b(!7.a.U){3m}7.p.l=7.19.l-7.19.2P;b(7.a.29){7.p.l*=-1}b(7.a.m&&7.m){b($1z(7.m[1])&&(7.p.l>7.m[1])){7.p.l=7.m[1]}s{b($1z(7.m[0])&&(7.p.l<7.m[0])){7.p.l=7.m[0]}}}b(7.a.1g){7.p.l-=(7.p.l%7.a.1g)}b(7.a.2M){7.e.1d(7.a.U,7.p.l+7.a.2I)}s{7.e[7.a.U]=7.p.l}}7.u("V",7.e)},Z:8(A){7.t.18("1D",7.v.z);7.t.18("2d",7.v.Z);b(A){7.t.18(7.2a,7.v.2c);7.u("Z",7.e)}},1h:8(A){7.t.18(7.2a,7.v.2c);7.t.18("1D",7.v.V);7.t.18("2d",7.v.1h);b(A){7.u("1v",7.e)}}});1c.1o({4s:8(A){c f 1C(7,$2e({U:{x:"23",y:"21"}},A))}});1C.3o=f 12({1M:1C,a:{1S:[],1a:j},X:8(C,B){7.Q(C,B);7.1S=$$(7.a.1S);7.1a=$(7.a.1a);b(7.1a&&$10(7.1a)!="e"){7.1a=$(7.1a.24().25)}C=7.e;9 D=C.1e("1N");9 A=(D!="4t")?D:"4u";b(C.1e("16")=="3p"||C.1e("15")=="3p"){C.1N(C.27(C.3q))}C.1d("1N",A);7.P("h",8(){7.2f()},n)},h:8(B){b(7.1a){9 D=7.e,J=7.1a,E=J.3r(D.3q),F={},A={};["15","1A","1B","16"].1r(8(K){F[K]=J.1e("4v-"+K).1P();A[K]=D.1e("14-"+K).1P()},7);9 C=D.2y+A.16+A.1A,I=D.2x+A.15+A.1B;9 H=[E.16+F.16,E.1A-F.1A-C];9 G=[E.15+F.15,E.1B-F.1B-I];7.a.m={x:H,y:G}}7.Q(B)},3s:8(B){B=B.3r();9 A=7.19.l;c(A.x>B.16&&A.x<B.1A&&A.y<B.1B&&A.y>B.15)},2f:8(){9 A=7.1S.4w(7.3s,7).3t();b(7.1s!=A){b(7.1s){7.u("4x",[7.e,7.1s])}b(A){7.1s=A;7.u("4y",[7.e,A])}s{7.1s=1E}}},V:8(A){7.Q(A);b(7.1S.2g){7.2f()}},1h:8(A){7.2f();7.u("4z",[7.e,7.1s]);7.1s=1E;c 7.Q(A)}});1c.1o({4A:8(A){c f 1C.3o(7,A)}});1F.2S=f 12({1M:2S,a:{3u:n},X:8(B,A){7.Q(B,A);7.2h()},3v:8(){9 A=3w.4B(7.2T);b(!A||A.2g>4C){c j}b(A=="{}"){7.39()}s{7.4D(A)}c n},2h:8(){7.2T=f 1F(3w.4E(7.4F(),n));c 7}});1F.2S.1o((8(){9 A={};1F.1r(1F.4G,8(C,B){A=8(){9 D=C.4H(7.2T,Y);b(7.a.3u){7.3v()}c D}});c A})());9 W=f 4I({X:8(B,C){b(Y.2g>=3){C="1G";B=1y.2i(Y,0,3)}s{b(4J B=="4K"){b(B.2j(/1G/)){B=B.3x().2U(n)}s{b(B.2j(/q/)){B=B.1T()}s{B=B.2U(n)}}}}C=C||"1G";1Q(C){o"q":9 A=B;B=B.1T();B.q=A;1f;o"2V":B=B.2U(n);1f}B.1G=B.2i(0,3);B.q=B.q||B.2k();B.2V=B.3x();c $1Y(B,7)}});W.1o({4L:8(){9 A=1y.2i(Y);9 C=($10(A.3t())=="2G")?A.4M():50;9 B=7.2i();A.1r(8(D){D=f W(D);S(9 E=0;E<3;E++){B[E]=i.O((B[E]/1i*(1i-C))+(D[E]/1i*C))}});c f W(B,"1G")},29:8(){c f W(7.4N(8(A){c 1H-A}))},4O:8(A){c f W([A,7.q[1],7.q[2]],"q")},4P:8(A){c f W([7.q[0],A,7.q[2]],"q")},4Q:8(A){c f W([7.q[0],7.q[1],A],"q")}});8 $4R(C,B,A){c f W([C,B,A],"1G")}8 $4S(C,B,A){c f W([C,B,A],"q")}8 $4T(A){c f W(A,"2V")}1y.1o({2k:8(){9 B=7[0],C=7[1],J=7[2];9 G,F,H;9 I=i.1U(B,C,J),E=i.1j(B,C,J);9 K=I-E;H=I/1H;F=(I!=0)?K/I:0;b(F==0){G=0}s{9 D=(I-B)/K;9 A=(I-C)/K;9 L=(I-J)/K;b(B==I){G=L-A}s{b(C==I){G=2+D-L}s{G=4+A-D}}G/=6;b(G<0){G++}}c[i.O(G*3y),i.O(F*1i),i.O(H*1i)]},1T:8(){9 C=i.O(7[2]/1i*1H);b(7[1]==0){c[C,C,C]}s{9 A=7[0]%3y;9 E=A%2W;9 F=i.O((7[2]*(1i-7[1]))/4U*1H);9 D=i.O((7[2]*(3z-7[1]*E))/3A*1H);9 B=i.O((7[2]*(3z-7[1]*(2W-E)))/3A*1H);1Q(i.4V(A/2W)){o 0:c[C,B,F];o 1:c[D,C,F];o 2:c[F,C,B];o 3:c[F,D,C];o 4:c[B,F,C];o 5:c[C,F,D]}}c j}});4W.1o({2k:8(){9 A=7.2j(/\\d{1,3}/g);c(A)?q.2k():1E},1T:8(){9 A=7.2j(/\\d{1,3}/g);c(A)?A.1T():1E}});9 4X=f 12({X:8(){7.2l=1y.3g(Y);7.1I={};7.1J={}},P:8(B,A){7.1J=7.1J||{};7.1I=7.1I||[];b(7.1I.3B(A)){c j}s{7.1I.26(A)}7.2l.1r(8(C,D){C.P(B,7.z.M(7,[B,C,D]))},7);c 7},z:8(C,A,B){7.1J[C]=n;9 D=7.2l.4Y(8(F,E){c 7.1J[C][E]||j},7);b(!D){c}7.1J[C]={};7.1I[C].1r(8(E){E.3C(7,7.2l,A)},7)}});9 3D=f 1F({3E:8(F,D){D=$1Y({1t:$1K,t:t,z:$2Q(n)},D);9 B=f 1c("4Z",{2X:F,10:"3F/3E"});9 E=D.1t.M(B),A=D.z,G=D.t;2m D.1t;2m D.z;2m D.t;B.2R({2h:E,51:8(){b(["52","1v"].3B(7.53)){E()}}}).3G(D);b(2t.2u.38){9 C=(8(){b(!$54(A)){c}$3H(C);E()}).3I(50)}c B.2v(G.3J)},3K:8(B,A){c f 1c("2C",$2e({55:"56",57:"58",10:"3F/3K",59:B},A)).2v(t.3J)},3L:8(C,B){B=$2e({1t:$1K,3M:$1K,3N:$1K},B);9 D=f 5a();9 A=$(D)||f 1c("5b");["2h","5c","5d"].1r(8(E){9 F="5e"+E;9 G=B[F];2m B[F];D[F]=8(){b(!D){c}b(!A.5f){A.23=D.23;A.21=D.21}D=D.1t=D.3M=D.3N=1E;G.3O(1,A,A);A.u(E,A,1)}});D.2X=A.2X=C;b(D&&D.1v){D.1t.3O(1)}c A.3G(B)},5g:8(D,C){C=$2e({2Y:$1K,3P:$1K},C);b(!D.26){D=[D]}9 A=[];9 B=0;D.1r(8(F){9 E=f 3D.3L(F,{1t:8(){C.3P.3C(7,B,D.5h(F));B++;b(B==D.2g){C.2Y()}}});A.26(E)});c f 3k(A)}});9 5i=f 12({2J:[2K,2L],a:{5j:8(A){b(7.a.1p){A=7.2Z(7.w)}7.1L.1d(7.1V,A)},1p:j,k:0,T:j,2n:j,1k:1i,1m:"22"},X:8(E,A,D){7.2N(D);7.e=$(E);7.1L=$(A);7.30=7.31=7.w=-1;7.e.P("2b",7.3Q.M(7));b(7.a.2n){7.e.P("2F",7.3R.5k(7))}9 F,B={},C={x:j,y:j};1Q(7.a.1m){o"2s":7.1l="y";7.1V="15";F="2x";1f;o"22":7.1l="x";7.1V="16";F="2y"}7.3S=7.1L[F]/2;7.1b=7.e[F]-7.1L[F]+(7.a.k*2);7.1j=$1z(7.a.T[0])?7.a.T[0]:0;7.1U=$1z(7.a.T[1])?7.a.T[1]:7.a.1k;7.T=7.1U-7.1j;7.1k=7.a.1k||7.1b;7.1u=i.32(7.T)/7.1k;7.3T=7.1u*7.1b/i.32(7.T);7.1L.1d("1N","5l").1d(7.1V,-7.a.k);C[7.1l]=7.1V;B[7.1l]=[-7.a.k,7.1b-7.a.k];7.V=f 1C(7.1L,{1p:0,m:B,U:C,5m:7.2o.M(7),5n:7.2o.M(7),2Y:8(){7.2o();7.2p()}.M(7)});b(7.a.1p){7.V.a.1g=i.5o(7.3T);7.V.a.m[7.1l][1]=7.1b}},17:8(A){b(!((7.T>0)^(A<7.1j))){A=7.1j}b(!((7.T>0)^(A>7.1U))){A=7.1U}7.w=i.O(A);7.2q();7.2p();7.u("3U",7.2Z(7.w));c 7},3Q:8(C){9 B=7.T<0?-1:1;9 A=C.N[7.1l]-7.e.27()[7.1l]-7.3S;A=A.m(-7.a.k,7.1b-7.a.k);7.w=i.O(7.1j+B*7.33(A));7.2q();7.2p();7.u("3U",A)},3R:8(A){9 B=(7.a.1m=="22")?(A.2n<0):(A.2n>0);7.17(B?7.w-7.1u:7.w+7.1u);A.1h()},2o:8(){9 B=7.T<0?-1:1;9 A=7.V.p.l[7.1l];A=A.m(-7.a.k,7.1b-7.a.k);7.w=i.O(7.1j+B*7.33(A));7.2q()},2q:8(){b(7.30!=7.w){7.30=7.w;7.u("3V",7.w)}},2p:8(){b(7.31!==7.w){7.31=7.w;7.u("1v",7.w+"")}},33:8(A){9 B=(A+7.a.k)*7.1u/7.1b*7.1k;c 7.a.1k?i.O(B-=B%7.1u):B},2Z:8(A){c(7.1b*i.32(7.1j-A))/(7.1k*7.1u)-7.a.k}});9 5p=f 12({2J:[2K,2L],a:{1W:20,34:1,5q:8(A,B){7.e.3h(A,B)}},X:8(B,A){7.2N(A);7.e=$(B);7.2r=($10(7.e)!="e")?$(7.e.24().25):7.e;7.1X=1E;7.35=7.3W.M(7)},h:8(){7.2r.P("1D",7.35)},1h:8(){7.2r.18("1D",7.35);7.1X=$3H(7.1X)},3W:8(A){7.N=(7.2r.2D("5r")=="25")?A.5s:A.N;b(!7.1X){7.1X=7.3X.3I(50,7)}},3X:8(){9 B=7.e.3i(),A=7.e.3j(),E=7.e.27(),D={x:0,y:0};S(9 C R 7.N){b(7.N[C]<(7.a.1W+E[C])&&A[C]!=0){D[C]=(7.N[C]-7.a.1W-E[C])*7.a.34}s{b(7.N[C]+7.a.1W>(B[C]+E[C])&&B[C]+B[C]!=A[C]){D[C]=(7.N[C]-B[C]+7.a.1W-E[C])*7.a.34}}}b(D.y||D.x){7.u("3V",[A.x+D.x,A.y+D.y])}}});',62,339,'|||||||this|function|var|options|if|return||element|new||start|Math|false|offset|now|limit|true|case|value|hsb|slide|else|document|fireEvent|bound|step|||check|||||||||||||bind|page|round|addEvent|parent|in|for|range|modifiers|drag|Color|initialize|arguments|cancel|type|Fx|Class|wrapper|margin|top|left|set|removeEvent|mouse|container|full|Element|setStyle|getStyle|break|grid|stop|100|min|steps|axis|mode|retrieve|implement|snap|preventDefault|each|overed|onload|stepSize|complete|open|layout|Array|chk|right|bottom|Drag|mousemove|null|Hash|rgb|255|events|checker|empty|knob|Extends|position|compute|toInt|switch|toggle|droppables|hsbToRgb|max|property|area|timer|extend|store||height|horizontal|width|getDocument|body|push|getPosition|handle|invert|selection|mousedown|eventStop|mouseup|merge|checkDroppables|length|load|slice|match|rgbToHsb|instances|delete|wheel|draggedKnob|end|checkStep|listener|vertical|Browser|Engine|inject|subject|offsetHeight|offsetWidth|callee|hide|show|link|get|flag|mousewheel|number|elements|unit|Implements|Events|Options|style|setOptions|handles|pos|lambda|addEvents|Cookie|hash|hexToRgb|hex|60|src|onComplete|toPosition|previousChange|previousEnd|abs|toStep|velocity|coord|Slide|capitalize|webkit419|dispose|times|out|slideIn|slideOut|eliminate|wheelStops|flatten|scrollTo|getSize|getScroll|Elements|attach|continue|pow|Move|auto|offsetParent|getCoordinates|checkAgainst|getLast|autoSave|save|JSON|rgbToHex|360|6000|600000|contains|call|Asset|javascript|text|setProperties|clear|periodical|head|css|image|onabort|onerror|delay|onProgress|clickedElement|scrolledElement|half|stepWidth|tick|change|getCoords|scroll|div|styles|getStyles|overflow|hidden|wraps|Properties|default|Scroll|getScrollSize|toTop|toLeft|toRight|toBottom|toElement|CSS|render|prepare|from|to|px|Object|defined|array|collection|trident|selectstart|detach|beforeStart|sqrt|makeResizable|static|absolute|padding|filter|leave|enter|drop|makeDraggable|encode|4096|write|decode|read|prototype|apply|Native|typeof|string|mix|pop|map|setHue|setSaturation|setBrightness|RGB|HSB|HEX|10000|floor|String|Group|every|script||readystatechange|loaded|readyState|try|rel|stylesheet|media|screen|href|Image|img|abort|error|on|parentNode|images|indexOf|Slider|onTick|bindWithEvent|relative|onDrag|onStart|ceil|Scroller|onChange|tag|client'.split('|'),0,{}))


//]]>
</script>


<script type='text/javascript'>
//<![CDATA[


/*
This file is part of JonDesign's SmoothGallery v2.1beta1.


JonDesign's SmoothGallery is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.


JonDesign's SmoothGallery is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.


You should have received a copy of the GNU General Public License
along with JonDesign's SmoothGallery; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA


Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)
Contributed code by:
- Christian Ehret (bugfix)
- Nitrix (bugfix)
- Valerio from Mad4Milk for his great help with the carousel scrolling and many other things.
- Archie Cowan for helping me find a bugfix on carousel inner width problem.
- Tomocchino from #mootools for the preloader class
Many thanks to:
- The mootools team for the great mootools lib, and it's help and support throughout the project.
- Harald Kirschner (digitarald: http://digitarald.de/) for all his great libs. Some used here as plugins.
*/


/* some quirks to circumvent broken stuff in mt1.2 */
function isBody(element){
return (/^(?:body|html)$/i).test(element.tagName);
};
Element.implement({
getPosition: function(relative){
if (isBody(this)) return {x: 0, y: 0};
var el = this, position = {x: 0, y: 0};
while (el){
position.x += el.offsetLeft;
position.y += el.offsetTop;
el = el.offsetParent;
}
var rpos = (relative) ? $(relative).getPosition() : {x: 0, y: 0};
return {x: position.x - rpos.x, y: position.y - rpos.y};
}
});


// declaring the class
var gallery = {
Implements: [Events, Options],
options: {
showArrows: true,
showCarousel: true,
showInfopane: true,
embedLinks: true,
fadeDuration: 500,
timed: false,
delay: 9000,
preloader: true,
preloaderImage: true,
preloaderErrorImage: true,
/* Data retrieval */
manualData: [],
populateFrom: false,
populateData: true,
destroyAfterPopulate: true,
elementSelector: "div.imageElement",
titleSelector: "h3",
subtitleSelector: "p",
linkSelector: "a.open",
imageSelector: "img.full",
thumbnailSelector: "img.thumbnail",
defaultTransition: "fade",
/* InfoPane options */
slideInfoZoneOpacity: 0.7,
slideInfoZoneSlide: true,
/* Carousel options */
carouselMinimizedOpacity: 0.4,
carouselMinimizedHeight: 20,
carouselMaximizedOpacity: 0.9,
thumbHeight: 75,
thumbWidth: 100,
thumbSpacing: 10,
thumbIdleOpacity: 0.2,
textShowCarousel: 'Pictures',
showCarouselLabel: true,
thumbCloseCarousel: true,
useThumbGenerator: false,
thumbGenerator: 'resizer.php',
useExternalCarousel: false,
carouselElement: false,
carouselHorizontal: true,
activateCarouselScroller: true,
carouselPreloader: true,
textPreloadingCarousel: 'Loading...',
/* CSS Classes */
baseClass: 'jdGallery',
withArrowsClass: 'withArrows',
/* Plugins: HistoryManager */
useHistoryManager: false,
customHistoryKey: false,
/* Plugins: ReMooz */
useReMooz: false
},
initialize: function(element, options) {
this.setOptions(options);
this.fireEvent('onInit');
this.currentIter = 0;
this.lastIter = 0;
this.maxIter = 0;
this.galleryElement = element;
this.galleryData = this.options.manualData;
this.galleryInit = 1;
this.galleryElements = Array();
this.thumbnailElements = Array();
this.galleryElement.addClass(this.options.baseClass);


if (this.options.useReMooz&&(this.options.defaultTransition=="fade"))
this.options.defaultTransition="crossfade";


this.populateFrom = element;
if (this.options.populateFrom)
this.populateFrom = this.options.populateFrom;
if (this.options.populateData)
this.populateData();
element.style.display="block";


if (this.options.useHistoryManager)
this.initHistory();


if ((this.options.embedLinks)|(this.options.useReMooz))
{
this.currentLink = new Element('a').addClass('open').setProperties({
href: '#',
title: ''
}).injectInside(element);
if ((!this.options.showArrows) && (!this.options.showCarousel))
this.galleryElement = element = this.currentLink;
else
this.currentLink.setStyle('display', 'none');
}


this.constructElements();
if ((this.galleryData.length>1)&&(this.options.showArrows))
{
var leftArrow = new Element('a').addClass('left').addEvent(
'click',
this.prevItem.bind(this)
).injectInside(element);
var rightArrow = new Element('a').addClass('right').addEvent(
'click',
this.nextItem.bind(this)
).injectInside(element);
this.galleryElement.addClass(this.options.withArrowsClass);
}
this.loadingElement = new Element('div').addClass('loadingElement').injectInside(element);
if (this.options.showInfopane) this.initInfoSlideshow();
if (this.options.showCarousel) this.initCarousel();
this.doSlideShow(1);
},
populateData: function() {
currentArrayPlace = this.galleryData.length;
options = this.options;
var data = $A(this.galleryData);
data.extend(this.populateGallery(this.populateFrom, currentArrayPlace));
this.galleryData = data;
this.fireEvent('onPopulated');
},
populateGallery: function(element, startNumber) {
var data = [];
options = this.options;
currentArrayPlace = startNumber;
element.getElements(options.elementSelector).each(function(el) {
elementDict = $H({
image: el.getElement(options.imageSelector).getProperty('src'),
number: currentArrayPlace,
transition: this.options.defaultTransition
});
if ((options.showInfopane) | (options.showCarousel))
elementDict.extend({
title: el.getElement(options.titleSelector).innerHTML,
description: el.getElement(options.subtitleSelector).innerHTML
});
if ((options.embedLinks) | (options.useReMooz))
elementDict.extend({
link: el.getElement(options.linkSelector).href||false,
linkTitle: el.getElement(options.linkSelector).title||false,
linkTarget: el.getElement(options.linkSelector).getProperty('target')||false
});
if ((!options.useThumbGenerator) && (options.showCarousel))
elementDict.extend({
thumbnail: el.getElement(options.thumbnailSelector).getProperty('src')
});
else if (options.useThumbGenerator)
elementDict.extend({
thumbnail: options.thumbGenerator + '?imgfile=' + elementDict.image + '&max_width=' + options.thumbWidth + '&max_height=' + options.thumbHeight
});


data.extend([elementDict]);
currentArrayPlace++;
if (this.options.destroyAfterPopulate)
el.dispose();
});
return data;
},
constructElements: function() {
el = this.galleryElement;
if (this.options.embedLinks && (!this.options.showArrows))
el = this.currentLink;
this.maxIter = this.galleryData.length;
var currentImg;
for(i=0;i<this.galleryData.length;i++)
{
var currentImg = new Fx.Morph(
new Element('div').addClass('slideElement').setStyles({
'position':'absolute',
'left':'0px',
'right':'0px',
'margin':'0px',
'padding':'0px',
'backgroundPosition':"center center",
'opacity':'0'
}).injectInside(el),
{duration: this.options.fadeDuration}
);
if (this.options.preloader)
{
currentImg.source = this.galleryData.image;
currentImg.loaded = false;
currentImg.load = function(imageStyle, i) {
if (!imageStyle.loaded) {
this.galleryData.imgloader = new Asset.image(imageStyle.source, {
'onload'  : function(img, i){
img.element.setStyle(
'backgroundImage',
"url('" + img.source + "')")
img.loaded = true;
img.width = this.galleryData.imgloader.width;
img.height = this.galleryData.imgloader.height;
}.pass([imageStyle, i], this)
});
}
}.pass([currentImg, i], this);
} else {
currentImg.element.setStyle('backgroundImage',
"url('" + this.galleryData.image + "')");
}
this.galleryElements[parseInt(i)] = currentImg;
}
},
destroySlideShow: function(element) {
var myClassName = element.className;
var newElement = new Element('div').addClass('myClassName');
element.parentNode.replaceChild(newElement, element);
},
startSlideShow: function() {
this.fireEvent('onStart');
this.loadingElement.style.display = "none";
this.lastIter = this.maxIter - 1;
this.currentIter = 0;
this.galleryInit = 0;
this.galleryElements[parseInt(this.currentIter)].set({opacity: 1});
if (this.options.showInfopane)
this.showInfoSlideShow.delay(1000, this);
if (this.options.useReMooz)
this.makeReMooz.delay(1000, this);
var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
if (this.options.showCarousel&&(!this.options.carouselPreloader)&&(!this.options.useExternalCarousel))
this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
this.prepareTimer();
if (this.options.embedLinks)
this.makeLink(this.currentIter);
},
nextItem: function() {
this.fireEvent('onNextCalled');
this.nextIter = this.currentIter+1;
if (this.nextIter >= this.maxIter)
this.nextIter = 0;
this.galleryInit = 0;
this.goTo(this.nextIter);
},
prevItem: function() {
this.fireEvent('onPreviousCalled');
this.nextIter = this.currentIter-1;
if (this.nextIter <= -1)
this.nextIter = this.maxIter - 1;
this.galleryInit = 0;
this.goTo(this.nextIter);
},
goTo: function(num) {
this.clearTimer();
if(this.options.preloader)
{
this.galleryElements[num].load();
if (num==0)
this.galleryElements[this.maxIter - 1].load();
else
this.galleryElements[num - 1].load();
if (num==(this.maxIter - 1))
this.galleryElements[0].load();
else
this.galleryElements[num + 1].load();


}
if (this.options.embedLinks)
this.clearLink();
if (this.options.showInfopane)
{
this.slideInfoZone.clearChain();
this.hideInfoSlideShow().chain(this.changeItem.pass(num, this));
} else
this.currentChangeDelay = this.changeItem.delay(500, this, num);
if (this.options.embedLinks)
this.makeLink(num);
this.prepareTimer();
/*if (this.options.showCarousel)
this.clearThumbnailsHighlights();*/
},
changeItem: function(num) {
this.fireEvent('onStartChanging');
this.galleryInit = 0;
if (this.currentIter != num)
{
for(i=0;i<this.maxIter;i++)
{
if ((i != this.currentIter)) this.galleryElements.set({opacity: 0});
}
gallery.Transitions[this.galleryData[num].transition].pass([
this.galleryElements[this.currentIter],
this.galleryElements[num],
this.currentIter,
num], this)();
this.currentIter = num;
if (this.options.useReMooz)
this.makeReMooz();
}
var textShowCarousel = formatString(this.options.textShowCarousel, num+1, this.maxIter);
if ((this.options.showCarousel)&&(!this.options.useExternalCarousel))
this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
this.doSlideShow.bind(this)();
this.fireEvent('onChanged');
},
clearTimer: function() {
if (this.options.timed)
$clear(this.timer);
},
prepareTimer: function() {
if (this.options.timed)
this.timer = this.nextItem.delay(this.options.delay, this);
},
doSlideShow: function(position) {
if (this.galleryInit == 1)
{
imgPreloader = new Image();
imgPreloader.onload=function(){
this.startSlideShow.delay(10, this);
}.bind(this);
imgPreloader.src = this.galleryData[0].image;
if(this.options.preloader)
this.galleryElements[0].load();
} else {
if (this.options.showInfopane)
{
if (this.options.showInfopane)
{
this.showInfoSlideShow.delay((500 + this.options.fadeDuration), this);
} else
if ((this.options.showCarousel)&&(this.options.activateCarouselScroller))
this.centerCarouselOn(position);
}
}
},
createCarousel: function() {
var carouselElement;
if (!this.options.useExternalCarousel)
{
var carouselContainerElement = new Element('div').addClass('carouselContainer').injectInside(this.galleryElement);
this.carouselContainer = new Fx.Morph(carouselContainerElement, {transition: Fx.Transitions.Expo.easeOut});
this.carouselContainer.normalHeight = carouselContainerElement.offsetHeight;
this.carouselContainer.set({'opacity': this.options.carouselMinimizedOpacity, 'top': (this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight)});
this.carouselBtn = new Element('a').addClass('carouselBtn').setProperties({
title: this.options.textShowCarousel
}).injectInside(carouselContainerElement);
if(this.options.carouselPreloader)
this.carouselBtn.set('html', this.options.textPreloadingCarousel);
else
this.carouselBtn.set('html', this.options.textShowCarousel);
this.carouselBtn.addEvent(
'click',
function () {
this.carouselContainer.cancel();
this.toggleCarousel();
}.bind(this)
);
this.carouselActive = false;


carouselElement = new Element('div').addClass('carousel').injectInside(carouselContainerElement);
this.carousel = new Fx.Morph(carouselElement);
} else {
carouselElement = $(this.options.carouselElement).addClass('jdExtCarousel');
}
this.carouselElement = new Fx.Morph(carouselElement, {transition: Fx.Transitions.Expo.easeOut});
this.carouselElement.normalHeight = carouselElement.offsetHeight;
if (this.options.showCarouselLabel)
this.carouselLabel = new Element('p').addClass('label').injectInside(carouselElement);
carouselWrapper = new Element('div').addClass('carouselWrapper').injectInside(carouselElement);
this.carouselWrapper = new Fx.Morph(carouselWrapper, {transition: Fx.Transitions.Expo.easeOut});
this.carouselWrapper.normalHeight = carouselWrapper.offsetHeight;
this.carouselInner = new Element('div').addClass('carouselInner').injectInside(carouselWrapper);
if (this.options.activateCarouselScroller)
{
this.carouselWrapper.scroller = new Scroller(carouselWrapper, {
area: 100,
velocity: 0.2
})


this.carouselWrapper.elementScroller = new Fx.Scroll(carouselWrapper, {
duration: 400,
onStart: this.carouselWrapper.scroller.stop.bind(this.carouselWrapper.scroller),
onComplete: this.carouselWrapper.scroller.start.bind(this.carouselWrapper.scroller)
});
}
},
fillCarousel: function() {
this.constructThumbnails();
this.carouselInner.normalWidth = ((this.maxIter * (this.options.thumbWidth + this.options.thumbSpacing + 2))+this.options.thumbSpacing) + "px";
if (this.options.carouselHorizontal)
this.carouselInner.style.width = this.carouselInner.normalWidth;
},
initCarousel: function () {
this.createCarousel();
this.fillCarousel();
if (this.options.carouselPreloader)
this.preloadThumbnails();
},
flushCarousel: function() {
this.thumbnailElements.each(function(myFx) {
myFx.element.dispose();
myFx = myFx.element = null;
});
this.thumbnailElements = [];
},
toggleCarousel: function() {
if (this.carouselActive)
this.hideCarousel();
else
this.showCarousel();
},
showCarousel: function () {
this.fireEvent('onShowCarousel');
this.carouselContainer.start({
'opacity': this.options.carouselMaximizedOpacity,
'top': 0
}).chain(function() {
this.carouselActive = true;
this.carouselWrapper.scroller.start();
this.fireEvent('onCarouselShown');
this.carouselContainer.options.onComplete = null;
}.bind(this));
},
hideCarousel: function () {
this.fireEvent('onHideCarousel');
var targetTop = this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight;
this.carouselContainer.start({
'opacity': this.options.carouselMinimizedOpacity,
'top': targetTop
}).chain(function() {
this.carouselActive = false;
this.carouselWrapper.scroller.stop();
this.fireEvent('onCarouselHidden');
this.carouselContainer.options.onComplete = null;
}.bind(this));
},
constructThumbnails: function () {
element = this.carouselInner;
for(i=0;i<this.galleryData.length;i++)
{
var currentImg = new Fx.Morph(new Element ('div').addClass("thumbnail").setStyles({
backgroundImage: "url('" + this.galleryData.thumbnail + "')",
backgroundPosition: "center center",
backgroundRepeat: 'no-repeat',
marginLeft: this.options.thumbSpacing + "px",
width: this.options.thumbWidth + "px",
height: this.options.thumbHeight + "px"
}).injectInside(element), {duration: 200}).start({
'opacity': this.options.thumbIdleOpacity
});
currentImg.element.addEvents({
'mouseover': function (myself) {
myself.cancel();
myself.start({'opacity': 0.99});
if (this.options.showCarouselLabel)
$(this.carouselLabel).set('html', '<span class="number">' + (myself.relatedImage.number + 1) + "/" + this.maxIter + ":</span> " + myself.relatedImage.title);
}.pass(currentImg, this),
'mouseout': function (myself) {
myself.cancel();
myself.start({'opacity': this.options.thumbIdleOpacity});
}.pass(currentImg, this),
'click': function (myself) {
this.goTo(myself.relatedImage.number);
if (this.options.thumbCloseCarousel&&(!this.options.useExternalCarousel))
this.hideCarousel();
}.pass(currentImg, this)
});


currentImg.relatedImage = this.galleryData;
this.thumbnailElements[parseInt(i)] = currentImg;
}
},
log: function(value) {
if(console.log)
console.log(value);
},
preloadThumbnails: function() {
var thumbnails = [];
for(i=0;i<this.galleryData.length;i++)
{
thumbnails[parseInt(i)] = this.galleryData.thumbnail;
}
this.thumbnailPreloader = new Preloader();
if (!this.options.useExternalCarousel)
this.thumbnailPreloader.addEvent('onComplete', function() {
var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
}.bind(this));
this.thumbnailPreloader.load(thumbnails);
},
clearThumbnailsHighlights: function()
{
for(i=0;i<this.galleryData.length;i++)
{
this.thumbnailElements.cancel();
this.thumbnailElements.start(0.2);
}
},
changeThumbnailsSize: function(width, height)
{
for(i=0;i<this.galleryData.length;i++)
{
this.thumbnailElements.cancel();
this.thumbnailElements.element.setStyles({
'width': width + "px",
'height': height + "px"
});
}
},
centerCarouselOn: function(num) {
if (!this.carouselWallMode)
{
var carouselElement = this.thumbnailElements[num];
var position = carouselElement.element.offsetLeft + (carouselElement.element.offsetWidth / 2);
var carouselWidth = this.carouselWrapper.element.offsetWidth;
var carouselInnerWidth = this.carouselInner.offsetWidth;
var diffWidth = carouselWidth / 2;
var scrollPos = position-diffWidth;
this.carouselWrapper.elementScroller.start(scrollPos,0);
}
},
initInfoSlideshow: function() {
/*if (this.slideInfoZone.element)
this.slideInfoZone.element.remove();*/
this.slideInfoZone = new Fx.Morph(new Element('div').addClass('slideInfoZone').injectInside($(this.galleryElement))).set({'opacity':0});
var slideInfoZoneTitle = new Element('h2').injectInside(this.slideInfoZone.element);
var slideInfoZoneDescription = new Element('p').injectInside(this.slideInfoZone.element);
this.slideInfoZone.normalHeight = this.slideInfoZone.element.offsetHeight;
this.slideInfoZone.element.setStyle('opacity',0);
},
changeInfoSlideShow: function()
{
this.hideInfoSlideShow.delay(10, this);
this.showInfoSlideShow.delay(500, this);
},
showInfoSlideShow: function() {
this.fireEvent('onShowInfopane');
this.slideInfoZone.cancel();
element = this.slideInfoZone.element;
element.getElement('h2').set('html', this.galleryData[this.currentIter].title);
element.getElement('p').set('html', this.galleryData[this.currentIter].description);
if(this.options.slideInfoZoneSlide)
this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity], 'height': [0, this.slideInfoZone.normalHeight]});
else
this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity]});
if (this.options.showCarousel)
this.slideInfoZone.chain(this.centerCarouselOn.pass(this.currentIter, this));
return this.slideInfoZone;
},
hideInfoSlideShow: function() {
this.fireEvent('onHideInfopane');
this.slideInfoZone.cancel();
if(this.options.slideInfoZoneSlide)
this.slideInfoZone.start({'opacity': 0, 'height': 0});
else
this.slideInfoZone.start({'opacity': 0});
return this.slideInfoZone;
},
makeLink: function(num) {
this.currentLink.setProperties({
href: this.galleryData[num].link,
title: this.galleryData[num].linkTitle
})
if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
this.currentLink.setStyle('display', 'block');
},
clearLink: function() {
this.currentLink.setProperties({href: '', title: ''});
if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
this.currentLink.setStyle('display', 'none');
},
makeReMooz: function() {
this.currentLink.setProperties({
href: '#'
});
this.currentLink.setStyles({
'display': 'block'
});


this.galleryElements[this.currentIter].element.set('title', this.galleryData[this.currentIter].title + ' :: ' + this.galleryData[this.currentIter].description);
this.ReMooz = new ReMooz(this.galleryElements[this.currentIter].element, {
link: this.galleryData[this.currentIter].link,
shadow: false,
dragging: false,
addClick: false,
resizeOpacity: 1
});
var img = this.galleryElements[this.currentIter];
var coords = img.element.getCoordinates();
delete coords.right;
delete coords.bottom;


widthDiff = coords.width - img.width;
heightDiff = coords.height - img.height;


coords.width = img.width;
coords.height = img.height;


coords.left += Math.ceil(widthDiff/2)+1;
coords.top += Math.ceil(heightDiff/2)+1;


this.ReMooz.getOriginCoordinates = function(coords) {
return coords;
}.bind(this, coords);
this.currentLink.onclick = function () {
this.ReMooz.open.bind(this.ReMooz)();
return false;
}.bind(this);
},
/* To change the gallery data, those two functions : */
flushGallery: function() {
this.galleryElements.each(function(myFx) {
myFx.element.dispose();
myFx = myFx.element = null;
});
this.galleryElements = [];
},
changeData: function(data) {
this.galleryData = data;
this.clearTimer();
this.flushGallery();
if (this.options.showCarousel) this.flushCarousel();
this.constructElements();
if (this.options.showCarousel) this.fillCarousel();
if (this.options.showInfopane) this.hideInfoSlideShow();
this.galleryInit=1;
this.lastIter=0;
this.currentIter=0;
this.doSlideShow(1);
},
/* Plugins: HistoryManager */
initHistory: function() {
this.fireEvent('onHistoryInit');
this.historyKey = this.galleryElement.id + '-picture';
if (this.options.customHistoryKey)
this.historyKey = this.options.customHistoryKey;


this.history = new History.Route({
defaults: [1],
pattern: this.historyKey + '\\((\\d+)\\)',
generate: function(values) {
return [this.historyKey, '(', values[0], ')'].join('')
}.bind(this),
onMatch: function(values, defaults) {
if (parseInt(values[0])-1 < this.maxIter)
this.goTo(parseInt(values[0])-1);
}.bind(this)
});
this.addEvent('onChanged', function(){
this.history.setValue(0, this.currentIter+1);
this.history.defaults=[this.currentIter+1];
}.bind(this));
this.fireEvent('onHistoryInited');
}
};
gallery = new Class(gallery);


gallery.Transitions = new Hash ({
fade: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
if (newPos > oldPos) newFx.start({opacity: 1});
else
{
newFx.set({opacity: 1});
oldFx.start({opacity: 0});
}
},
crossfade: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
newFx.start({opacity: 1});
oldFx.start({opacity: 0});
},
fadebg: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
oldFx.options.duration = newFx.options.duration = this.options.fadeDuration / 2;
oldFx.start({opacity: 0}).chain(newFx.start.pass([{opacity: 1}], newFx));
}
});


/* All code copyright 2007 Jonathan Schemoul */


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Follows: Preloader (class)
* Simple class for preloading images with support for progress reporting
* Copyright 2007 Tomocchino.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


var Preloader = new Class({


Implements: [Events, Options],


options: {
root        : '',
period      : 100
},


initialize: function(options){
this.setOptions(options);
},


load: function(sources) {
this.index = 0;
this.images = [];
this.sources = this.temps = sources;
this.total = this. sources.length;


this.fireEvent('onStart', [this.index, this.total]);
this.timer = this.progress.periodical(this.options.period, this);


this.sources.each(function(source, index){
this.images[index] = new Asset.image(this.options.root + source, {
'onload'  : function(){ this.index++; if(this.images[index]) this.fireEvent('onLoad', [this.images[index], index, source]); }.bind(this),
'onerror' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this),
'onabort' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this)
});
}, this);
},


progress: function() {
this.fireEvent('onProgress', [Math.min(this.index, this.total), this.total]);
if(this.index >= this.total) this.complete();
},


complete: function(){
$clear(this.timer);
this.fireEvent('onComplete', [this.images]);
},


cancel: function(){
$clear(this.timer);
}


});


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Follows: formatString (function)
* Original name: Yahoo.Tools.printf
* Copyright Yahoo.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


function formatString() {
var num = arguments.length;
var oStr = arguments[0];
for (var i = 1; i < num; i++) {
var pattern = "\\{" + (i-1) + "\\}";
var re = new RegExp(pattern, "g");
oStr = oStr.replace(re, arguments);
}
return oStr;
}


//]]>
</script>


<script type='text/javascript'>
//<![CDATA[


/*
This file is part of JonDesign's SmoothGallery v2.1beta1.


JonDesign's SmoothGallery is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.


JonDesign's SmoothGallery is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.


You should have received a copy of the GNU General Public License
along with JonDesign's SmoothGallery; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA


Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)
*/


gallery.Transitions.extend({
fadeslideleft: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.Cubic.easeOut;
oldFx.options.duration = newFx.options.duration = 1500;
if (newPos > oldPos)
{
newFx.start({
left: [this.galleryElement.offsetWidth, 0],
opacity: 1
});
oldFx.start({opacity: [1,0]});
} else {
newFx.start({opacity: [0,1]});
oldFx.start({
left: [0, this.galleryElement.offsetWidth],
opacity: 0
}).chain(function(fx){fx.set({left: 0});}.pass(oldFx));
}
},
continuoushorizontal: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
if (
((newPos > oldPos) || ((newPos==0) && (oldPos == (this.maxIter-1) ))) &&
(!((newPos == (this.maxIter-1 )) && (oldPos == 0)))
) {
oldFx.set({opacity: 1});
oldFx.start({
left: [0, this.galleryElement.offsetWidth * -1]
});
newFx.set({opacity: 1, left: this.galleryElement.offsetWidth});
newFx.start({
left: [this.galleryElement.offsetWidth, 0]
});
} else  {
oldFx.set({opacity: 1});
oldFx.start({
left: [0, this.galleryElement.offsetWidth]
});
newFx.set({opacity: 1, left: this.galleryElement.offsetWidth * -1});
newFx.start({
left: [this.galleryElement.offsetWidth * -1, 0]
});
}
},
continuousvertical: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
if (
((newPos > oldPos) || ((newPos==0) && (oldPos == (this.maxIter-1) ))) &&
(!((newPos == (this.maxIter-1 )) && (oldPos == 0)))
) {
oldFx.set({opacity: 1});
oldFx.start({
top: [0, this.galleryElement.offsetHeight * -1]
});
newFx.set({opacity: 1, top: this.galleryElement.offsetHeight});
newFx.start({
top: [this.galleryElement.offsetHeight, 0]
});
} else  {
oldFx.set({opacity: 1});
oldFx.start({
top: [0, this.galleryElement.offsetHeight]
});
newFx.set({opacity: 1, top: this.galleryElement.offsetHeight * -1});
newFx.start({
top: [this.galleryElement.offsetHeight * -1, 0]
});
}
}
});


//]]>
</script>



<style type='text/css'>
body{background: #1b1b1b url(http://4.bp.blogspot.com/_4HKUHirY_2U/TIb8rmV9krI/AAAAAAAAB7E/5s2dy8t1h7M/s1600/background.png) top left repeat-x;color: #888686;font:75% &quot;Helvetica Neue&quot;,Arial,Helvetica,sans-serif}
a:link,a:visited{color:#fff;}
a:hover{color:#cb0403}
a img{border-width:0}
/* Header-----------------------------------------------*/
#header-wrapper{width:950px;margin:0 auto 0;height:112px;background:url() top right no-repeat}
#header-inner{background-position:center;margin-left:auto;margin-right:auto}
#header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:40%}
#header h1{margin:0 5px 0;padding:1px 0 0 15px;font:bold 48px Arial,Helvetica,Sans-serif}
#header .description{padding-left:20px;color:#666666;}
#header h1 a,#header h1 a:visited{color:#fff;text-decoration:none}
#header h2{padding-left:15px;color:#736f74;font:14px Arial,Helvetica,Sans-serif}
#header2{float:right;width:58%}
#header2 .widget{padding:20px 0px 0 10px;float:right}
/* Outer-Wrapper----------------------------------------------- */
#outer-wrapper{background: url(http://1.bp.blogspot.com/_4HKUHirY_2U/TIb8tVn7PAI/AAAAAAAAB7c/OT-o1PSpZb0/container-bg.jpg) center top no-repeat;width:950px;margin:0 auto;padding:0;text-align:$startSide;font:$bodyfont}
#content-wrapper{background: #050505;}
#main-wrapper{width:610px;padding-left:15px;padding-right:0px;float:left;word-wrap:break-word;/* fix for long text breaking sidebar float in IE */
overflow:hidden;/* fix for long non-text content breaking IE sidebar float */
}
#rsidebar-wrapper{width:305px;float:right;margin-left:5px;margin-right:5px;word-wrap:break-word;/* fix for long text breaking sidebar float in IE */
overflow:hidden;/* fix for long non-text content breaking IE sidebar float */
}
/* Headings----------------------------------------------- */
h2{margin:1.5em 0 .75em;font:$headerfont;line-height:1.4em;text-transform:uppercase;letter-spacing:.2em;color:$sidebarcolor}
/* Posts-----------------------------------------------*/
h2.date-header{margin:1.5em 0 .5em}
.post{background-color: #1b1b1b;padding: 12px 15px 15px 15px;margin: 5px 0 25px 0;border: 1px solid #2e2d2d;}
.post h3{margin:0 0 8px 0;padding:0;color:#d3d3d3;font:bold 22px Arial, Verdana;line-height: 26px;text-transform: uppercase;}
.post h3 a,.post h3 a:visited,.post h3 strong{display:block;text-decoration:none;color:#d3d3d3;font:bold 22px Arial, Verdana;}
.post h3 strong,.post h3 a:hover{color:#ca2111;font:bold 22px Arial, Verdana;text-decoration:underline;}
.post-body{margin:0 0 .75em;text-align:justify;padding-top:8px;font:14px/20px Arial,Verdana}
.post-body blockquote{overflow:hidden;padding-left:9px;font-style:italic;color:#666;border-left:3px solid #CADAE7}
.post-footer{margin:.75em 0;color:$sidebarcolor;text-transform:uppercase;letter-spacing:.1em;font:$postfooterfont;line-height:1.4em}
.comment-link{margin-$startSide:.6em}
.post img{padding:6px 6px 6px 6px;background:#1b1b1b;border:1px solid #2e2d2d;margin:0 4px 4px 0}
.post blockquote{margin:1em 20px}
.post blockquote p{margin:.75em 0}
/* Comments----------------------------------------------- */
#comments h4{margin:1em 0;font-weight:bold;line-height:1.4em;text-transform:uppercase;letter-spacing:.2em;color:$sidebarcolor}
#comments-block{margin:1em 0 1.5em;line-height:1.6em}
#comments-block .comment-author{margin:.5em 0}
#comments-block .comment-body{margin:.25em 0 0}
#comments-block .comment-footer{margin:-.25em 0 2em;line-height:1.4em;text-transform:uppercase;letter-spacing:.1em}
#comments-block .comment-body p{margin:0 0 .75em}
.deleted-comment{font-style:italic;color:gray}
#blog-pager-newer-link{float:$startSide}
#blog-pager-older-link{float:$endSide}
#blog-pager{text-align:center}
.feed-links{clear:both;line-height:2.5em}
/* Sidebar Content----------------------------------------------- */
.sidebar{color:#8e8e8e;line-height:1.5em;margin:0 0 10px 0}
.sidebar a{text-decoration:none;color:#8e8e8e}
.sidebar a:hover{text-decoration:underline;color:#a31f13}
.sidebar h2{margin:10px 0 0 0;padding:5px 0 5px 0;font-size:16px;font-family:Arial,Helvetica,Sans-serif;font-weight:bold;text-transform:uppercase;color:#c40503;}
.sidebar ul{list-style-type:none;margin:0 0 10px 0;padding:0}
.sidebar ul li{padding:6px 0 6px 16px;margin:0;background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/TIb8rfjNUEI/AAAAAAAAB68/7Y-Pgr9ZgrM/arrow.png) left 12px no-repeat;border-bottom:1px solid #1b1b1b}
.sidebar .widget{border-bottom:0 dotted $bordercolor;margin:0 0 0.5em;padding:0 0 0.5em}
.main .widget{border-bottom:0 dotted $bordercolor;margin:0 0 1.5em;padding:0 0 1.5em}
.main .Blog{border-bottom-width:0}
/* Profile ----------------------------------------------- */
.profile-img{float:$startSide;margin-top:0;margin-$endSide:5px;margin-bottom:5px;margin-$startSide:0;padding:4px;border:1px solid $bordercolor}
.profile-data{margin:0;text-transform:uppercase;letter-spacing:.1em;font:$postfooterfont;color:$sidebarcolor;font-weight:bold;line-height:1.6em}
.profile-datablock{margin:.5em 0 .5em}
.profile-textblock{margin:0.5em 0;line-height:1.6em}
.profile-link{font:$postfooterfont;text-transform:uppercase;letter-spacing:.1em}
#myGallery,#myGallerySet,#flickrGallery{width:610px;height:500px;z-index:99;margin-bottom:20px;margin-top:15px}
.jdGallery a{outline:0}
#flickrGallery{width:500px;height:334px}
#myGallery img.thumbnail,#myGallerySet img.thumbnail{display:none}
.jdGallery{overflow:hidden;position:relative}
.jdGallery img{border:0;margin:0}
.jdGallery .slideElement{width:100%;height:100%;background-color:#000;background-repeat:no-repeat;background-position:center center;background-image:url(&#39;http://1.bp.blogspot.com/_4HKUHirY_2U/TH5CnyElq7I/AAAAAAAABfc/OIwMCzgM_KA/s1600/loading-bar-black.gif&#39;)}
.jdGallery .loadingElement{width:100%;height:100%;position:absolute;left:0;top:0;background-color:#000;background-repeat:no-repeat;background-position:center center;background-image:url(&#39;http://1.bp.blogspot.com/_4HKUHirY_2U/TH5CnyElq7I/AAAAAAAABfc/OIwMCzgM_KA/s1600/loading-bar-black.gif&#39;)}
.jdGallery .slideInfoZone{position:absolute;z-index:10;width:100%;margin:0;left:0;bottom:0;height:120px;background:#17181e;color:#fff;text-indent:0;overflow:hidden}
* html .jdGallery .slideInfoZone{bottom:-1px}
.jdGallery .slideInfoZone h2{padding:0;margin:0;margin:2px 5px;font-size:14px;font-weight:bold;color:#fff !important}
.jdGallery .slideInfoZone p{padding:0;font-size:12px;margin:2px 5px;color:#eee}
.jdGallery div.carouselContainer{position:absolute;height:135px;width:100%;z-index:10;margin:0;left:0;top:0}
.jdGallery a.carouselBtn{position:absolute;bottom:0;right:30px;height:20px;/*width:100px;background:url(&#39;img/carousel_btn.gif&#39;) no-repeat;*/
text-align:center;padding:0 10px;font-size:13px;background:#333;color:#fff;cursor:pointer}
.jdGallery .carousel{position:absolute;width:100%;margin:0;left:0;top:0;height:115px;background:#333;color:#fff;text-indent:0;overflow:hidden}
.jdExtCarousel{overflow:hidden;position:relative}
.jdGallery .carousel .carouselWrapper,.jdExtCarousel .carouselWrapper{position:absolute;width:100%;height:78px;top:10px;left:0;overflow:hidden}
.jdGallery .carousel .carouselInner,.jdExtCarousel .carouselInner{position:relative}
.jdGallery .carousel .carouselInner .thumbnail,.jdExtCarousel .carouselInner .thumbnail{cursor:pointer;background:#000;background-position:center center;float:left;border:solid 1px #fff}
.jdGallery .wall .thumbnail,.jdExtCarousel .wall .thumbnail{margin-bottom:10px}
.jdGallery .carousel .label,.jdExtCarousel .label{font-size:13px;position:absolute;bottom:5px;left:10px;padding:0;margin:0}
.jdGallery .carousel .wallButton,.jdExtCarousel .wallButton{font-size:10px;position:absolute;bottom:5px;right:10px;padding:1px 2px;margin:0;background:#222;border:1px solid #888;cursor:pointer}
.jdGallery .carousel .label .number,.jdExtCarousel .label .number{color:#b5b5b5}
.jdGallery a{font-size:100%;text-decoration:none;color:#fff}
.jdGallery a.right,.jdGallery a.left{position:absolute;height:99%;width:25%;cursor:pointer;z-index:10;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity:0.2;opacity:0.2}
* html .jdGallery a.right,* html .jdGallery a.left{filter:alpha(opacity=50)}
.jdGallery a.right:hover,.jdGallery a.left:hover{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8}
.jdGallery a.left{left:0;top:0;background:url(&#39;http://4.bp.blogspot.com/_4HKUHirY_2U/TH5CmeY6JVI/AAAAAAAABfE/V6WLzU3rtfM/s1600/fleche1.png&#39;) no-repeat center left}
* html .jdGallery a.left{background:url(&#39;http://4.bp.blogspot.com/_4HKUHirY_2U/TH5CaC77BiI/AAAAAAAABe8/B4FUXMSMRKE/s1600/fleche1.gif&#39;) no-repeat center left}
.jdGallery a.right{right:0;top:0;background:url(&#39;http://3.bp.blogspot.com/_4HKUHirY_2U/TH5CnZ9VneI/AAAAAAAABfU/Z3F7W_3RJlA/s1600/fleche2.png&#39;) no-repeat center right}
* html .jdGallery a.right{background:url(&#39;http://1.bp.blogspot.com/_4HKUHirY_2U/TH5Cm_O50lI/AAAAAAAABfM/8hTr1hCxF8c/s1600/fleche2.gif&#39;) no-repeat center right}
.jdGallery a.open{left:0;top:0;width:100%;height:100%}
.withArrows a.open{position:absolute;top:0;left:25%;height:99%;width:50%;cursor:pointer;z-index:10;background:none;-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8}
.withArrows a.open:hover{background:url(&#39;http://2.bp.blogspot.com/_4HKUHirY_2U/TH5CzYqk8PI/AAAAAAAABfs/1PGw_tK8g08/s1600/open.png&#39;) no-repeat center center}
* html .withArrows a.open:hover{background:url(&#39;http://1.bp.blogspot.com/_4HKUHirY_2U/TH5Cou-6ZYI/AAAAAAAABfk/Dda7FQKrEW4/s1600/open.gif&#39;) no-repeat center center;filter:alpha(opacity=80)}
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn{z-index:15;position:absolute;top:0;left:30px;height:20px;/*width:100px;background:url(&#39;img/carousel_btn.gif&#39;) no-repeat;*/
text-align:center;padding:0 10px;font-size:13px;background:#333;color:#fff;cursor:pointer;opacity:.4;-moz-opacity:.4;-khtml-opacity:0.4;filter:alpha(opacity=40)}
.jdGallery .gallerySelector{z-index:20;width:100%;height:100%;position:absolute;top:0;left:0;background:#000}
.jdGallery .gallerySelector h2{margin:0;padding:10px 20px 10px 20px;font-size:20px;line-height:30px;color:#fff !important}
.jdGallery .gallerySelector .gallerySelectorWrapper{overflow:hidden}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton{margin-left:10px;margin-top:10px;border:1px solid #888;padding:5px;height:40px;color:#fff;cursor:pointer;float:left}
.jdGallery .gallerySelector .gallerySelectorInner div.hover{background:#333}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview{background:#000;background-position:center center;float:left;border:none;width:40px;height:40px;margin-right:5px}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{margin:0;padding:0;font-size:12px;font-weight:normal;color:#fff}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info{margin:0;padding:0;font-size:12px;font-weight:normal;color:#fff !important}
#navbar-iframe{height:0;visibility:hidden;display:none}
#pagemenucontainer{height:34px;margin-top:10px;float:left;background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9CVVM7KI/AAAAAAAAB8U/9hFEOkEmuRA/pagenav-bg.png) left top repeat-x}
#pagemenu{height:34px;float:right}
#pagemenu,#pagemenu ul{padding:0;margin:0;list-style:none;line-height:1}
#pagemenu{margin-bottom:1px}
#pagemenu ul{float:left;list-style:none;margin:0 0 0 0;padding:0}
#pagemenu li{float:left;list-style:none;margin:0;padding:0}
#pagemenu ul li{list-style:none;margin:0;padding:0}
#pagemenu li a,#pagemenu li a:link{color:#7b7b7a;display:block;margin:0 3px 0 3px;padding:10px 14px;text-decoration:none;text-transform:uppercase;font:bold 11px Arial,Helvetica,sans-serif}
#pagemenu li a:hover,#pagemenu li a:active{color:#fff;display:block;text-decoration:none}
#pagemenu li.current_page_item a{color:#fff}
#pagemenu li:hover,#pagemenu li.sfhover{position:static}
.navcontainer{height:36px;background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/TIBWT96I7YI/AAAAAAAABjE/Il3hTbPpeu0/nav-background.png) top left repeat-x;padding:0 10px;border-bottom:1px solid #303030}
#nav{height:36px}
#nav,#nav ul{padding:0;margin:0;list-style:none;line-height:1}
#nav{margin-bottom:1px}
#nav ul{float:left;list-style:none;margin:0 0 0 0;padding:0}
#nav li{float:left;list-style:none;margin:0;padding:0}
#nav ul li{list-style:none;margin:0;padding:0}
#nav li a,#nav li a:link{color:#fff;display:block;margin:0 3px 0 3px;padding:12px 15px;text-decoration:none;font-size:12px;font-weight:bold;text-transform:uppercase;text-shadow:0 1px 0 #1e1d1d}
#nav li a:hover,#nav li a:active{color:#fff;display:block;text-decoration:none;background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/TIBWULTYxPI/AAAAAAAABjM/tG7vzAepxic/nav-background-hover.png) top left repeat-x;text-shadow:0 1px 0 #242323}
#nav li.current-cat a{color:#fff;background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/TIBWULTYxPI/AAAAAAAABjM/tG7vzAepxic/nav-background-hover.png) top left repeat-x;text-shadow:0 1px 0 #242323}
#nav li:hover,#nav li.sfhover{position:static}
.postdate{padding:2px 0;font:11px Arial,Verdana;color:#5b5b5b}
.postdate img,.postmeta img{border:none;vertical-align:middle;margin:2px;background:none;padding:0 6px 0 0}
/* FOOTER */
#footer{background:#101010;padding:22px;text-align:center;color:#9d9999;font-size:13px;border-top:4px solid #b80704}
#footer a{color:#9d9999}
#footer a:hover{text-decoration:none;color:#9d9999}
/* -- NUMBER PAGE NAVIGATION -- */
.showpageNum a{font:15px Arial,Verdana;padding:4px 8px;margin:0 4px;text-decoration:none;background:#050505;color:#ffffff;border:1px solid #050505}
.showpageOf{margin:0 8px 0 0;color:#222;font:15px Arial,Verdana}
.showpageNum a:hover{color:#fff;background:#303030;border:1px solid #303030}
.showpageArea{margin:10px 0;font:15px Arial,Verdana;color:#111}
.showpagePoint{color:#fff;font:bold 15px Arial,Verdana;padding:4px 8px;margin:2px;border:1px solid #b80704;background:#b80704;text-decoration:none}
.showpage{padding:4px 8px;margin:0 4px;text-decoration:none;background:#050505;color:#ffffff;border:1px solid #050505;font:15px Arial,Verdana}
.showpage a{text-decoration:none;color:#ffffff;font:15px Arial,Verdana}
.showpage:hover{padding:4px 8px;margin:0 4px;text-decoration:none;background:#303030;color:#fff;border:1px solid #303030;font:15px Arial,Verdana}
.showpage a:hover{text-decoration:none;color:#fff;font:15px Arial,Verdana}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
#comment-form iframe{padding:5px;width:500px}
#search{border:1px solid #302f2f;height:26px;padding:2px;background:#1d1c1c;text-align:right}
#search input{border:0;background:none;color:#5b5b5a}
#s{width:257px;padding:3px;margin:2px 0 0 0;background:none}
#topsearch{margin-top:8px}
div.span-1,div.span-2,div.span-3,div.span-4,div.span-5,div.span-6,div.span-7,div.span-8,div.span-9,div.span-10,div.span-11,div.span-12,div.span-13,div.span-14,div.span-15,div.span-16,div.span-17,div.span-18,div.span-19,div.span-20,div.span-21,div.span-22,div.span-23,div.span-24{float:left;margin-right:10px}
.span-1{width:30px}.span-2{width:70px}.span-3{width:110px}.span-4{width:150px}.span-5{width:190px}.span-6{width:230px}.span-7{width:270px}.span-8{width:310px}.span-9{width:350px}.span-10{width:390px}.span-11{width:430px}.span-12{width:470px}.span-13{width:510px}.span-14{width:550px}.span-15{width:590px}.span-16{width:630px}.span-17{width:670px}.span-18{width:710px}.span-19{width:750px}.span-20{width:790px}.span-21{width:830px}.span-22{width:870px}.span-23{width:910px}.span-24,div.span-24{width:950px;margin:0}input.span-1,textarea.span-1,input.span-2,textarea.span-2,input.span-3,textarea.span-3,input.span-4,textarea.span-4,input.span-5,textarea.span-5,input.span-6,textarea.span-6,input.span-7,textarea.span-7,input.span-8,textarea.span-8,input.span-9,textarea.span-9,input.span-10,textarea.span-10,input.span-11,textarea.span-11,input.span-12,textarea.span-12,input.span-13,textarea.span-13,input.span-14,textarea.span-14,input.span-15,textarea.span-15,input.span-16,textarea.span-16,input.span-17,textarea.span-17,input.span-18,textarea.span-18,input.span-19,textarea.span-19,input.span-20,textarea.span-20,input.span-21,textarea.span-21,input.span-22,textarea.span-22,input.span-23,textarea.span-23,input.span-24,textarea.span-24{border-left-width:1px!important;border-right-width:1px!important;padding-left:5px!important;padding-right:5px!important}input.span-1,textarea.span-1{width:18px!important}input.span-2,textarea.span-2{width:58px!important}input.span-3,textarea.span-3{width:98px!important}input.span-4,textarea.span-4{width:138px!important}input.span-5,textarea.span-5{width:178px!important}input.span-6,textarea.span-6{width:218px!important}input.span-7,textarea.span-7{width:258px!important}input.span-8,textarea.span-8{width:298px!important}input.span-9,textarea.span-9{width:338px!important}input.span-10,textarea.span-10{width:378px!important}input.span-11,textarea.span-11{width:418px!important}input.span-12,textarea.span-12{width:458px!important}input.span-13,textarea.span-13{width:498px!important}input.span-14,textarea.span-14{width:538px!important}input.span-15,textarea.span-15{width:578px!important}input.span-16,textarea.span-16{width:618px!important}input.span-17,textarea.span-17{width:658px!important}input.span-18,textarea.span-18{width:698px!important}input.span-19,textarea.span-19{width:738px!important}input.span-20,textarea.span-20{width:778px!important}input.span-21,textarea.span-21{width:818px!important}input.span-22,textarea.span-22{width:858px!important}input.span-23,textarea.span-23{width:898px!important}input.span-24,textarea.span-24{width:938px!important}.last{margin-right:0;padding-right:0}
.last,div.last{margin-right:0}
.readmorecontent{text-align:right;width:140px;float:right;margin-top:10px;}
.readmorecontent a{padding:4px 5px; background:#3b3b3b; color:#fff; text-decoration:none; font-size:12px;}
.readmorecontent a:hover{background-color:#b80704; color:#fff;text-decoration:none;}
.topright{text-align:right;margin:14px 0 0 0}
</style>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){


$(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav


$(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...


//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(&quot;ul.subnav&quot;).slideDown(&#39;fast&#39;).show(); //Drop down the subnav on click


$(this).parent().hover(function() {
}, function(){
$(this).parent().find(&quot;ul.subnav&quot;).slideUp(&#39;slow&#39;); //When the mouse hovers out of the subnav, move it back up
});


//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;
}, function(){ //On Hover Out
$(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;
});


});
</script>
<style type='text/css'>
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 1.2em;
background: url(http://1.bp.blogspot.com/_4HKUHirY_2U/SuvG9uqdygI/AAAAAAAAAGg/RGkds76x-Ks/topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(http://2.bp.blogspot.com/_4HKUHirY_2U/SuvHEn2GZ9I/AAAAAAAAAGo/s4ncczdnOd0/topnav_ho ver.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(http://2.bp.blogspot.com/_4HKUHirY_2U/SuvHKqBeOXI/AAAAAAAAAGw/qGYlY4ckLWc/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(http://3.bp.blogspot.com/_4HKUHirY_2U/SuvHPYoc82I/AAAAAAAAAG4/3DDzBwklYpw/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(http://3.bp.blogspot.com/_4HKUHirY_2U/SuvHPYoc82I/AAAAAAAAAG4/3DDzBwklYpw/dropdown_linkbg.gif) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}
</style>
</head>


<body>
<div id='outer-wrapper'><div id='wrap2'>


<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>



<div class='span-20'>
<div id='pagemenucontainer'>
<ul id='pagemenu'>
<li class='current_page_item'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li>
<li><a href='#' title='Edit this link'>Edit</a></li>
</ul>
</div>
</div>


<div class='span-4 last'>
<div class='topright'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'><img src='http://3.bp.blogspot.com/_4HKUHirY_2U/TIb9C34vnxI/AAAAAAAAB8c/KYlQHWZKs_Q/rss.png' style='margin:0 2px 0 0; vertical-align:top;'/></a>
<a href='http://twitter.com/USERNAME' title='Follow me on Twitter!'><img src='http://3.bp.blogspot.com/_4HKUHirY_2U/TIb9LXndq0I/AAAAAAAAB80/GO87qA9cTM8/twitter.png' style='margin:0 2px 0 0; vertical-align:top;' title='Follow me on Twitter!'/></a> </div>
</div>
<div style='clear:both;'/>


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='10' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='testing12345 (Header)' type='Header'>
<b:includable id='title'>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='main'>


<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == &quot;REPLACE&quot;'>
<!--Show just the image, no text-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                      + &quot;background-position: &quot;                      + data:backgroundPositionStyleStr + &quot;; &quot;                      + data:widthStyleStr                      + &quot;min-height: &quot; + data:height + &quot;px;&quot;                      + &quot;_height: &quot; + data:height + &quot;px;&quot;                      + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>


<b:section class='header' id='header2' maxwidgets='10' showaddelement='yes'>
<b:widget id='HTML46' locked='true' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>


<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
<div style='clear:both;'/>


</div>


<div style='clear:both;'/>


<div class='navcontainer'>
<ul id='nav'>
<li class='current-cat'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li>
<li><a href='#' title='Edit this link'>Edit</a></li>
</ul>
</div>
<div style='clear:both;'/>


<div id='content-wrapper'>


<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>


</b:includable>
</b:widget>
</b:section>
</div>


<div id='main-wrapper'>


<!-- Featured Content Slider Started -->


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>


<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($(&#39;myGallery&#39;), {
timed: true,
delay: 6000,
slideInfoZoneOpacity: 0.8,
showCarousel: false,
slideInfoZoneSlide: false
});
}
window.addEvent(&#39;domready&#39;, startGallery);
</script>


<div class='fullbox_excerpt'>
<div class='fullbox_content'>
<div class='smooth_gallery'>
<div id='myGallery'>


<div class='imageElement'>
<h3>This is featured post 1 title</h3>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.</p>
<a class='open' href='SLIDER-1-URL-HERE' title='This is featured post 1'/>
<img alt='' class='full' src='http://3.bp.blogspot.com/_4HKUHirY_2U/TIb9f-9HIcI/AAAAAAAAB98/RTz1q2-AscU/s1600/1.jpg'/>
</div>


<div class='imageElement'>
<h3>This is featured post 2 title</h3>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.</p>
<a class='open' href='SLIDER-2-URL-HERE' title='This is featured post 2'/>
<img alt='' class='full' src='http://3.bp.blogspot.com/_4HKUHirY_2U/TIb9xY0BOwI/AAAAAAAAB-E/7R9TcrB0vW0/s1600/2.jpg'/>
</div>
<div class='imageElement'>
<h3>This is featured post 3 title</h3>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.</p>
<a class='open' href='SLIDER-3-URL-HERE' title='This is featured post 3'/>
<img alt='' class='full' src='http://1.bp.blogspot.com/_4HKUHirY_2U/TIb9xxVRhUI/AAAAAAAAB-M/YzMyW6B9kXI/s1600/3.jpg'/>
</div>


<div class='imageElement'>
<h3>This is featured post 4 title</h3>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.</p>
<a class='open' href='SLIDER-4-URL-HERE' title='This is featured post 4'/>
<img alt='' class='full' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9yzcGFjI/AAAAAAAAB-U/Epk48KJgFkM/s1600/4.jpg'/>
</div>


<div class='imageElement'>
<h3>This is featured post 5 title</h3>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.</p>
<a class='open' href='SLIDER-5-URL-HERE' title='This is featured post 5'/>
<img alt='' class='full' src='http://4.bp.blogspot.com/_4HKUHirY_2U/TIb9zbZSIdI/AAAAAAAAB-c/4R9GvBrN6FA/s1600/5.jpg'/>
</div>


</div></div></div></div></b:if></b:if>


<!-- Featured Content Slider End -->


<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>


<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>


<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>


</div>
<div class='clear'/>
</b:includable>
<b:includable id='shareButtons' var='post'>
<b:if cond='data:post.sharePostUrl'>
<a class='share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.emailThisMsg/></span></a>
<a class='share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.blogThisMsg/></span></a>
<a class='share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a>
<a class='share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>
<a class='share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>
</b:if>
</b:includable>
<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'>&#160;</span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>
<dd class='comment-body collapseable'>
<data:backlink.snippet/>
</dd>
<dd class='comment-footer collapseable'>
<span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
<span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
</dd>
</div>
</b:loop>
</dl>
</b:if>
<p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + &quot;_backlinks-create-link&quot;' target='_blank'><data:post.createLinkLabel/></a>
</p>
</b:includable>
<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<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>


<div class='post-header-line-1'/>


<div class='postdate' style='width:100%;margin-bottom:-15px;'>
<img src='http://4.bp.blogspot.com/_4HKUHirY_2U/TIBWIk5TsUI/AAAAAAAABic/zPYi-iuOLTg/date.png'/> <data:post.timestamp/>  <img src='http://3.bp.blogspot.com/_4HKUHirY_2U/TIBWhW5_9ZI/AAAAAAAABkE/ozQci0lBi6Y/user.png'/>   <data:post.author/>
</div>


<div class='post-body entry-content'>



<p><script type='text/javascript'>
summary_noimg = 800;
summary_img = 650;
img_thumb_height = 195;
img_thumb_width = 260;
</script>
<script type='text/javascript'>
//<![CDATA[


function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s.indexOf(">")!=-1){
s = s.substring(s.indexOf(">")+1,s.length);
}
}
strx =  s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}


function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}


var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div class='readmorecontent'><a expr:href='data:post.url'>Read more &#187;</a></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if></p>


<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>


<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/></div>
</div>
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='comment-form' var='post'>
<div id='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='500'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
<span expr:class='&quot;item-control &quot; + data:backlink.adminClass'>
<a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
<img src='http://www.blogger.com/img/icon_delete13.gif'/>
</a>
</span>
</b:includable>
<b:includable id='mobile-nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<div class='mobile-link-button' id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</div>
</b:if>


<b:if cond='data:olderPageUrl'>
<div class='mobile-link-button' id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</div>
</b:if>


<div class='mobile-link-button' id='blog-pager-home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</div>


<div class='mobile-desktop-link'>
<a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
</div>


</div>
<div class='clear'/>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<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.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<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:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>
<data:adEnd/>
</div>


<!-- navigation -->
<b:include name='nextprev'/>


<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
<a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
<img src='http://www.blogger.com/img/icon_delete13.gif'/>
</a>
</span>
</b:includable>
<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != &quot;item&quot;'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>


<b:else/> <!--Post feed links -->
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='mobile-index-post' var='post'>
<b:if cond='data:post.dateHeader'>
<div class='mobile-index-date'>
<div class='date-header'>
<span><data:post.dateHeader/></span>
</div>
</div>
</b:if>


<div class='mobile-post-outer'>
<div class='mobile-index-title-outer'>
<h3 class='mobile-index-title entry-title'>
<a href='javascript:void(0)'><data:post.title/></a>
</h3>
</div>


<div>
<div class='mobile-index-arrow'>
<a href='javascript:void(0)'>&amp;rsaquo;</a>
</div>


<div class='mobile-post-contents'>
<b:if cond='data:post.thumbnailUrl'>
<div class='mobile-index-thumbnail'>
<div class='Image'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</div>
</b:if>


<div class='post-body'>
<b:if cond='data:post.snippet'><data:post.snippet/></b:if>
</div>
</div>
<div style='clear: both;'/>
</div>


<div class='mobile-index-comment'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments != 0'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</b:if>
</div>
</div>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>


<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
&#160;
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>


<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>


<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
&#160;
<data:post.commentRangeText/>
&am

Alright.This is the last place I can ask for help.Other forums are not responsive and helpful though..This is the code with widgets expanded...

<?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 expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
</b:if>


<!-- Start www.bloggertipandtrick.net: Changing the Blogger Title Tag  -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
<!-- End www.bloggertipandtrick.net: Changing the Blogger Title Tag  -->


<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>


<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:   GamesHit
Author: Lasantha Bandara
URL 1:  http://www.premiumbloggertemplates.com/
URL 2:  http://www.bloggertipandtrick.net/
Date:   September 2010
License:  This free Blogger template is licensed under the Creative Commons Attribution 3.0 License, which permits both personal and commercial use.
However, to satisfy the 'attribution' clause of the license, you are required to keep the footer links intact which provides due credit to its authors. For more specific details about the license, you may visit the URL below:http://creativecommons.org/licenses/by/3.0/
----------------------------------------------- */


/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc6600">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#999999">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<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">
*/


/* Use this with templates/template-twocol.html */


]]></b:skin>


<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js' type='text/javascript'/>


<script type='text/javascript'>
//<![CDATA[


//MooTools More, <http://mootools.net/more>. Copyright (c) 2006-2008 Valerio Proietti, <http://mad4milk.net>, MIT Style License.


eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('11.36=f 12({1M:11,a:{1m:"2s"},X:8(B,A){7.P("1v",8(){7.1w=(7.13["k"+7.1x.37()]!=0);b(7.1w&&2t.2u.38){7.e.39().2v(7.13)}},n);7.e=7.2w=$(B);7.Q(A);9 C=7.e.1n("13");7.13=C||f 1c("3Y",{3Z:$1Y(7.e.40("14","1N"),{41:"42"})}).43(7.e);7.e.1Z("13",7.13).1d("14",0);7.l=[];7.1w=n},2s:8(){7.14="14-15";7.1x="21";7.k=7.e.2x},22:8(){7.14="14-16";7.1x="23";7.k=7.e.2y},17:8(A){7.e.1d(7.14,A[0]);7.13.1d(7.1x,A[1]);c 7},1O:8(E,D,C){9 B=[];9 A=2;A.3a(8(F){B[F]=11.1O(E[F],D[F],C)});c B},h:8(B,E){b(!7.z(Y.2z,B,E)){c 7}7[E||7.a.1m]();9 D=7.e.1e(7.14).1P();9 C=7.13.1e(7.1x).1P();9 A=[[D,C],[0,7.k]];9 G=[[D,C],[-7.k,0]];9 F;1Q(B){o"R":F=A;1f;o"3b":F=G;1f;o"1R":F=(7.13["k"+7.1x.37()]==0)?A:G}c 7.Q(F[0],F[1])},3c:8(A){c 7.h("R",A)},3d:8(A){c 7.h("3b",A)},2A:8(A){7[A||7.a.1m]();7.1w=j;c 7.17([-7.k,0])},2B:8(A){7[A||7.a.1m]();7.1w=n;c 7.17([0,7.k])},1R:8(A){c 7.h("1R",A)}});1c.44.r={17:8(B){9 A=7.1n("r");b(A){A.Z()}c 7.3e("r").1Z("r:a",$1Y({2C:"Z"},B))},2D:8(A){b(A||!7.1n("r")){b(A||!7.1n("r:a")){7.17("r",A)}7.1Z("r",f 11.36(7,7.1n("r:a")))}c 7.1n("r")}};1c.1o({r:8(D,E){D=D||"1R";9 B=7.2D("r"),A;1Q(D){o"2A":B.2A(E);1f;o"2B":B.2B(E);1f;o"1R":9 C=7.1n("r:2E",B.1w);B[(C)?"3d":"3c"](E);7.1Z("r:2E",!C);A=n;1f;45:B.h(D,E)}b(!A){7.3e("r:2E")}c 7}});11.46=f 12({1M:11,a:{k:{x:0,y:0},3f:n},X:8(B,A){7.e=7.2w=$(B);7.Q(A);9 D=7.Z.M(7,j);b($10(7.e)!="e"){7.e=$(7.e.24().25)}9 C=7.e;b(7.a.3f){7.P("h",8(){C.P("2F",D)},n);7.P("1v",8(){C.18("2F",D)},n)}},17:8(){9 A=1y.3g(Y);7.e.3h(A[0],A[1])},1O:8(E,D,C){9 B=[];9 A=2;A.3a(8(F){B.26(11.1O(E[F],D[F],C))});c B},h:8(C,H){b(!7.z(Y.2z,C,H)){c 7}9 E=7.e.3i(),F=7.e.47();9 B=7.e.3j(),D={x:C,y:H};S(9 G R D){9 A=F[G]-E[G];b($1z(D[G])){D[G]=($10(D[G])=="2G")?D[G].m(0,A):A}s{D[G]=B[G]}D[G]+=7.a.k[G]}c 7.Q([B.x,B.y],[D.x,D.y])},48:8(){c 7.h(j,0)},49:8(){c 7.h(0,j)},4a:8(){c 7.h("1A",j)},4b:8(){c 7.h(j,"1B")},4c:8(B){9 A=$(B).27(7.e);c 7.h(A.x,A.y)}});11.3k=f 12({1M:11.4d,X:8(B,A){7.2H=7.2w=$$(B);7.Q(A)},1O:8(G,H,I){9 C={};S(9 D R G){9 A=G[D],E=H[D],F=C[D]={};S(9 B R A){F=7.Q(A,E,I)}}c C},17:8(B){S(9 C R B){9 A=B[C];S(9 D R A){7.4e(7.2H[C],D,A[D],7.a.2I)}}c 7},h:8(C){b(!7.z(Y.2z,C)){c 7}9 H={},I={};S(9 D R C){9 F=C[D],A=H[D]={},G=I[D]={};S(9 B R F){9 E=7.4f(7.2H[D],B,F);A=E.4g;G=E.4h}}c 7.Q(H,I)}});9 1C=f 12({2J:[2K,2L],a:{1p:6,2I:"4i",1g:j,2M:n,m:j,28:j,29:j,1q:j,U:{x:"16",y:"15"}},X:8(){9 B=1y.2C(Y,{a:4j.10,e:$4k});7.e=$(B.e);7.t=7.e.24();7.2N(B.a||{});9 A=$10(7.a.28);7.2O=(A=="4l"||A=="4m")?$$(7.a.28):$(7.a.28)||7.e;7.19={l:{},2P:{}};7.p={h:{},l:{}};7.2a=(2t.2u.4n)?"4o":"2b";7.v={h:7.h.M(7),z:7.z.M(7),V:7.V.M(7),1h:7.1h.M(7),Z:7.Z.M(7),2c:$2Q(j)};7.3l()},3l:8(){7.2O.P("2b",7.v.h);c 7},4p:8(){7.2O.18("2b",7.v.h);c 7},h:8(C){b(7.a.1q){C.1q()}7.u("4q",7.e);7.19.h=C.N;9 A=7.a.m;7.m={x:[],y:[]};S(9 D R 7.a.U){b(!7.a.U[D]){3m}b(7.a.2M){7.p.l[D]=7.e.1e(7.a.U[D]).1P()}s{7.p.l[D]=7.e[7.a.U[D]]}b(7.a.29){7.p.l[D]*=-1}7.19.2P[D]=C.N[D]-7.p.l[D];b(A&&A[D]){S(9 B=2;B--;B){b($1z(A[D])){7.m[D]=$2Q(A[D])()}}}}b($10(7.a.1g)=="2G"){7.a.1g={x:7.a.1g,y:7.a.1g}}7.t.2R({1D:7.v.z,2d:7.v.Z});7.t.P(7.2a,7.v.2c)},z:8(A){b(7.a.1q){A.1q()}9 B=i.O(i.4r(i.3n(A.N.x-7.19.h.x,2)+i.3n(A.N.y-7.19.h.y,2)));b(B>7.a.1p){7.Z();7.t.2R({1D:7.v.V,2d:7.v.1h});7.u("h",7.e).u("1p",7.e)}},V:8(A){b(7.a.1q){A.1q()}7.19.l=A.N;S(9 B R 7.a.U){b(!7.a.U){3m}7.p.l=7.19.l-7.19.2P;b(7.a.29){7.p.l*=-1}b(7.a.m&&7.m){b($1z(7.m[1])&&(7.p.l>7.m[1])){7.p.l=7.m[1]}s{b($1z(7.m[0])&&(7.p.l<7.m[0])){7.p.l=7.m[0]}}}b(7.a.1g){7.p.l-=(7.p.l%7.a.1g)}b(7.a.2M){7.e.1d(7.a.U,7.p.l+7.a.2I)}s{7.e[7.a.U]=7.p.l}}7.u("V",7.e)},Z:8(A){7.t.18("1D",7.v.z);7.t.18("2d",7.v.Z);b(A){7.t.18(7.2a,7.v.2c);7.u("Z",7.e)}},1h:8(A){7.t.18(7.2a,7.v.2c);7.t.18("1D",7.v.V);7.t.18("2d",7.v.1h);b(A){7.u("1v",7.e)}}});1c.1o({4s:8(A){c f 1C(7,$2e({U:{x:"23",y:"21"}},A))}});1C.3o=f 12({1M:1C,a:{1S:[],1a:j},X:8(C,B){7.Q(C,B);7.1S=$$(7.a.1S);7.1a=$(7.a.1a);b(7.1a&&$10(7.1a)!="e"){7.1a=$(7.1a.24().25)}C=7.e;9 D=C.1e("1N");9 A=(D!="4t")?D:"4u";b(C.1e("16")=="3p"||C.1e("15")=="3p"){C.1N(C.27(C.3q))}C.1d("1N",A);7.P("h",8(){7.2f()},n)},h:8(B){b(7.1a){9 D=7.e,J=7.1a,E=J.3r(D.3q),F={},A={};["15","1A","1B","16"].1r(8(K){F[K]=J.1e("4v-"+K).1P();A[K]=D.1e("14-"+K).1P()},7);9 C=D.2y+A.16+A.1A,I=D.2x+A.15+A.1B;9 H=[E.16+F.16,E.1A-F.1A-C];9 G=[E.15+F.15,E.1B-F.1B-I];7.a.m={x:H,y:G}}7.Q(B)},3s:8(B){B=B.3r();9 A=7.19.l;c(A.x>B.16&&A.x<B.1A&&A.y<B.1B&&A.y>B.15)},2f:8(){9 A=7.1S.4w(7.3s,7).3t();b(7.1s!=A){b(7.1s){7.u("4x",[7.e,7.1s])}b(A){7.1s=A;7.u("4y",[7.e,A])}s{7.1s=1E}}},V:8(A){7.Q(A);b(7.1S.2g){7.2f()}},1h:8(A){7.2f();7.u("4z",[7.e,7.1s]);7.1s=1E;c 7.Q(A)}});1c.1o({4A:8(A){c f 1C.3o(7,A)}});1F.2S=f 12({1M:2S,a:{3u:n},X:8(B,A){7.Q(B,A);7.2h()},3v:8(){9 A=3w.4B(7.2T);b(!A||A.2g>4C){c j}b(A=="{}"){7.39()}s{7.4D(A)}c n},2h:8(){7.2T=f 1F(3w.4E(7.4F(),n));c 7}});1F.2S.1o((8(){9 A={};1F.1r(1F.4G,8(C,B){A=8(){9 D=C.4H(7.2T,Y);b(7.a.3u){7.3v()}c D}});c A})());9 W=f 4I({X:8(B,C){b(Y.2g>=3){C="1G";B=1y.2i(Y,0,3)}s{b(4J B=="4K"){b(B.2j(/1G/)){B=B.3x().2U(n)}s{b(B.2j(/q/)){B=B.1T()}s{B=B.2U(n)}}}}C=C||"1G";1Q(C){o"q":9 A=B;B=B.1T();B.q=A;1f;o"2V":B=B.2U(n);1f}B.1G=B.2i(0,3);B.q=B.q||B.2k();B.2V=B.3x();c $1Y(B,7)}});W.1o({4L:8(){9 A=1y.2i(Y);9 C=($10(A.3t())=="2G")?A.4M():50;9 B=7.2i();A.1r(8(D){D=f W(D);S(9 E=0;E<3;E++){B[E]=i.O((B[E]/1i*(1i-C))+(D[E]/1i*C))}});c f W(B,"1G")},29:8(){c f W(7.4N(8(A){c 1H-A}))},4O:8(A){c f W([A,7.q[1],7.q[2]],"q")},4P:8(A){c f W([7.q[0],A,7.q[2]],"q")},4Q:8(A){c f W([7.q[0],7.q[1],A],"q")}});8 $4R(C,B,A){c f W([C,B,A],"1G")}8 $4S(C,B,A){c f W([C,B,A],"q")}8 $4T(A){c f W(A,"2V")}1y.1o({2k:8(){9 B=7[0],C=7[1],J=7[2];9 G,F,H;9 I=i.1U(B,C,J),E=i.1j(B,C,J);9 K=I-E;H=I/1H;F=(I!=0)?K/I:0;b(F==0){G=0}s{9 D=(I-B)/K;9 A=(I-C)/K;9 L=(I-J)/K;b(B==I){G=L-A}s{b(C==I){G=2+D-L}s{G=4+A-D}}G/=6;b(G<0){G++}}c[i.O(G*3y),i.O(F*1i),i.O(H*1i)]},1T:8(){9 C=i.O(7[2]/1i*1H);b(7[1]==0){c[C,C,C]}s{9 A=7[0]%3y;9 E=A%2W;9 F=i.O((7[2]*(1i-7[1]))/4U*1H);9 D=i.O((7[2]*(3z-7[1]*E))/3A*1H);9 B=i.O((7[2]*(3z-7[1]*(2W-E)))/3A*1H);1Q(i.4V(A/2W)){o 0:c[C,B,F];o 1:c[D,C,F];o 2:c[F,C,B];o 3:c[F,D,C];o 4:c[B,F,C];o 5:c[C,F,D]}}c j}});4W.1o({2k:8(){9 A=7.2j(/\\d{1,3}/g);c(A)?q.2k():1E},1T:8(){9 A=7.2j(/\\d{1,3}/g);c(A)?A.1T():1E}});9 4X=f 12({X:8(){7.2l=1y.3g(Y);7.1I={};7.1J={}},P:8(B,A){7.1J=7.1J||{};7.1I=7.1I||[];b(7.1I.3B(A)){c j}s{7.1I.26(A)}7.2l.1r(8(C,D){C.P(B,7.z.M(7,[B,C,D]))},7);c 7},z:8(C,A,B){7.1J[C]=n;9 D=7.2l.4Y(8(F,E){c 7.1J[C][E]||j},7);b(!D){c}7.1J[C]={};7.1I[C].1r(8(E){E.3C(7,7.2l,A)},7)}});9 3D=f 1F({3E:8(F,D){D=$1Y({1t:$1K,t:t,z:$2Q(n)},D);9 B=f 1c("4Z",{2X:F,10:"3F/3E"});9 E=D.1t.M(B),A=D.z,G=D.t;2m D.1t;2m D.z;2m D.t;B.2R({2h:E,51:8(){b(["52","1v"].3B(7.53)){E()}}}).3G(D);b(2t.2u.38){9 C=(8(){b(!$54(A)){c}$3H(C);E()}).3I(50)}c B.2v(G.3J)},3K:8(B,A){c f 1c("2C",$2e({55:"56",57:"58",10:"3F/3K",59:B},A)).2v(t.3J)},3L:8(C,B){B=$2e({1t:$1K,3M:$1K,3N:$1K},B);9 D=f 5a();9 A=$(D)||f 1c("5b");["2h","5c","5d"].1r(8(E){9 F="5e"+E;9 G=B[F];2m B[F];D[F]=8(){b(!D){c}b(!A.5f){A.23=D.23;A.21=D.21}D=D.1t=D.3M=D.3N=1E;G.3O(1,A,A);A.u(E,A,1)}});D.2X=A.2X=C;b(D&&D.1v){D.1t.3O(1)}c A.3G(B)},5g:8(D,C){C=$2e({2Y:$1K,3P:$1K},C);b(!D.26){D=[D]}9 A=[];9 B=0;D.1r(8(F){9 E=f 3D.3L(F,{1t:8(){C.3P.3C(7,B,D.5h(F));B++;b(B==D.2g){C.2Y()}}});A.26(E)});c f 3k(A)}});9 5i=f 12({2J:[2K,2L],a:{5j:8(A){b(7.a.1p){A=7.2Z(7.w)}7.1L.1d(7.1V,A)},1p:j,k:0,T:j,2n:j,1k:1i,1m:"22"},X:8(E,A,D){7.2N(D);7.e=$(E);7.1L=$(A);7.30=7.31=7.w=-1;7.e.P("2b",7.3Q.M(7));b(7.a.2n){7.e.P("2F",7.3R.5k(7))}9 F,B={},C={x:j,y:j};1Q(7.a.1m){o"2s":7.1l="y";7.1V="15";F="2x";1f;o"22":7.1l="x";7.1V="16";F="2y"}7.3S=7.1L[F]/2;7.1b=7.e[F]-7.1L[F]+(7.a.k*2);7.1j=$1z(7.a.T[0])?7.a.T[0]:0;7.1U=$1z(7.a.T[1])?7.a.T[1]:7.a.1k;7.T=7.1U-7.1j;7.1k=7.a.1k||7.1b;7.1u=i.32(7.T)/7.1k;7.3T=7.1u*7.1b/i.32(7.T);7.1L.1d("1N","5l").1d(7.1V,-7.a.k);C[7.1l]=7.1V;B[7.1l]=[-7.a.k,7.1b-7.a.k];7.V=f 1C(7.1L,{1p:0,m:B,U:C,5m:7.2o.M(7),5n:7.2o.M(7),2Y:8(){7.2o();7.2p()}.M(7)});b(7.a.1p){7.V.a.1g=i.5o(7.3T);7.V.a.m[7.1l][1]=7.1b}},17:8(A){b(!((7.T>0)^(A<7.1j))){A=7.1j}b(!((7.T>0)^(A>7.1U))){A=7.1U}7.w=i.O(A);7.2q();7.2p();7.u("3U",7.2Z(7.w));c 7},3Q:8(C){9 B=7.T<0?-1:1;9 A=C.N[7.1l]-7.e.27()[7.1l]-7.3S;A=A.m(-7.a.k,7.1b-7.a.k);7.w=i.O(7.1j+B*7.33(A));7.2q();7.2p();7.u("3U",A)},3R:8(A){9 B=(7.a.1m=="22")?(A.2n<0):(A.2n>0);7.17(B?7.w-7.1u:7.w+7.1u);A.1h()},2o:8(){9 B=7.T<0?-1:1;9 A=7.V.p.l[7.1l];A=A.m(-7.a.k,7.1b-7.a.k);7.w=i.O(7.1j+B*7.33(A));7.2q()},2q:8(){b(7.30!=7.w){7.30=7.w;7.u("3V",7.w)}},2p:8(){b(7.31!==7.w){7.31=7.w;7.u("1v",7.w+"")}},33:8(A){9 B=(A+7.a.k)*7.1u/7.1b*7.1k;c 7.a.1k?i.O(B-=B%7.1u):B},2Z:8(A){c(7.1b*i.32(7.1j-A))/(7.1k*7.1u)-7.a.k}});9 5p=f 12({2J:[2K,2L],a:{1W:20,34:1,5q:8(A,B){7.e.3h(A,B)}},X:8(B,A){7.2N(A);7.e=$(B);7.2r=($10(7.e)!="e")?$(7.e.24().25):7.e;7.1X=1E;7.35=7.3W.M(7)},h:8(){7.2r.P("1D",7.35)},1h:8(){7.2r.18("1D",7.35);7.1X=$3H(7.1X)},3W:8(A){7.N=(7.2r.2D("5r")=="25")?A.5s:A.N;b(!7.1X){7.1X=7.3X.3I(50,7)}},3X:8(){9 B=7.e.3i(),A=7.e.3j(),E=7.e.27(),D={x:0,y:0};S(9 C R 7.N){b(7.N[C]<(7.a.1W+E[C])&&A[C]!=0){D[C]=(7.N[C]-7.a.1W-E[C])*7.a.34}s{b(7.N[C]+7.a.1W>(B[C]+E[C])&&B[C]+B[C]!=A[C]){D[C]=(7.N[C]-B[C]+7.a.1W-E[C])*7.a.34}}}b(D.y||D.x){7.u("3V",[A.x+D.x,A.y+D.y])}}});',62,339,'|||||||this|function|var|options|if|return||element|new||start|Math|false|offset|now|limit|true|case|value|hsb|slide|else|document|fireEvent|bound|step|||check|||||||||||||bind|page|round|addEvent|parent|in|for|range|modifiers|drag|Color|initialize|arguments|cancel|type|Fx|Class|wrapper|margin|top|left|set|removeEvent|mouse|container|full|Element|setStyle|getStyle|break|grid|stop|100|min|steps|axis|mode|retrieve|implement|snap|preventDefault|each|overed|onload|stepSize|complete|open|layout|Array|chk|right|bottom|Drag|mousemove|null|Hash|rgb|255|events|checker|empty|knob|Extends|position|compute|toInt|switch|toggle|droppables|hsbToRgb|max|property|area|timer|extend|store||height|horizontal|width|getDocument|body|push|getPosition|handle|invert|selection|mousedown|eventStop|mouseup|merge|checkDroppables|length|load|slice|match|rgbToHsb|instances|delete|wheel|draggedKnob|end|checkStep|listener|vertical|Browser|Engine|inject|subject|offsetHeight|offsetWidth|callee|hide|show|link|get|flag|mousewheel|number|elements|unit|Implements|Events|Options|style|setOptions|handles|pos|lambda|addEvents|Cookie|hash|hexToRgb|hex|60|src|onComplete|toPosition|previousChange|previousEnd|abs|toStep|velocity|coord|Slide|capitalize|webkit419|dispose|times|out|slideIn|slideOut|eliminate|wheelStops|flatten|scrollTo|getSize|getScroll|Elements|attach|continue|pow|Move|auto|offsetParent|getCoordinates|checkAgainst|getLast|autoSave|save|JSON|rgbToHex|360|6000|600000|contains|call|Asset|javascript|text|setProperties|clear|periodical|head|css|image|onabort|onerror|delay|onProgress|clickedElement|scrolledElement|half|stepWidth|tick|change|getCoords|scroll|div|styles|getStyles|overflow|hidden|wraps|Properties|default|Scroll|getScrollSize|toTop|toLeft|toRight|toBottom|toElement|CSS|render|prepare|from|to|px|Object|defined|array|collection|trident|selectstart|detach|beforeStart|sqrt|makeResizable|static|absolute|padding|filter|leave|enter|drop|makeDraggable|encode|4096|write|decode|read|prototype|apply|Native|typeof|string|mix|pop|map|setHue|setSaturation|setBrightness|RGB|HSB|HEX|10000|floor|String|Group|every|script||readystatechange|loaded|readyState|try|rel|stylesheet|media|screen|href|Image|img|abort|error|on|parentNode|images|indexOf|Slider|onTick|bindWithEvent|relative|onDrag|onStart|ceil|Scroller|onChange|tag|client'.split('|'),0,{}))


//]]>
</script>


<script type='text/javascript'>
//<![CDATA[


/*
This file is part of JonDesign's SmoothGallery v2.1beta1.


JonDesign's SmoothGallery is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.


JonDesign's SmoothGallery is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.


You should have received a copy of the GNU General Public License
along with JonDesign's SmoothGallery; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA


Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)
Contributed code by:
- Christian Ehret (bugfix)
- Nitrix (bugfix)
- Valerio from Mad4Milk for his great help with the carousel scrolling and many other things.
- Archie Cowan for helping me find a bugfix on carousel inner width problem.
- Tomocchino from #mootools for the preloader class
Many thanks to:
- The mootools team for the great mootools lib, and it's help and support throughout the project.
- Harald Kirschner (digitarald: http://digitarald.de/) for all his great libs. Some used here as plugins.
*/


/* some quirks to circumvent broken stuff in mt1.2 */
function isBody(element){
return (/^(?:body|html)$/i).test(element.tagName);
};
Element.implement({
getPosition: function(relative){
if (isBody(this)) return {x: 0, y: 0};
var el = this, position = {x: 0, y: 0};
while (el){
position.x += el.offsetLeft;
position.y += el.offsetTop;
el = el.offsetParent;
}
var rpos = (relative) ? $(relative).getPosition() : {x: 0, y: 0};
return {x: position.x - rpos.x, y: position.y - rpos.y};
}
});


// declaring the class
var gallery = {
Implements: [Events, Options],
options: {
showArrows: true,
showCarousel: true,
showInfopane: true,
embedLinks: true,
fadeDuration: 500,
timed: false,
delay: 9000,
preloader: true,
preloaderImage: true,
preloaderErrorImage: true,
/* Data retrieval */
manualData: [],
populateFrom: false,
populateData: true,
destroyAfterPopulate: true,
elementSelector: "div.imageElement",
titleSelector: "h3",
subtitleSelector: "p",
linkSelector: "a.open",
imageSelector: "img.full",
thumbnailSelector: "img.thumbnail",
defaultTransition: "fade",
/* InfoPane options */
slideInfoZoneOpacity: 0.7,
slideInfoZoneSlide: true,
/* Carousel options */
carouselMinimizedOpacity: 0.4,
carouselMinimizedHeight: 20,
carouselMaximizedOpacity: 0.9,
thumbHeight: 75,
thumbWidth: 100,
thumbSpacing: 10,
thumbIdleOpacity: 0.2,
textShowCarousel: 'Pictures',
showCarouselLabel: true,
thumbCloseCarousel: true,
useThumbGenerator: false,
thumbGenerator: 'resizer.php',
useExternalCarousel: false,
carouselElement: false,
carouselHorizontal: true,
activateCarouselScroller: true,
carouselPreloader: true,
textPreloadingCarousel: 'Loading...',
/* CSS Classes */
baseClass: 'jdGallery',
withArrowsClass: 'withArrows',
/* Plugins: HistoryManager */
useHistoryManager: false,
customHistoryKey: false,
/* Plugins: ReMooz */
useReMooz: false
},
initialize: function(element, options) {
this.setOptions(options);
this.fireEvent('onInit');
this.currentIter = 0;
this.lastIter = 0;
this.maxIter = 0;
this.galleryElement = element;
this.galleryData = this.options.manualData;
this.galleryInit = 1;
this.galleryElements = Array();
this.thumbnailElements = Array();
this.galleryElement.addClass(this.options.baseClass);


if (this.options.useReMooz&&(this.options.defaultTransition=="fade"))
this.options.defaultTransition="crossfade";


this.populateFrom = element;
if (this.options.populateFrom)
this.populateFrom = this.options.populateFrom;
if (this.options.populateData)
this.populateData();
element.style.display="block";


if (this.options.useHistoryManager)
this.initHistory();


if ((this.options.embedLinks)|(this.options.useReMooz))
{
this.currentLink = new Element('a').addClass('open').setProperties({
href: '#',
title: ''
}).injectInside(element);
if ((!this.options.showArrows) && (!this.options.showCarousel))
this.galleryElement = element = this.currentLink;
else
this.currentLink.setStyle('display', 'none');
}


this.constructElements();
if ((this.galleryData.length>1)&&(this.options.showArrows))
{
var leftArrow = new Element('a').addClass('left').addEvent(
'click',
this.prevItem.bind(this)
).injectInside(element);
var rightArrow = new Element('a').addClass('right').addEvent(
'click',
this.nextItem.bind(this)
).injectInside(element);
this.galleryElement.addClass(this.options.withArrowsClass);
}
this.loadingElement = new Element('div').addClass('loadingElement').injectInside(element);
if (this.options.showInfopane) this.initInfoSlideshow();
if (this.options.showCarousel) this.initCarousel();
this.doSlideShow(1);
},
populateData: function() {
currentArrayPlace = this.galleryData.length;
options = this.options;
var data = $A(this.galleryData);
data.extend(this.populateGallery(this.populateFrom, currentArrayPlace));
this.galleryData = data;
this.fireEvent('onPopulated');
},
populateGallery: function(element, startNumber) {
var data = [];
options = this.options;
currentArrayPlace = startNumber;
element.getElements(options.elementSelector).each(function(el) {
elementDict = $H({
image: el.getElement(options.imageSelector).getProperty('src'),
number: currentArrayPlace,
transition: this.options.defaultTransition
});
if ((options.showInfopane) | (options.showCarousel))
elementDict.extend({
title: el.getElement(options.titleSelector).innerHTML,
description: el.getElement(options.subtitleSelector).innerHTML
});
if ((options.embedLinks) | (options.useReMooz))
elementDict.extend({
link: el.getElement(options.linkSelector).href||false,
linkTitle: el.getElement(options.linkSelector).title||false,
linkTarget: el.getElement(options.linkSelector).getProperty('target')||false
});
if ((!options.useThumbGenerator) && (options.showCarousel))
elementDict.extend({
thumbnail: el.getElement(options.thumbnailSelector).getProperty('src')
});
else if (options.useThumbGenerator)
elementDict.extend({
thumbnail: options.thumbGenerator + '?imgfile=' + elementDict.image + '&max_width=' + options.thumbWidth + '&max_height=' + options.thumbHeight
});


data.extend([elementDict]);
currentArrayPlace++;
if (this.options.destroyAfterPopulate)
el.dispose();
});
return data;
},
constructElements: function() {
el = this.galleryElement;
if (this.options.embedLinks && (!this.options.showArrows))
el = this.currentLink;
this.maxIter = this.galleryData.length;
var currentImg;
for(i=0;i<this.galleryData.length;i++)
{
var currentImg = new Fx.Morph(
new Element('div').addClass('slideElement').setStyles({
'position':'absolute',
'left':'0px',
'right':'0px',
'margin':'0px',
'padding':'0px',
'backgroundPosition':"center center",
'opacity':'0'
}).injectInside(el),
{duration: this.options.fadeDuration}
);
if (this.options.preloader)
{
currentImg.source = this.galleryData.image;
currentImg.loaded = false;
currentImg.load = function(imageStyle, i) {
if (!imageStyle.loaded) {
this.galleryData.imgloader = new Asset.image(imageStyle.source, {
'onload'  : function(img, i){
img.element.setStyle(
'backgroundImage',
"url('" + img.source + "')")
img.loaded = true;
img.width = this.galleryData.imgloader.width;
img.height = this.galleryData.imgloader.height;
}.pass([imageStyle, i], this)
});
}
}.pass([currentImg, i], this);
} else {
currentImg.element.setStyle('backgroundImage',
"url('" + this.galleryData.image + "')");
}
this.galleryElements[parseInt(i)] = currentImg;
}
},
destroySlideShow: function(element) {
var myClassName = element.className;
var newElement = new Element('div').addClass('myClassName');
element.parentNode.replaceChild(newElement, element);
},
startSlideShow: function() {
this.fireEvent('onStart');
this.loadingElement.style.display = "none";
this.lastIter = this.maxIter - 1;
this.currentIter = 0;
this.galleryInit = 0;
this.galleryElements[parseInt(this.currentIter)].set({opacity: 1});
if (this.options.showInfopane)
this.showInfoSlideShow.delay(1000, this);
if (this.options.useReMooz)
this.makeReMooz.delay(1000, this);
var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
if (this.options.showCarousel&&(!this.options.carouselPreloader)&&(!this.options.useExternalCarousel))
this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
this.prepareTimer();
if (this.options.embedLinks)
this.makeLink(this.currentIter);
},
nextItem: function() {
this.fireEvent('onNextCalled');
this.nextIter = this.currentIter+1;
if (this.nextIter >= this.maxIter)
this.nextIter = 0;
this.galleryInit = 0;
this.goTo(this.nextIter);
},
prevItem: function() {
this.fireEvent('onPreviousCalled');
this.nextIter = this.currentIter-1;
if (this.nextIter <= -1)
this.nextIter = this.maxIter - 1;
this.galleryInit = 0;
this.goTo(this.nextIter);
},
goTo: function(num) {
this.clearTimer();
if(this.options.preloader)
{
this.galleryElements[num].load();
if (num==0)
this.galleryElements[this.maxIter - 1].load();
else
this.galleryElements[num - 1].load();
if (num==(this.maxIter - 1))
this.galleryElements[0].load();
else
this.galleryElements[num + 1].load();


}
if (this.options.embedLinks)
this.clearLink();
if (this.options.showInfopane)
{
this.slideInfoZone.clearChain();
this.hideInfoSlideShow().chain(this.changeItem.pass(num, this));
} else
this.currentChangeDelay = this.changeItem.delay(500, this, num);
if (this.options.embedLinks)
this.makeLink(num);
this.prepareTimer();
/*if (this.options.showCarousel)
this.clearThumbnailsHighlights();*/
},
changeItem: function(num) {
this.fireEvent('onStartChanging');
this.galleryInit = 0;
if (this.currentIter != num)
{
for(i=0;i<this.maxIter;i++)
{
if ((i != this.currentIter)) this.galleryElements.set({opacity: 0});
}
gallery.Transitions[this.galleryData[num].transition].pass([
this.galleryElements[this.currentIter],
this.galleryElements[num],
this.currentIter,
num], this)();
this.currentIter = num;
if (this.options.useReMooz)
this.makeReMooz();
}
var textShowCarousel = formatString(this.options.textShowCarousel, num+1, this.maxIter);
if ((this.options.showCarousel)&&(!this.options.useExternalCarousel))
this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
this.doSlideShow.bind(this)();
this.fireEvent('onChanged');
},
clearTimer: function() {
if (this.options.timed)
$clear(this.timer);
},
prepareTimer: function() {
if (this.options.timed)
this.timer = this.nextItem.delay(this.options.delay, this);
},
doSlideShow: function(position) {
if (this.galleryInit == 1)
{
imgPreloader = new Image();
imgPreloader.onload=function(){
this.startSlideShow.delay(10, this);
}.bind(this);
imgPreloader.src = this.galleryData[0].image;
if(this.options.preloader)
this.galleryElements[0].load();
} else {
if (this.options.showInfopane)
{
if (this.options.showInfopane)
{
this.showInfoSlideShow.delay((500 + this.options.fadeDuration), this);
} else
if ((this.options.showCarousel)&&(this.options.activateCarouselScroller))
this.centerCarouselOn(position);
}
}
},
createCarousel: function() {
var carouselElement;
if (!this.options.useExternalCarousel)
{
var carouselContainerElement = new Element('div').addClass('carouselContainer').injectInside(this.galleryElement);
this.carouselContainer = new Fx.Morph(carouselContainerElement, {transition: Fx.Transitions.Expo.easeOut});
this.carouselContainer.normalHeight = carouselContainerElement.offsetHeight;
this.carouselContainer.set({'opacity': this.options.carouselMinimizedOpacity, 'top': (this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight)});
this.carouselBtn = new Element('a').addClass('carouselBtn').setProperties({
title: this.options.textShowCarousel
}).injectInside(carouselContainerElement);
if(this.options.carouselPreloader)
this.carouselBtn.set('html', this.options.textPreloadingCarousel);
else
this.carouselBtn.set('html', this.options.textShowCarousel);
this.carouselBtn.addEvent(
'click',
function () {
this.carouselContainer.cancel();
this.toggleCarousel();
}.bind(this)
);
this.carouselActive = false;


carouselElement = new Element('div').addClass('carousel').injectInside(carouselContainerElement);
this.carousel = new Fx.Morph(carouselElement);
} else {
carouselElement = $(this.options.carouselElement).addClass('jdExtCarousel');
}
this.carouselElement = new Fx.Morph(carouselElement, {transition: Fx.Transitions.Expo.easeOut});
this.carouselElement.normalHeight = carouselElement.offsetHeight;
if (this.options.showCarouselLabel)
this.carouselLabel = new Element('p').addClass('label').injectInside(carouselElement);
carouselWrapper = new Element('div').addClass('carouselWrapper').injectInside(carouselElement);
this.carouselWrapper = new Fx.Morph(carouselWrapper, {transition: Fx.Transitions.Expo.easeOut});
this.carouselWrapper.normalHeight = carouselWrapper.offsetHeight;
this.carouselInner = new Element('div').addClass('carouselInner').injectInside(carouselWrapper);
if (this.options.activateCarouselScroller)
{
this.carouselWrapper.scroller = new Scroller(carouselWrapper, {
area: 100,
velocity: 0.2
})


this.carouselWrapper.elementScroller = new Fx.Scroll(carouselWrapper, {
duration: 400,
onStart: this.carouselWrapper.scroller.stop.bind(this.carouselWrapper.scroller),
onComplete: this.carouselWrapper.scroller.start.bind(this.carouselWrapper.scroller)
});
}
},
fillCarousel: function() {
this.constructThumbnails();
this.carouselInner.normalWidth = ((this.maxIter * (this.options.thumbWidth + this.options.thumbSpacing + 2))+this.options.thumbSpacing) + "px";
if (this.options.carouselHorizontal)
this.carouselInner.style.width = this.carouselInner.normalWidth;
},
initCarousel: function () {
this.createCarousel();
this.fillCarousel();
if (this.options.carouselPreloader)
this.preloadThumbnails();
},
flushCarousel: function() {
this.thumbnailElements.each(function(myFx) {
myFx.element.dispose();
myFx = myFx.element = null;
});
this.thumbnailElements = [];
},
toggleCarousel: function() {
if (this.carouselActive)
this.hideCarousel();
else
this.showCarousel();
},
showCarousel: function () {
this.fireEvent('onShowCarousel');
this.carouselContainer.start({
'opacity': this.options.carouselMaximizedOpacity,
'top': 0
}).chain(function() {
this.carouselActive = true;
this.carouselWrapper.scroller.start();
this.fireEvent('onCarouselShown');
this.carouselContainer.options.onComplete = null;
}.bind(this));
},
hideCarousel: function () {
this.fireEvent('onHideCarousel');
var targetTop = this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight;
this.carouselContainer.start({
'opacity': this.options.carouselMinimizedOpacity,
'top': targetTop
}).chain(function() {
this.carouselActive = false;
this.carouselWrapper.scroller.stop();
this.fireEvent('onCarouselHidden');
this.carouselContainer.options.onComplete = null;
}.bind(this));
},
constructThumbnails: function () {
element = this.carouselInner;
for(i=0;i<this.galleryData.length;i++)
{
var currentImg = new Fx.Morph(new Element ('div').addClass("thumbnail").setStyles({
backgroundImage: "url('" + this.galleryData.thumbnail + "')",
backgroundPosition: "center center",
backgroundRepeat: 'no-repeat',
marginLeft: this.options.thumbSpacing + "px",
width: this.options.thumbWidth + "px",
height: this.options.thumbHeight + "px"
}).injectInside(element), {duration: 200}).start({
'opacity': this.options.thumbIdleOpacity
});
currentImg.element.addEvents({
'mouseover': function (myself) {
myself.cancel();
myself.start({'opacity': 0.99});
if (this.options.showCarouselLabel)
$(this.carouselLabel).set('html', '<span class="number">' + (myself.relatedImage.number + 1) + "/" + this.maxIter + ":</span> " + myself.relatedImage.title);
}.pass(currentImg, this),
'mouseout': function (myself) {
myself.cancel();
myself.start({'opacity': this.options.thumbIdleOpacity});
}.pass(currentImg, this),
'click': function (myself) {
this.goTo(myself.relatedImage.number);
if (this.options.thumbCloseCarousel&&(!this.options.useExternalCarousel))
this.hideCarousel();
}.pass(currentImg, this)
});


currentImg.relatedImage = this.galleryData;
this.thumbnailElements[parseInt(i)] = currentImg;
}
},
log: function(value) {
if(console.log)
console.log(value);
},
preloadThumbnails: function() {
var thumbnails = [];
for(i=0;i<this.galleryData.length;i++)
{
thumbnails[parseInt(i)] = this.galleryData.thumbnail;
}
this.thumbnailPreloader = new Preloader();
if (!this.options.useExternalCarousel)
this.thumbnailPreloader.addEvent('onComplete', function() {
var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
}.bind(this));
this.thumbnailPreloader.load(thumbnails);
},
clearThumbnailsHighlights: function()
{
for(i=0;i<this.galleryData.length;i++)
{
this.thumbnailElements.cancel();
this.thumbnailElements.start(0.2);
}
},
changeThumbnailsSize: function(width, height)
{
for(i=0;i<this.galleryData.length;i++)
{
this.thumbnailElements.cancel();
this.thumbnailElements.element.setStyles({
'width': width + "px",
'height': height + "px"
});
}
},
centerCarouselOn: function(num) {
if (!this.carouselWallMode)
{
var carouselElement = this.thumbnailElements[num];
var position = carouselElement.element.offsetLeft + (carouselElement.element.offsetWidth / 2);
var carouselWidth = this.carouselWrapper.element.offsetWidth;
var carouselInnerWidth = this.carouselInner.offsetWidth;
var diffWidth = carouselWidth / 2;
var scrollPos = position-diffWidth;
this.carouselWrapper.elementScroller.start(scrollPos,0);
}
},
initInfoSlideshow: function() {
/*if (this.slideInfoZone.element)
this.slideInfoZone.element.remove();*/
this.slideInfoZone = new Fx.Morph(new Element('div').addClass('slideInfoZone').injectInside($(this.galleryElement))).set({'opacity':0});
var slideInfoZoneTitle = new Element('h2').injectInside(this.slideInfoZone.element);
var slideInfoZoneDescription = new Element('p').injectInside(this.slideInfoZone.element);
this.slideInfoZone.normalHeight = this.slideInfoZone.element.offsetHeight;
this.slideInfoZone.element.setStyle('opacity',0);
},
changeInfoSlideShow: function()
{
this.hideInfoSlideShow.delay(10, this);
this.showInfoSlideShow.delay(500, this);
},
showInfoSlideShow: function() {
this.fireEvent('onShowInfopane');
this.slideInfoZone.cancel();
element = this.slideInfoZone.element;
element.getElement('h2').set('html', this.galleryData[this.currentIter].title);
element.getElement('p').set('html', this.galleryData[this.currentIter].description);
if(this.options.slideInfoZoneSlide)
this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity], 'height': [0, this.slideInfoZone.normalHeight]});
else
this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity]});
if (this.options.showCarousel)
this.slideInfoZone.chain(this.centerCarouselOn.pass(this.currentIter, this));
return this.slideInfoZone;
},
hideInfoSlideShow: function() {
this.fireEvent('onHideInfopane');
this.slideInfoZone.cancel();
if(this.options.slideInfoZoneSlide)
this.slideInfoZone.start({'opacity': 0, 'height': 0});
else
this.slideInfoZone.start({'opacity': 0});
return this.slideInfoZone;
},
makeLink: function(num) {
this.currentLink.setProperties({
href: this.galleryData[num].link,
title: this.galleryData[num].linkTitle
})
if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
this.currentLink.setStyle('display', 'block');
},
clearLink: function() {
this.currentLink.setProperties({href: '', title: ''});
if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
this.currentLink.setStyle('display', 'none');
},
makeReMooz: function() {
this.currentLink.setProperties({
href: '#'
});
this.currentLink.setStyles({
'display': 'block'
});


this.galleryElements[this.currentIter].element.set('title', this.galleryData[this.currentIter].title + ' :: ' + this.galleryData[this.currentIter].description);
this.ReMooz = new ReMooz(this.galleryElements[this.currentIter].element, {
link: this.galleryData[this.currentIter].link,
shadow: false,
dragging: false,
addClick: false,
resizeOpacity: 1
});
var img = this.galleryElements[this.currentIter];
var coords = img.element.getCoordinates();
delete coords.right;
delete coords.bottom;


widthDiff = coords.width - img.width;
heightDiff = coords.height - img.height;


coords.width = img.width;
coords.height = img.height;


coords.left += Math.ceil(widthDiff/2)+1;
coords.top += Math.ceil(heightDiff/2)+1;


this.ReMooz.getOriginCoordinates = function(coords) {
return coords;
}.bind(this, coords);
this.currentLink.onclick = function () {
this.ReMooz.open.bind(this.ReMooz)();
return false;
}.bind(this);
},
/* To change the gallery data, those two functions : */
flushGallery: function() {
this.galleryElements.each(function(myFx) {
myFx.element.dispose();
myFx = myFx.element = null;
});
this.galleryElements = [];
},
changeData: function(data) {
this.galleryData = data;
this.clearTimer();
this.flushGallery();
if (this.options.showCarousel) this.flushCarousel();
this.constructElements();
if (this.options.showCarousel) this.fillCarousel();
if (this.options.showInfopane) this.hideInfoSlideShow();
this.galleryInit=1;
this.lastIter=0;
this.currentIter=0;
this.doSlideShow(1);
},
/* Plugins: HistoryManager */
initHistory: function() {
this.fireEvent('onHistoryInit');
this.historyKey = this.galleryElement.id + '-picture';
if (this.options.customHistoryKey)
this.historyKey = this.options.customHistoryKey;


this.history = new History.Route({
defaults: [1],
pattern: this.historyKey + '\\((\\d+)\\)',
generate: function(values) {
return [this.historyKey, '(', values[0], ')'].join('')
}.bind(this),
onMatch: function(values, defaults) {
if (parseInt(values[0])-1 < this.maxIter)
this.goTo(parseInt(values[0])-1);
}.bind(this)
});
this.addEvent('onChanged', function(){
this.history.setValue(0, this.currentIter+1);
this.history.defaults=[this.currentIter+1];
}.bind(this));
this.fireEvent('onHistoryInited');
}
};
gallery = new Class(gallery);


gallery.Transitions = new Hash ({
fade: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
if (newPos > oldPos) newFx.start({opacity: 1});
else
{
newFx.set({opacity: 1});
oldFx.start({opacity: 0});
}
},
crossfade: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
newFx.start({opacity: 1});
oldFx.start({opacity: 0});
},
fadebg: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
oldFx.options.duration = newFx.options.duration = this.options.fadeDuration / 2;
oldFx.start({opacity: 0}).chain(newFx.start.pass([{opacity: 1}], newFx));
}
});


/* All code copyright 2007 Jonathan Schemoul */


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Follows: Preloader (class)
* Simple class for preloading images with support for progress reporting
* Copyright 2007 Tomocchino.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


var Preloader = new Class({


Implements: [Events, Options],


options: {
root        : '',
period      : 100
},


initialize: function(options){
this.setOptions(options);
},


load: function(sources) {
this.index = 0;
this.images = [];
this.sources = this.temps = sources;
this.total = this. sources.length;


this.fireEvent('onStart', [this.index, this.total]);
this.timer = this.progress.periodical(this.options.period, this);


this.sources.each(function(source, index){
this.images[index] = new Asset.image(this.options.root + source, {
'onload'  : function(){ this.index++; if(this.images[index]) this.fireEvent('onLoad', [this.images[index], index, source]); }.bind(this),
'onerror' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this),
'onabort' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this)
});
}, this);
},


progress: function() {
this.fireEvent('onProgress', [Math.min(this.index, this.total), this.total]);
if(this.index >= this.total) this.complete();
},


complete: function(){
$clear(this.timer);
this.fireEvent('onComplete', [this.images]);
},


cancel: function(){
$clear(this.timer);
}


});


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Follows: formatString (function)
* Original name: Yahoo.Tools.printf
* Copyright Yahoo.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


function formatString() {
var num = arguments.length;
var oStr = arguments[0];
for (var i = 1; i < num; i++) {
var pattern = "\\{" + (i-1) + "\\}";
var re = new RegExp(pattern, "g");
oStr = oStr.replace(re, arguments);
}
return oStr;
}


//]]>
</script>


<script type='text/javascript'>
//<![CDATA[


/*
This file is part of JonDesign's SmoothGallery v2.1beta1.


JonDesign's SmoothGallery is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.


JonDesign's SmoothGallery is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.


You should have received a copy of the GNU General Public License
along with JonDesign's SmoothGallery; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA


Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)
*/


gallery.Transitions.extend({
fadeslideleft: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.Cubic.easeOut;
oldFx.options.duration = newFx.options.duration = 1500;
if (newPos > oldPos)
{
newFx.start({
left: [this.galleryElement.offsetWidth, 0],
opacity: 1
});
oldFx.start({opacity: [1,0]});
} else {
newFx.start({opacity: [0,1]});
oldFx.start({
left: [0, this.galleryElement.offsetWidth],
opacity: 0
}).chain(function(fx){fx.set({left: 0});}.pass(oldFx));
}
},
continuoushorizontal: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
if (
((newPos > oldPos) || ((newPos==0) && (oldPos == (this.maxIter-1) ))) &&
(!((newPos == (this.maxIter-1 )) && (oldPos == 0)))
) {
oldFx.set({opacity: 1});
oldFx.start({
left: [0, this.galleryElement.offsetWidth * -1]
});
newFx.set({opacity: 1, left: this.galleryElement.offsetWidth});
newFx.start({
left: [this.galleryElement.offsetWidth, 0]
});
} else  {
oldFx.set({opacity: 1});
oldFx.start({
left: [0, this.galleryElement.offsetWidth]
});
newFx.set({opacity: 1, left: this.galleryElement.offsetWidth * -1});
newFx.start({
left: [this.galleryElement.offsetWidth * -1, 0]
});
}
},
continuousvertical: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
if (
((newPos > oldPos) || ((newPos==0) && (oldPos == (this.maxIter-1) ))) &&
(!((newPos == (this.maxIter-1 )) && (oldPos == 0)))
) {
oldFx.set({opacity: 1});
oldFx.start({
top: [0, this.galleryElement.offsetHeight * -1]
});
newFx.set({opacity: 1, top: this.galleryElement.offsetHeight});
newFx.start({
top: [this.galleryElement.offsetHeight, 0]
});
} else  {
oldFx.set({opacity: 1});
oldFx.start({
top: [0, this.galleryElement.offsetHeight]
});
newFx.set({opacity: 1, top: this.galleryElement.offsetHeight * -1});
newFx.start({
top: [this.galleryElement.offsetHeight * -1, 0]
});
}
}
});


//]]>
</script>



<style type='text/css'>
body{background: #1b1b1b url(http://4.bp.blogspot.com/_4HKUHirY_2U/TIb8rmV9krI/AAAAAAAAB7E/5s2dy8t1h7M/s1600/background.png) top left repeat-x;color: #888686;font:75% &quot;Helvetica Neue&quot;,Arial,Helvetica,sans-serif}
a:link,a:visited{color:#fff;}
a:hover{color:#cb0403}
a img{border-width:0}
/* Header-----------------------------------------------*/
#header-wrapper{width:950px;margin:0 auto 0;height:112px;background:url() top right no-repeat}
#header-inner{background-position:center;margin-left:auto;margin-right:auto}
#header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:40%}
#header h1{margin:0 5px 0;padding:1px 0 0 15px;font:bold 48px Arial,Helvetica,Sans-serif}
#header .description{padding-left:20px;color:#666666;}
#header h1 a,#header h1 a:visited{color:#fff;text-decoration:none}
#header h2{padding-left:15px;color:#736f74;font:14px Arial,Helvetica,Sans-serif}
#header2{float:right;width:58%}
#header2 .widget{padding:20px 0px 0 10px;float:right}
/* Outer-Wrapper----------------------------------------------- */
#outer-wrapper{background: url(http://1.bp.blogspot.com/_4HKUHirY_2U/TIb8tVn7PAI/AAAAAAAAB7c/OT-o1PSpZb0/container-bg.jpg) center top no-repeat;width:950px;margin:0 auto;padding:0;text-align:$startSide;font:$bodyfont}
#content-wrapper{background: #050505;}
#main-wrapper{width:610px;padding-left:15px;padding-right:0px;float:left;word-wrap:break-word;/* fix for long text breaking sidebar float in IE */
overflow:hidden;/* fix for long non-text content breaking IE sidebar float */
}
#rsidebar-wrapper{width:305px;float:right;margin-left:5px;margin-right:5px;word-wrap:break-word;/* fix for long text breaking sidebar float in IE */
overflow:hidden;/* fix for long non-text content breaking IE sidebar float */
}
/* Headings----------------------------------------------- */
h2{margin:1.5em 0 .75em;font:$headerfont;line-height:1.4em;text-transform:uppercase;letter-spacing:.2em;color:$sidebarcolor}
/* Posts-----------------------------------------------*/
h2.date-header{margin:1.5em 0 .5em}
.post{background-color: #1b1b1b;padding: 12px 15px 15px 15px;margin: 5px 0 25px 0;border: 1px solid #2e2d2d;}
.post h3{margin:0 0 8px 0;padding:0;color:#d3d3d3;font:bold 22px Arial, Verdana;line-height: 26px;text-transform: uppercase;}
.post h3 a,.post h3 a:visited,.post h3 strong{display:block;text-decoration:none;color:#d3d3d3;font:bold 22px Arial, Verdana;}
.post h3 strong,.post h3 a:hover{color:#ca2111;font:bold 22px Arial, Verdana;text-decoration:underline;}
.post-body{margin:0 0 .75em;text-align:justify;padding-top:8px;font:14px/20px Arial,Verdana}
.post-body blockquote{overflow:hidden;padding-left:9px;font-style:italic;color:#666;border-left:3px solid #CADAE7}
.post-footer{margin:.75em 0;color:$sidebarcolor;text-transform:uppercase;letter-spacing:.1em;font:$postfooterfont;line-height:1.4em}
.comment-link{margin-$startSide:.6em}
.post img{padding:6px 6px 6px 6px;background:#1b1b1b;border:1px solid #2e2d2d;margin:0 4px 4px 0}
.post blockquote{margin:1em 20px}
.post blockquote p{margin:.75em 0}
/* Comments----------------------------------------------- */
#comments h4{margin:1em 0;font-weight:bold;line-height:1.4em;text-transform:uppercase;letter-spacing:.2em;color:$sidebarcolor}
#comments-block{margin:1em 0 1.5em;line-height:1.6em}
#comments-block .comment-author{margin:.5em 0}
#comments-block .comment-body{margin:.25em 0 0}
#comments-block .comment-footer{margin:-.25em 0 2em;line-height:1.4em;text-transform:uppercase;letter-spacing:.1em}
#comments-block .comment-body p{margin:0 0 .75em}
.deleted-comment{font-style:italic;color:gray}
#blog-pager-newer-link{float:$startSide}
#blog-pager-older-link{float:$endSide}
#blog-pager{text-align:center}
.feed-links{clear:both;line-height:2.5em}
/* Sidebar Content----------------------------------------------- */
.sidebar{color:#8e8e8e;line-height:1.5em;margin:0 0 10px 0}
.sidebar a{text-decoration:none;color:#8e8e8e}
.sidebar a:hover{text-decoration:underline;color:#a31f13}
.sidebar h2{margin:10px 0 0 0;padding:5px 0 5px 0;font-size:16px;font-family:Arial,Helvetica,Sans-serif;font-weight:bold;text-transform:uppercase;color:#c40503;}
.sidebar ul{list-style-type:none;margin:0 0 10px 0;padding:0}
.sidebar ul li{padding:6px 0 6px 16px;margin:0;background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/TIb8rfjNUEI/AAAAAAAAB68/7Y-Pgr9ZgrM/arrow.png) left 12px no-repeat;border-bottom:1px solid #1b1b1b}
.sidebar .widget{border-bottom:0 dotted $bordercolor;margin:0 0 0.5em;padding:0 0 0.5em}
.main .widget{border-bottom:0 dotted $bordercolor;margin:0 0 1.5em;padding:0 0 1.5em}
.main .Blog{border-bottom-width:0}
/* Profile ----------------------------------------------- */
.profile-img{float:$startSide;margin-top:0;margin-$endSide:5px;margin-bottom:5px;margin-$startSide:0;padding:4px;border:1px solid $bordercolor}
.profile-data{margin:0;text-transform:uppercase;letter-spacing:.1em;font:$postfooterfont;color:$sidebarcolor;font-weight:bold;line-height:1.6em}
.profile-datablock{margin:.5em 0 .5em}
.profile-textblock{margin:0.5em 0;line-height:1.6em}
.profile-link{font:$postfooterfont;text-transform:uppercase;letter-spacing:.1em}
#myGallery,#myGallerySet,#flickrGallery{width:610px;height:500px;z-index:99;margin-bottom:20px;margin-top:15px}
.jdGallery a{outline:0}
#flickrGallery{width:500px;height:334px}
#myGallery img.thumbnail,#myGallerySet img.thumbnail{display:none}
.jdGallery{overflow:hidden;position:relative}
.jdGallery img{border:0;margin:0}
.jdGallery .slideElement{width:100%;height:100%;background-color:#000;background-repeat:no-repeat;background-position:center center;background-image:url('http://1.bp.blogspot.com/_4HKUHirY_2U/TH5CnyElq7I/AAAAAAAABfc/OIwMCzgM_KA/s1600/loading-bar-black.gif')}
.jdGallery .loadingElement{width:100%;height:100%;position:absolute;left:0;top:0;background-color:#000;background-repeat:no-repeat;background-position:center center;background-image:url('http://1.bp.blogspot.com/_4HKUHirY_2U/TH5CnyElq7I/AAAAAAAABfc/OIwMCzgM_KA/s1600/loading-bar-black.gif')}
.jdGallery .slideInfoZone{position:absolute;z-index:10;width:100%;margin:0;left:0;bottom:0;height:120px;background:#17181e;color:#fff;text-indent:0;overflow:hidden}
* html .jdGallery .slideInfoZone{bottom:-1px}
.jdGallery .slideInfoZone h2{padding:0;margin:0;margin:2px 5px;font-size:14px;font-weight:bold;color:#fff !important}
.jdGallery .slideInfoZone p{padding:0;font-size:12px;margin:2px 5px;color:#eee}
.jdGallery div.carouselContainer{position:absolute;height:135px;width:100%;z-index:10;margin:0;left:0;top:0}
.jdGallery a.carouselBtn{position:absolute;bottom:0;right:30px;height:20px;/*width:100px;background:url('img/carousel_btn.gif') no-repeat;*/
text-align:center;padding:0 10px;font-size:13px;background:#333;color:#fff;cursor:pointer}
.jdGallery .carousel{position:absolute;width:100%;margin:0;left:0;top:0;height:115px;background:#333;color:#fff;text-indent:0;overflow:hidden}
.jdExtCarousel{overflow:hidden;position:relative}
.jdGallery .carousel .carouselWrapper,.jdExtCarousel .carouselWrapper{position:absolute;width:100%;height:78px;top:10px;left:0;overflow:hidden}
.jdGallery .carousel .carouselInner,.jdExtCarousel .carouselInner{position:relative}
.jdGallery .carousel .carouselInner .thumbnail,.jdExtCarousel .carouselInner .thumbnail{cursor:pointer;background:#000;background-position:center center;float:left;border:solid 1px #fff}
.jdGallery .wall .thumbnail,.jdExtCarousel .wall .thumbnail{margin-bottom:10px}
.jdGallery .carousel .label,.jdExtCarousel .label{font-size:13px;position:absolute;bottom:5px;left:10px;padding:0;margin:0}
.jdGallery .carousel .wallButton,.jdExtCarousel .wallButton{font-size:10px;position:absolute;bottom:5px;right:10px;padding:1px 2px;margin:0;background:#222;border:1px solid #888;cursor:pointer}
.jdGallery .carousel .label .number,.jdExtCarousel .label .number{color:#b5b5b5}
.jdGallery a{font-size:100%;text-decoration:none;color:#fff}
.jdGallery a.right,.jdGallery a.left{position:absolute;height:99%;width:25%;cursor:pointer;z-index:10;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity:0.2;opacity:0.2}
* html .jdGallery a.right,* html .jdGallery a.left{filter:alpha(opacity=50)}
.jdGallery a.right:hover,.jdGallery a.left:hover{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8}
.jdGallery a.left{left:0;top:0;background:url('http://4.bp.blogspot.com/_4HKUHirY_2U/TH5CmeY6JVI/AAAAAAAABfE/V6WLzU3rtfM/s1600/fleche1.png') no-repeat center left}
* html .jdGallery a.left{background:url('http://4.bp.blogspot.com/_4HKUHirY_2U/TH5CaC77BiI/AAAAAAAABe8/B4FUXMSMRKE/s1600/fleche1.gif') no-repeat center left}
.jdGallery a.right{right:0;top:0;background:url('http://3.bp.blogspot.com/_4HKUHirY_2U/TH5CnZ9VneI/AAAAAAAABfU/Z3F7W_3RJlA/s1600/fleche2.png') no-repeat center right}
* html .jdGallery a.right{background:url('http://1.bp.blogspot.com/_4HKUHirY_2U/TH5Cm_O50lI/AAAAAAAABfM/8hTr1hCxF8c/s1600/fleche2.gif') no-repeat center right}
.jdGallery a.open{left:0;top:0;width:100%;height:100%}
.withArrows a.open{position:absolute;top:0;left:25%;height:99%;width:50%;cursor:pointer;z-index:10;background:none;-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8}
.withArrows a.open:hover{background:url('http://2.bp.blogspot.com/_4HKUHirY_2U/TH5CzYqk8PI/AAAAAAAABfs/1PGw_tK8g08/s1600/open.png') no-repeat center center}
* html .withArrows a.open:hover{background:url('http://1.bp.blogspot.com/_4HKUHirY_2U/TH5Cou-6ZYI/AAAAAAAABfk/Dda7FQKrEW4/s1600/open.gif') no-repeat center center;filter:alpha(opacity=80)}
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn{z-index:15;position:absolute;top:0;left:30px;height:20px;/*width:100px;background:url('img/carousel_btn.gif') no-repeat;*/
text-align:center;padding:0 10px;font-size:13px;background:#333;color:#fff;cursor:pointer;opacity:.4;-moz-opacity:.4;-khtml-opacity:0.4;filter:alpha(opacity=40)}
.jdGallery .gallerySelector{z-index:20;width:100%;height:100%;position:absolute;top:0;left:0;background:#000}
.jdGallery .gallerySelector h2{margin:0;padding:10px 20px 10px 20px;font-size:20px;line-height:30px;color:#fff !important}
.jdGallery .gallerySelector .gallerySelectorWrapper{overflow:hidden}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton{margin-left:10px;margin-top:10px;border:1px solid #888;padding:5px;height:40px;color:#fff;cursor:pointer;float:left}
.jdGallery .gallerySelector .gallerySelectorInner div.hover{background:#333}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview{background:#000;background-position:center center;float:left;border:none;width:40px;height:40px;margin-right:5px}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{margin:0;padding:0;font-size:12px;font-weight:normal;color:#fff}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info{margin:0;padding:0;font-size:12px;font-weight:normal;color:#fff !important}
#navbar-iframe{height:0;visibility:hidden;display:none}
#pagemenucontainer{height:34px;margin-top:10px;float:left;background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9CVVM7KI/AAAAAAAAB8U/9hFEOkEmuRA/pagenav-bg.png) left top repeat-x}
#pagemenu{height:34px;float:right}
#pagemenu,#pagemenu ul{padding:0;margin:0;list-style:none;line-height:1}
#pagemenu{margin-bottom:1px}
#pagemenu ul{float:left;list-style:none;margin:0 0 0 0;padding:0}
#pagemenu li{float:left;list-style:none;margin:0;padding:0}
#pagemenu ul li{list-style:none;margin:0;padding:0}
#pagemenu li a,#pagemenu li a:link{color:#7b7b7a;display:block;margin:0 3px 0 3px;padding:10px 14px;text-decoration:none;text-transform:uppercase;font:bold 11px Arial,Helvetica,sans-serif}
#pagemenu li a:hover,#pagemenu li a:active{color:#fff;display:block;text-decoration:none}
#pagemenu li.current_page_item a{color:#fff}
#pagemenu li:hover,#pagemenu li.sfhover{position:static}
.navcontainer{height:36px;background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/TIBWT96I7YI/AAAAAAAABjE/Il3hTbPpeu0/nav-background.png) top left repeat-x;padding:0 10px;border-bottom:1px solid #303030}
#nav{height:36px}
#nav,#nav ul{padding:0;margin:0;list-style:none;line-height:1}
#nav{margin-bottom:1px}
#nav ul{float:left;list-style:none;margin:0 0 0 0;padding:0}
#nav li{float:left;list-style:none;margin:0;padding:0}
#nav ul li{list-style:none;margin:0;padding:0}
#nav li a,#nav li a:link{color:#fff;display:block;margin:0 3px 0 3px;padding:12px 15px;text-decoration:none;font-size:12px;font-weight:bold;text-transform:uppercase;text-shadow:0 1px 0 #1e1d1d}
#nav li a:hover,#nav li a:active{color:#fff;display:block;text-decoration:none;background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/TIBWULTYxPI/AAAAAAAABjM/tG7vzAepxic/nav-background-hover.png) top left repeat-x;text-shadow:0 1px 0 #242323}
#nav li.current-cat a{color:#fff;background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/TIBWULTYxPI/AAAAAAAABjM/tG7vzAepxic/nav-background-hover.png) top left repeat-x;text-shadow:0 1px 0 #242323}
#nav li:hover,#nav li.sfhover{position:static}
.postdate{padding:2px 0;font:11px Arial,Verdana;color:#5b5b5b}
.postdate img,.postmeta img{border:none;vertical-align:middle;margin:2px;background:none;padding:0 6px 0 0}
/* FOOTER */
#footer{background:#101010;padding:22px;text-align:center;color:#9d9999;font-size:13px;border-top:4px solid #b80704}
#footer a{color:#9d9999}
#footer a:hover{text-decoration:none;color:#9d9999}
/* -- NUMBER PAGE NAVIGATION -- */
.showpageNum a{font:15px Arial,Verdana;padding:4px 8px;margin:0 4px;text-decoration:none;background:#050505;color:#ffffff;border:1px solid #050505}
.showpageOf{margin:0 8px 0 0;color:#222;font:15px Arial,Verdana}
.showpageNum a:hover{color:#fff;background:#303030;border:1px solid #303030}
.showpageArea{margin:10px 0;font:15px Arial,Verdana;color:#111}
.showpagePoint{color:#fff;font:bold 15px Arial,Verdana;padding:4px 8px;margin:2px;border:1px solid #b80704;background:#b80704;text-decoration:none}
.showpage{padding:4px 8px;margin:0 4px;text-decoration:none;background:#050505;color:#ffffff;border:1px solid #050505;font:15px Arial,Verdana}
.showpage a{text-decoration:none;color:#ffffff;font:15px Arial,Verdana}
.showpage:hover{padding:4px 8px;margin:0 4px;text-decoration:none;background:#303030;color:#fff;border:1px solid #303030;font:15px Arial,Verdana}
.showpage a:hover{text-decoration:none;color:#fff;font:15px Arial,Verdana}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
#comment-form iframe{padding:5px;width:500px}
#search{border:1px solid #302f2f;height:26px;padding:2px;background:#1d1c1c;text-align:right}
#search input{border:0;background:none;color:#5b5b5a}
#s{width:257px;padding:3px;margin:2px 0 0 0;background:none}
#topsearch{margin-top:8px}
div.span-1,div.span-2,div.span-3,div.span-4,div.span-5,div.span-6,div.span-7,div.span-8,div.span-9,div.span-10,div.span-11,div.span-12,div.span-13,div.span-14,div.span-15,div.span-16,div.span-17,div.span-18,div.span-19,div.span-20,div.span-21,div.span-22,div.span-23,div.span-24{float:left;margin-right:10px}
.span-1{width:30px}.span-2{width:70px}.span-3{width:110px}.span-4{width:150px}.span-5{width:190px}.span-6{width:230px}.span-7{width:270px}.span-8{width:310px}.span-9{width:350px}.span-10{width:390px}.span-11{width:430px}.span-12{width:470px}.span-13{width:510px}.span-14{width:550px}.span-15{width:590px}.span-16{width:630px}.span-17{width:670px}.span-18{width:710px}.span-19{width:750px}.span-20{width:790px}.span-21{width:830px}.span-22{width:870px}.span-23{width:910px}.span-24,div.span-24{width:950px;margin:0}input.span-1,textarea.span-1,input.span-2,textarea.span-2,input.span-3,textarea.span-3,input.span-4,textarea.span-4,input.span-5,textarea.span-5,input.span-6,textarea.span-6,input.span-7,textarea.span-7,input.span-8,textarea.span-8,input.span-9,textarea.span-9,input.span-10,textarea.span-10,input.span-11,textarea.span-11,input.span-12,textarea.span-12,input.span-13,textarea.span-13,input.span-14,textarea.span-14,input.span-15,textarea.span-15,input.span-16,textarea.span-16,input.span-17,textarea.span-17,input.span-18,textarea.span-18,input.span-19,textarea.span-19,input.span-20,textarea.span-20,input.span-21,textarea.span-21,input.span-22,textarea.span-22,input.span-23,textarea.span-23,input.span-24,textarea.span-24{border-left-width:1px!important;border-right-width:1px!important;padding-left:5px!important;padding-right:5px!important}input.span-1,textarea.span-1{width:18px!important}input.span-2,textarea.span-2{width:58px!important}input.span-3,textarea.span-3{width:98px!important}input.span-4,textarea.span-4{width:138px!important}input.span-5,textarea.span-5{width:178px!important}input.span-6,textarea.span-6{width:218px!important}input.span-7,textarea.span-7{width:258px!important}input.span-8,textarea.span-8{width:298px!important}input.span-9,textarea.span-9{width:338px!important}input.span-10,textarea.span-10{width:378px!important}input.span-11,textarea.span-11{width:418px!important}input.span-12,textarea.span-12{width:458px!important}input.span-13,textarea.span-13{width:498px!important}input.span-14,textarea.span-14{width:538px!important}input.span-15,textarea.span-15{width:578px!important}input.span-16,textarea.span-16{width:618px!important}input.span-17,textarea.span-17{width:658px!important}input.span-18,textarea.span-18{width:698px!important}input.span-19,textarea.span-19{width:738px!important}input.span-20,textarea.span-20{width:778px!important}input.span-21,textarea.span-21{width:818px!important}input.span-22,textarea.span-22{width:858px!important}input.span-23,textarea.span-23{width:898px!important}input.span-24,textarea.span-24{width:938px!important}.last{margin-right:0;padding-right:0}
.last,div.last{margin-right:0}
.readmorecontent{text-align:right;width:140px;float:right;margin-top:10px;}
.readmorecontent a{padding:4px 5px; background:#3b3b3b; color:#fff; text-decoration:none; font-size:12px;}
.readmorecontent a:hover{background-color:#b80704; color:#fff;text-decoration:none;}
.topright{text-align:right;margin:14px 0 0 0}
</style>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){


$(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav


$(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...


//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(&quot;ul.subnav&quot;).slideDown('fast').show(); //Drop down the subnav on click


$(this).parent().hover(function() {
}, function(){
$(this).parent().find(&quot;ul.subnav&quot;).slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});


//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;
}, function(){ //On Hover Out
$(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;
});


});
</script>
<style type='text/css'>
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 1.2em;
background: url(http://1.bp.blogspot.com/_4HKUHirY_2U/SuvG9uqdygI/AAAAAAAAAGg/RGkds76x-Ks/topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(http://2.bp.blogspot.com/_4HKUHirY_2U/SuvHEn2GZ9I/AAAAAAAAAGo/s4ncczdnOd0/topnav_ho ver.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(http://2.bp.blogspot.com/_4HKUHirY_2U/SuvHKqBeOXI/AAAAAAAAAGw/qGYlY4ckLWc/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(http://3.bp.blogspot.com/_4HKUHirY_2U/SuvHPYoc82I/AAAAAAAAAG4/3DDzBwklYpw/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(http://3.bp.blogspot.com/_4HKUHirY_2U/SuvHPYoc82I/AAAAAAAAAG4/3DDzBwklYpw/dropdown_linkbg.gif) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}
</style>
</head>


<body>
<div id='outer-wrapper'><div id='wrap2'>


<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>



<div class='span-20'>
<div id='pagemenucontainer'>
<ul id='pagemenu'>
<li class='current_page_item'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li>
<li><a href='#' title='Edit this link'>Edit</a></li>
</ul>
</div>
</div>


<div class='span-4 last'>
<div class='topright'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'><img src='http://3.bp.blogspot.com/_4HKUHirY_2U/TIb9C34vnxI/AAAAAAAAB8c/KYlQHWZKs_Q/rss.png' style='margin:0 2px 0 0; vertical-align:top;'/></a>
<a href='http://twitter.com/USERNAME' title='Follow me on Twitter!'><img src='http://3.bp.blogspot.com/_4HKUHirY_2U/TIb9LXndq0I/AAAAAAAAB80/GO87qA9cTM8/twitter.png' style='margin:0 2px 0 0; vertical-align:top;' title='Follow me on Twitter!'/></a> </div>
</div>
<div style='clear:both;'/>


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='10' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='testing12345 (Header)' type='Header'>
<b:includable id='title'>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='main'>


<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == &quot;REPLACE&quot;'>
<!--Show just the image, no text-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                      + &quot;background-position: &quot;                      + data:backgroundPositionStyleStr + &quot;; &quot;                      + data:widthStyleStr                      + &quot;min-height: &quot; + data:height + &quot;px;&quot;                      + &quot;_height: &quot; + data:height + &quot;px;&quot;                      + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>


<b:section class='header' id='header2' maxwidgets='10' showaddelement='yes'>
<b:widget id='HTML46' locked='true' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>


<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
<div style='clear:both;'/>


</div>


<div style='clear:both;'/>


<div class='navcontainer'>
<ul id='nav'>
<li class='current-cat'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li>
<li><a href='#' title='Edit this link'>Edit</a></li>
</ul>
</div>
<div style='clear:both;'/>


<div id='content-wrapper'>


<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>


</b:includable>
</b:widget>
</b:section>
</div>


<div id='main-wrapper'>


<!-- Featured Content Slider Started -->


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>


<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
delay: 6000,
slideInfoZoneOpacity: 0.8,
showCarousel: false,
slideInfoZoneSlide: false
});
}
window.addEvent('domready', startGallery);
</script>


<div class='fullbox_excerpt'>
<div class='fullbox_content'>
<div class='smooth_gallery'>
<div id='myGallery'>


<div class='imageElement'>
<h3>This is featured post 1 title</h3>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.</p>
<a class='open' href='SLIDER-1-URL-HERE' title='This is featured post 1'/>
<img alt='' class='full' src='http://3.bp.blogspot.com/_4HKUHirY_2U/TIb9f-9HIcI/AAAAAAAAB98/RTz1q2-AscU/s1600/1.jpg'/>
</div>


<div class='imageElement'>
<h3>This is featured post 2 title</h3>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.</p>
<a class='open' href='SLIDER-2-URL-HERE' title='This is featured post 2'/>
<img alt='' class='full' src='http://3.bp.blogspot.com/_4HKUHirY_2U/TIb9xY0BOwI/AAAAAAAAB-E/7R9TcrB0vW0/s1600/2.jpg'/>
</div>
<div class='imageElement'>
<h3>This is featured post 3 title</h3>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.</p>
<a class='open' href='SLIDER-3-URL-HERE' title='This is featured post 3'/>
<img alt='' class='full' src='http://1.bp.blogspot.com/_4HKUHirY_2U/TIb9xxVRhUI/AAAAAAAAB-M/YzMyW6B9kXI/s1600/3.jpg'/>
</div>


<div class='imageElement'>
<h3>This is featured post 4 title</h3>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.</p>
<a class='open' href='SLIDER-4-URL-HERE' title='This is featured post 4'/>
<img alt='' class='full' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9yzcGFjI/AAAAAAAAB-U/Epk48KJgFkM/s1600/4.jpg'/>
</div>


<div class='imageElement'>
<h3>This is featured post 5 title</h3>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.</p>
<a class='open' href='SLIDER-5-URL-HERE' title='This is featured post 5'/>
<img alt='' class='full' src='http://4.bp.blogspot.com/_4HKUHirY_2U/TIb9zbZSIdI/AAAAAAAAB-c/4R9GvBrN6FA/s1600/5.jpg'/>
</div>


</div></div></div></div></b:if></b:if>


<!-- Featured Content Slider End -->


<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>


<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>


<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>


</div>
<div class='clear'/>
</b:includable>
<b:includable id='shareButtons' var='post'>
<b:if cond='data:post.sharePostUrl'>
<a class='share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.emailThisMsg/></span></a>
<a class='share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.blogThisMsg/></span></a>
<a class='share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a>
<a class='share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>
<a class='share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>
</b:if>
</b:includable>
<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>
<dd class='comment-body collapseable'>
<data:backlink.snippet/>
</dd>
<dd class='comment-footer collapseable'>
<span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
<span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
</dd>
</div>
</b:loop>
</dl>
</b:if>
<p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + &quot;_backlinks-create-link&quot;' target='_blank'><data:post.createLinkLabel/></a>
</p>
</b:includable>
<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<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>


<div class='post-header-line-1'/>


<div class='postdate' style='width:100%;margin-bottom:-15px;'>
<img src='http://4.bp.blogspot.com/_4HKUHirY_2U/TIBWIk5TsUI/AAAAAAAABic/zPYi-iuOLTg/date.png'/> <data:post.timestamp/>  <img src='http://3.bp.blogspot.com/_4HKUHirY_2U/TIBWhW5_9ZI/AAAAAAAABkE/ozQci0lBi6Y/user.png'/>   <data:post.author/>
</div>


<div class='post-body entry-content'>



<p><script type='text/javascript'>
summary_noimg = 800;
summary_img = 650;
img_thumb_height = 195;
img_thumb_width = 260;
</script>
<script type='text/javascript'>
//<![CDATA[


function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s.indexOf(">")!=-1){
s = s.substring(s.indexOf(">")+1,s.length);
}
}
strx =  s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}


function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}


var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div class='readmorecontent'><a expr:href='data:post.url'>Read more »</a></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if></p>


<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>


<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/></div>
</div>
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='comment-form' var='post'>
<div id='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='500'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
<span expr:class='&quot;item-control &quot; + data:backlink.adminClass'>
<a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
<img src='http://www.blogger.com/img/icon_delete13.gif'/>
</a>
</span>
</b:includable>
<b:includable id='mobile-nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<div class='mobile-link-button' id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</div>
</b:if>


<b:if cond='data:olderPageUrl'>
<div class='mobile-link-button' id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</div>
</b:if>


<div class='mobile-link-button' id='blog-pager-home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</div>


<div class='mobile-desktop-link'>
<a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
</div>


</div>
<div class='clear'/>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<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.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<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:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>
<data:adEnd/>
</div>


<!-- navigation -->
<b:include name='nextprev'/>


<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
<a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
<img src='http://www.blogger.com/img/icon_delete13.gif'/>
</a>
</span>
</b:includable>
<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != &quot;item&quot;'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>


<b:else/> <!--Post feed links -->
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='mobile-index-post' var='post'>
<b:if cond='data:post.dateHeader'>
<div class='mobile-index-date'>
<div class='date-header'>
<span><data:post.dateHeader/></span>
</div>
</div>
</b:if>


<div class='mobile-post-outer'>
<div class='mobile-index-title-outer'>
<h3 class='mobile-index-title entry-title'>
<a href='javascript:void(0)'><data:post.title/></a>
</h3>
</div>


<div>
<div class='mobile-index-arrow'>
<a href='javascript:void(0)'>&amp;rsaquo;</a>
</div>


<div class='mobile-post-contents'>
<b:if cond='data:post.thumbnailUrl'>
<div class='mobile-index-thumbnail'>
<div class='Image'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</div>
</b:if>


<div class='post-body'>
<b:if cond='data:post.snippet'><data:post.snippet/></b:if>
</div>
</div>
<div style='clear: both;'/>
</div>


<div class='mobile-index-comment'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments != 0'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</b:if>
</div>
</div>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>


<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>


<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>


<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>


<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:po

The blog has its own set of styles that are affecting the drop down menu.

Regards, Arkinder

I think it should be said affecting the content slider...The drop down menu work perfectly.

Yes, that's what I meant. Also, please remember to use code tags when posting code.

Regards, Arkinder

Sigh,this will be like the 4th forum I have been asking for help...

So the content slider works when the drop down menu isn't there?

Regards, Arkinder

Alright, it looks like JavaScript is used to position the slider. Adding the drop-down menu is throwing off the height which is why it isn't working. There's probably just a portion of the JavaScript that needs to be tweaked to make this work, but JavaScript is not my forte. You could try asking in the JavaScript forum.

To make the slider extend all the way down the page, even though it's not sliding. Find this CSS rule in your code:

#myGallery,#myGallerySet,#flickrGallery{width:610px;height:500px;z-index:99;margin-bottom:20px;margin-top:15px}

and remove height: 500px; Regards, Arkinder

Alright done it.The slider is no longer mereged with the posting area but slider is not present.However,like you said,it might be javascript error.I will sought help from members who is good with java.Thanks for your help :)

No problem, and just to clarify. Java is not JavaScript. They are two different languages. You need JavaScript.

Regards, Arkinder