Make your dream to be programer is happen

Cara Membuat Sudoku Slover Dengan Javascript




Cara Membuat Sudoku Slover Dengan Javascript - Sudoku atau biasa juga di sebut Number Place atau Nanpure adalah teka - teki angka yang
mengharuskan anda mengisikan angka dari 1 s/d 9 pada satu area 9 ( sembilan ) buah tabel ukuran 3 x 3 dengan syarat dalam satu baris, kolom dan kotak kelompok 3 x 3 nya tidak boleh ada pengulangan angka.

Sebenarnya permainan ini cukup mudah jika anda teliti, tapi susah juga sih sebenernya bkakakaka. karena setiap kita mengisi angka kita harus memperhatikan setiap baris, setiap kolom dan setiap angka di anggota kelompoknya apakah ada yang sama atau tidak. Jika salah langkah bahkan mungkin tidak ketemu jawabannya.


Nah untuk mempermudahnya kita bisa menggunakan sudoku slover ( Bkakakaka curang ) dengan sudoku slover ini kita bisa dengan mudah menyelesaikan soal sudoku karena slover ini akan membantu anda mengecek kesalahan serta memberi sugesti angka apa yang harus di masukan.

Sebenarnya ada bermacam - macam slover tapi kali ini kita akan membuat sudoku slover dengan menggunakan HTML dan Javascript. Untuk lebih jelasnya langsung saja mencur ke pembuatan programnya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

CSS

Pertama buatlah sebuah folder terlebih dahulu dengan nama sudoku, kemudian buatlah sebuah file CSS baru dengan nama style.css di dalam folder sudoku.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

body {
line-height: 1;
color: black;
background: white;
}

ol, ul {
list-style: none;
}

table {
border-collapse: separate;
border-spacing: 0;
vertical-align: middle;
}

caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}

q, blockquote {
quotes: "" "";
}

q:before, q:after, blockquote:before, blockquote:after {
content: "";
}

a img {
border: none;
}

body {
font-family: georgia, serif;
width: 760px;
margin: 30px auto 50px;
color: #777;
letter-spacing: -0.05em;
font-size: 20px;
text-align:center;
background: #eee;
}

a, a:visited {
color: #777;
}

strong {
font-weight: bold;
}

p {
margin: 1em 0 1.5em;
text-indent: 0.5em;
line-height: 1.4em;
}

h2 {
font-size: 1.5em;
letter-spacing: -0.06em;
}

pre {
font-family: monaco, courier, monospace;
}

.controls, .warning, .short-link, .social {
text-align: center;
}

.note {
color: #aaa;
font-size: 75%;
}

.short-link {
font-size: 2em;
margin-top: 0;
text-align:center;
}

object {
margin-bottom: 1.5em;
}

#sudoku_wrapper {
width: 500px;
margin: 20px auto;
color: #000;
text-align: center;
font-family: helvetica, arial, sans-serif;
}

#sudoku {
color: #aaa;
margin: 0 auto;
text-align: center;
}

#sudoku caption {
color: #000;
margin-left: 25px;
font-size: 80%;
font-family: georgia;
text-align: center;
}

#sudoku, #sudoku tr td,
table.block, table.horizontal-labels,
table.vertical-labels {
border-collapse: collapse;
margin:0;
padding:0;
text-align: center;
}

table.horizontal-labels {
margin-left: 2px;
}

table.block {
border-color: #000;
border-style: solid;
border-width: 0px;
font-weight: bold;
font-size: 22pt;
}

table.block td {
font-weight: bold;
background: white;
}

#b11, #b12, #b13 {
border-top-width: 4px;
}

table.block{
border-right-width: 4px;
border-bottom-width: 4px;
}

#b11, #b21, #b31 {
border-left-width: 4px;
}

table.horizontal-labels tr td,
table.vertical-labels tr td{
font-size: 10pt;
}

table.horizontal-labels tr td {
width:50px;
height:25px;
}

table.vertical-labels tr td {
width:25px;
height:50px;
}

table.block tr td{
border: 1px solid #000;
height: 50px;
width: 50px;
cursor: pointer;
}

table.block tr td.user-defined {
color: #000;
}

table.block tr td.selected {
background-color: #cecece !important;
}

table.block tr td pre{
font-weight: normal;
font-size: 40%;
background-color: transparent;
border: none;
padding: 0;
margin: 0;
}

table.block tr td.error{
color: #f00;
background-color: #ffefef;
}

#completion {
border:4px solid #000;
border-top: none;
height: 10px;
width: 466px;
margin: 0 0 0 25px;
padding: 0;
}

#bar {
margin: 0;
padding: 0;
height: 100%;
width: 0;
background-color: transparent;
-webkit-transition-property: width, background-color;
-webkit-transition-duration: 500ms;
-webkit-transition-timing-function: ease-in-out;

-moz-transition-property: width, background-color;
-moz-transition-duration: 500ms;
-moz-transition-timing-function: ease-in-out;

-o-transition-property: width, background-color;
-o-transition-duration: 500ms;
-o-transition-timing-function: ease-in-out;
}

#output-wrapper {
display: none;
height: 200px;
width: 466px;
border:1px solid #eee;
margin: 0 0 0 25px;
padding: 0;
overflow: auto;
}

#output {
border: none;
background-color: transparent;
margin: 0;
padding: 0;
text-align:left;
}

HTML

Buatlah sebuah file HTML di dalam folder sudoku dengan nama index.html dengan isi script :

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Sudoku Slover Dengan Javascript | Jin Toples Programming</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="wrap">
<h1>Jin Toples Programming</h1>
<h1>Sudoku Slover Dengan Javascript</h1>
<div id="sudoku_wrapper">
<table id="sudoku">
<caption>
<strong>Use arrow and number keys to enter a sudoku</strong><br/>
(d for demo, c to clear, backspace to delete)
</caption>
<tr>
<td>
<table>
<tr><td>&nbsp;</td></tr>
</table>
</td>
<td>
<table class="horizontal-labels">
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</td>
<td>
<table class="horizontal-labels">
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
</td>
<td>
<table class="horizontal-labels">
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="vertical-labels">
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
</table>
</td>
<td>
<table class="block" id="b11">
<tr><td id="c11"></td><td id="c12"></td><td id="c13"></td></tr>
<tr><td id="c21"></td><td id="c22"></td><td id="c23"></td></tr>
<tr><td id="c31"></td><td id="c32"></td><td id="c33"></td></tr>
</table>
</td>
<td>
<table class="block" id="b12">
<tr><td id="c14"></td><td id="c15"></td><td id="c16"></td></tr>
<tr><td id="c24"></td><td id="c25"></td><td id="c26"></td></tr>
<tr><td id="c34"></td><td id="c35"></td><td id="c36"></td></tr>
</table>
</td>
<td>
<table class="block" id="b13">
<tr><td id="c17"></td><td id="c18"></td><td id="c19"></td></tr>
<tr><td id="c27"></td><td id="c28"></td><td id="c29"></td></tr>
<tr><td id="c37"></td><td id="c38"></td><td id="c39"></td></tr>
</table>
</td>
</tr>

<tr>
<td>
<table class="vertical-labels">
<tr><td>D</td></tr>
<tr><td>E</td></tr>
<tr><td>F</td></tr>
</table>
</td>
<td>
<table class="block" id="b21">
<tr><td id="c41"></td><td id="c42"></td><td id="c43"></td></tr>
<tr><td id="c51"></td><td id="c52"></td><td id="c53"></td></tr>
<tr><td id="c61"></td><td id="c62"></td><td id="c63"></td></tr>
</table>
</td>
<td>
<table class="block" id="b22">
<tr><td id="c44"></td><td id="c45"></td><td id="c46"></td></tr>
<tr><td id="c54"></td><td id="c55"></td><td id="c56"></td></tr>
<tr><td id="c64"></td><td id="c65"></td><td id="c66"></td></tr>
</table>
</td>
<td>
<table class="block" id="b23">
<tr><td id="c47"></td><td id="c48"></td><td id="c49"></td></tr>
<tr><td id="c57"></td><td id="c58"></td><td id="c59"></td></tr>
<tr><td id="c67"></td><td id="c68"></td><td id="c69"></td></tr>
</table>
</td>
</tr>

<tr>
<td>
<table class="vertical-labels">
<tr><td>G</td></tr>
<tr><td>H</td></tr>
<tr><td>I</td></tr>
</table>
</td>
<td>
<table class="block" id="b31">
<tr><td id="c71"></td><td id="c72"></td><td id="c73"></td></tr>
<tr><td id="c81"></td><td id="c82"></td><td id="c83"></td></tr>
<tr><td id="c91"></td><td id="c92"></td><td id="c93"></td></tr>
</table>
</td>
<td>
<table class="block" id="b32">
<tr><td id="c74"></td><td id="c75"></td><td id="c76"></td></tr>
<tr><td id="c84"></td><td id="c85"></td><td id="c86"></td></tr>
<tr><td id="c94"></td><td id="c95"></td><td id="c96"></td></tr>
</table>
</td>
<td>
<table class="block" id="b33">
<tr><td id="c77"></td><td id="c78"></td><td id="c79"></td></tr>
<tr><td id="c87"></td><td id="c88"></td><td id="c89"></td></tr>
<tr><td id="c97"></td><td id="c98"></td><td id="c99"></td></tr>
</table>
</td>
</tr>

</table>
<div id="completion">
<div id="bar">&nbsp;</div>
</div>
<div id="output-wrapper">
<pre id="output"></pre>
</div>
</div>
<p class='copy'>Copyright &copy <a href="http://www.jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
</div>
</body>
</html>

Javascript

Terkhir buatlah sebuah file javascript di dalam folder sudoku dengan nama script.js script inilah yang nantinya akan memeriksa inputan anda kemudian memberika sugesti angka yang tepat serta mengecek error yang ada.

//MooTools, <http://mootools.net>, My Object Oriented (JavaScript) Tools. Copyright (c) 2006-2009 Valerio Proietti, <http://mad4milk.net>, MIT Style License.

var MooTools={version:"1.2.4",build:"0d9113241a90b9cd5643b926795852a2026710d4"};var Native=function(k){k=k||{};var a=k.name;var i=k.legacy;var b=k.protect;
var c=k.implement;var h=k.generics;var f=k.initialize;var g=k.afterImplement||function(){};var d=f||i;h=h!==false;d.constructor=Native;d.$family={name:"native"};
if(i&&f){d.prototype=i.prototype;}d.prototype.constructor=d;if(a){var e=a.toLowerCase();d.prototype.$family={name:e};Native.typize(d,e);}var j=function(n,l,o,m){if(!b||m||!n.prototype[l]){n.prototype[l]=o;
}if(h){Native.genericize(n,l,b);}g.call(n,l,o);return n;};d.alias=function(n,l,p){if(typeof n=="string"){var o=this.prototype[n];if((n=o)){return j(this,l,n,p);
}}for(var m in n){this.alias(m,n[m],l);}return this;};d.implement=function(m,l,o){if(typeof m=="string"){return j(this,m,l,o);}for(var n in m){j(this,n,m[n],l);
}return this;};if(c){d.implement(c);}return d;};Native.genericize=function(b,c,a){if((!a||!b[c])&&typeof b.prototype[c]=="function"){b[c]=function(){var d=Array.prototype.slice.call(arguments);
return b.prototype[c].apply(d.shift(),d);};}};Native.implement=function(d,c){for(var b=0,a=d.length;b<a;b++){d[b].implement(c);}};Native.typize=function(a,b){if(!a.type){a.type=function(c){return($type(c)===b);
};}};(function(){var a={Array:Array,Date:Date,Function:Function,Number:Number,RegExp:RegExp,String:String};for(var h in a){new Native({name:h,initialize:a[h],protect:true});
}var d={"boolean":Boolean,"native":Native,object:Object};for(var c in d){Native.typize(d[c],c);}var f={Array:["concat","indexOf","join","lastIndexOf","pop","push","reverse","shift","slice","sort","splice","toString","unshift","valueOf"],String:["charAt","charCodeAt","concat","indexOf","lastIndexOf","match","replace","search","slice","split","substr","substring","toLowerCase","toUpperCase","valueOf"]};
for(var e in f){for(var b=f[e].length;b--;){Native.genericize(a[e],f[e][b],true);}}})();var Hash=new Native({name:"Hash",initialize:function(a){if($type(a)=="hash"){a=$unlink(a.getClean());
}for(var b in a){this[b]=a[b];}return this;}});Hash.implement({forEach:function(b,c){for(var a in this){if(this.hasOwnProperty(a)){b.call(c,this[a],a,this);
}}},getClean:function(){var b={};for(var a in this){if(this.hasOwnProperty(a)){b[a]=this[a];}}return b;},getLength:function(){var b=0;for(var a in this){if(this.hasOwnProperty(a)){b++;
}}return b;}});Hash.alias("forEach","each");Array.implement({forEach:function(c,d){for(var b=0,a=this.length;b<a;b++){c.call(d,this[b],b,this);}}});Array.alias("forEach","each");
function $A(b){if(b.item){var a=b.length,c=new Array(a);while(a--){c[a]=b[a];}return c;}return Array.prototype.slice.call(b);}function $arguments(a){return function(){return arguments[a];
};}function $chk(a){return !!(a||a===0);}function $clear(a){clearTimeout(a);clearInterval(a);return null;}function $defined(a){return(a!=undefined);}function $each(c,b,d){var a=$type(c);
((a=="arguments"||a=="collection"||a=="array")?Array:Hash).each(c,b,d);}function $empty(){}function $extend(c,a){for(var b in (a||{})){c[b]=a[b];}return c;
}function $H(a){return new Hash(a);}function $lambda(a){return($type(a)=="function")?a:function(){return a;};}function $merge(){var a=Array.slice(arguments);
a.unshift({});return $mixin.apply(null,a);}function $mixin(e){for(var d=1,a=arguments.length;d<a;d++){var b=arguments[d];if($type(b)!="object"){continue;
}for(var c in b){var g=b[c],f=e[c];e[c]=(f&&$type(g)=="object"&&$type(f)=="object")?$mixin(f,g):$unlink(g);}}return e;}function $pick(){for(var b=0,a=arguments.length;
b<a;b++){if(arguments[b]!=undefined){return arguments[b];}}return null;}function $random(b,a){return Math.floor(Math.random()*(a-b+1)+b);}function $splat(b){var a=$type(b);
return(a)?((a!="array"&&a!="arguments")?[b]:b):[];}var $time=Date.now||function(){return +new Date;};function $try(){for(var b=0,a=arguments.length;b<a;
b++){try{return arguments[b]();}catch(c){}}return null;}function $type(a){if(a==undefined){return false;}if(a.$family){return(a.$family.name=="number"&&!isFinite(a))?false:a.$family.name;
}if(a.nodeName){switch(a.nodeType){case 1:return"element";case 3:return(/\S/).test(a.nodeValue)?"textnode":"whitespace";}}else{if(typeof a.length=="number"){if(a.callee){return"arguments";
}else{if(a.item){return"collection";}}}}return typeof a;}function $unlink(c){var b;switch($type(c)){case"object":b={};for(var e in c){b[e]=$unlink(c[e]);
}break;case"hash":b=new Hash(c);break;case"array":b=[];for(var d=0,a=c.length;d<a;d++){b[d]=$unlink(c[d]);}break;default:return c;}return b;}var Browser=$merge({Engine:{name:"unknown",version:0},Platform:{name:(window.orientation!=undefined)?"ipod":(navigator.platform.match(/mac|win|linux/i)||["other"])[0].toLowerCase()},Features:{xpath:!!(document.evaluate),air:!!(window.runtime),query:!!(document.querySelector)},Plugins:{},Engines:{presto:function(){return(!window.opera)?false:((arguments.callee.caller)?960:((document.getElementsByClassName)?950:925));
},trident:function(){return(!window.ActiveXObject)?false:((window.XMLHttpRequest)?((document.querySelectorAll)?6:5):4);},webkit:function(){return(navigator.taintEnabled)?false:((Browser.Features.xpath)?((Browser.Features.query)?525:420):419);
},gecko:function(){return(!document.getBoxObjectFor&&window.mozInnerScreenX==null)?false:((document.getElementsByClassName)?19:18);}}},Browser||{});Browser.Platform[Browser.Platform.name]=true;
Browser.detect=function(){for(var b in this.Engines){var a=this.Engines[b]();if(a){this.Engine={name:b,version:a};this.Engine[b]=this.Engine[b+a]=true;
break;}}return{name:b,version:a};};Browser.detect();Browser.Request=function(){return $try(function(){return new XMLHttpRequest();},function(){return new ActiveXObject("MSXML2.XMLHTTP");
},function(){return new ActiveXObject("Microsoft.XMLHTTP");});};Browser.Features.xhr=!!(Browser.Request());Browser.Plugins.Flash=(function(){var a=($try(function(){return navigator.plugins["Shockwave Flash"].description;
},function(){return new ActiveXObject("ShockwaveFlash.ShockwaveFlash").GetVariable("$version");})||"0 r0").match(/\d+/g);return{version:parseInt(a[0]||0+"."+a[1],10)||0,build:parseInt(a[2],10)||0};
})();function $exec(b){if(!b){return b;}if(window.execScript){window.execScript(b);}else{var a=document.createElement("script");a.setAttribute("type","text/javascript");
a[(Browser.Engine.webkit&&Browser.Engine.version<420)?"innerText":"text"]=b;document.head.appendChild(a);document.head.removeChild(a);}return b;}Native.UID=1;
var $uid=(Browser.Engine.trident)?function(a){return(a.uid||(a.uid=[Native.UID++]))[0];}:function(a){return a.uid||(a.uid=Native.UID++);};var Window=new Native({name:"Window",legacy:(Browser.Engine.trident)?null:window.Window,initialize:function(a){$uid(a);
if(!a.Element){a.Element=$empty;if(Browser.Engine.webkit){a.document.createElement("iframe");}a.Element.prototype=(Browser.Engine.webkit)?window["[[DOMElement.prototype]]"]:{};
}a.document.window=a;return $extend(a,Window.Prototype);},afterImplement:function(b,a){window[b]=Window.Prototype[b]=a;}});Window.Prototype={$family:{name:"window"}};
new Window(window);var Document=new Native({name:"Document",legacy:(Browser.Engine.trident)?null:window.Document,initialize:function(a){$uid(a);a.head=a.getElementsByTagName("head")[0];
a.html=a.getElementsByTagName("html")[0];if(Browser.Engine.trident&&Browser.Engine.version<=4){$try(function(){a.execCommand("BackgroundImageCache",false,true);
});}if(Browser.Engine.trident){a.window.attachEvent("onunload",function(){a.window.detachEvent("onunload",arguments.callee);a.head=a.html=a.window=null;
});}return $extend(a,Document.Prototype);},afterImplement:function(b,a){document[b]=Document.Prototype[b]=a;}});Document.Prototype={$family:{name:"document"}};
new Document(document);Array.implement({every:function(c,d){for(var b=0,a=this.length;b<a;b++){if(!c.call(d,this[b],b,this)){return false;}}return true;
},filter:function(d,e){var c=[];for(var b=0,a=this.length;b<a;b++){if(d.call(e,this[b],b,this)){c.push(this[b]);}}return c;},clean:function(){return this.filter($defined);
},indexOf:function(c,d){var a=this.length;for(var b=(d<0)?Math.max(0,a+d):d||0;b<a;b++){if(this[b]===c){return b;}}return -1;},map:function(d,e){var c=[];
for(var b=0,a=this.length;b<a;b++){c[b]=d.call(e,this[b],b,this);}return c;},some:function(c,d){for(var b=0,a=this.length;b<a;b++){if(c.call(d,this[b],b,this)){return true;
}}return false;},associate:function(c){var d={},b=Math.min(this.length,c.length);for(var a=0;a<b;a++){d[c[a]]=this[a];}return d;},link:function(c){var a={};
for(var e=0,b=this.length;e<b;e++){for(var d in c){if(c[d](this[e])){a[d]=this[e];delete c[d];break;}}}return a;},contains:function(a,b){return this.indexOf(a,b)!=-1;
},extend:function(c){for(var b=0,a=c.length;b<a;b++){this.push(c[b]);}return this;},getLast:function(){return(this.length)?this[this.length-1]:null;},getRandom:function(){return(this.length)?this[$random(0,this.length-1)]:null;
},include:function(a){if(!this.contains(a)){this.push(a);}return this;},combine:function(c){for(var b=0,a=c.length;b<a;b++){this.include(c[b]);}return this;
},erase:function(b){for(var a=this.length;a--;a){if(this[a]===b){this.splice(a,1);}}return this;},empty:function(){this.length=0;return this;},flatten:function(){var d=[];
for(var b=0,a=this.length;b<a;b++){var c=$type(this[b]);if(!c){continue;}d=d.concat((c=="array"||c=="collection"||c=="arguments")?Array.flatten(this[b]):this[b]);
}return d;},hexToRgb:function(b){if(this.length!=3){return null;}var a=this.map(function(c){if(c.length==1){c+=c;}return c.toInt(16);});return(b)?a:"rgb("+a+")";
},rgbToHex:function(d){if(this.length<3){return null;}if(this.length==4&&this[3]==0&&!d){return"transparent";}var b=[];for(var a=0;a<3;a++){var c=(this[a]-0).toString(16);
b.push((c.length==1)?"0"+c:c);}return(d)?b:"#"+b.join("");}});Function.implement({extend:function(a){for(var b in a){this[b]=a[b];}return this;},create:function(b){var a=this;
b=b||{};return function(d){var c=b.arguments;c=(c!=undefined)?$splat(c):Array.slice(arguments,(b.event)?1:0);if(b.event){c=[d||window.event].extend(c);
}var e=function(){return a.apply(b.bind||null,c);};if(b.delay){return setTimeout(e,b.delay);}if(b.periodical){return setInterval(e,b.periodical);}if(b.attempt){return $try(e);
}return e();};},run:function(a,b){return this.apply(b,$splat(a));},pass:function(a,b){return this.create({bind:b,arguments:a});},bind:function(b,a){return this.create({bind:b,arguments:a});
},bindWithEvent:function(b,a){return this.create({bind:b,arguments:a,event:true});},attempt:function(a,b){return this.create({bind:b,arguments:a,attempt:true})();
},delay:function(b,c,a){return this.create({bind:c,arguments:a,delay:b})();},periodical:function(c,b,a){return this.create({bind:b,arguments:a,periodical:c})();
}});Number.implement({limit:function(b,a){return Math.min(a,Math.max(b,this));},round:function(a){a=Math.pow(10,a||0);return Math.round(this*a)/a;},times:function(b,c){for(var a=0;
a<this;a++){b.call(c,a,this);}},toFloat:function(){return parseFloat(this);},toInt:function(a){return parseInt(this,a||10);}});Number.alias("times","each");
(function(b){var a={};b.each(function(c){if(!Number[c]){a[c]=function(){return Math[c].apply(null,[this].concat($A(arguments)));};}});Number.implement(a);
})(["abs","acos","asin","atan","atan2","ceil","cos","exp","floor","log","max","min","pow","sin","sqrt","tan"]);String.implement({test:function(a,b){return((typeof a=="string")?new RegExp(a,b):a).test(this);
},contains:function(a,b){return(b)?(b+this+b).indexOf(b+a+b)>-1:this.indexOf(a)>-1;},trim:function(){return this.replace(/^\s+|\s+$/g,"");},clean:function(){return this.replace(/\s+/g," ").trim();
},camelCase:function(){return this.replace(/-\D/g,function(a){return a.charAt(1).toUpperCase();});},hyphenate:function(){return this.replace(/[A-Z]/g,function(a){return("-"+a.charAt(0).toLowerCase());
});},capitalize:function(){return this.replace(/\b[a-z]/g,function(a){return a.toUpperCase();});},escapeRegExp:function(){return this.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1");
},toInt:function(a){return parseInt(this,a||10);},toFloat:function(){return parseFloat(this);},hexToRgb:function(b){var a=this.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
return(a)?a.slice(1).hexToRgb(b):null;},rgbToHex:function(b){var a=this.match(/\d{1,3}/g);return(a)?a.rgbToHex(b):null;},stripScripts:function(b){var a="";
var c=this.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi,function(){a+=arguments[1]+"\n";return"";});if(b===true){$exec(a);}else{if($type(b)=="function"){b(a,c);
}}return c;},substitute:function(a,b){return this.replace(b||(/\\?\{([^{}]+)\}/g),function(d,c){if(d.charAt(0)=="\\"){return d.slice(1);}return(a[c]!=undefined)?a[c]:"";
});}});Hash.implement({has:Object.prototype.hasOwnProperty,keyOf:function(b){for(var a in this){if(this.hasOwnProperty(a)&&this[a]===b){return a;}}return null;
},hasValue:function(a){return(Hash.keyOf(this,a)!==null);},extend:function(a){Hash.each(a||{},function(c,b){Hash.set(this,b,c);},this);return this;},combine:function(a){Hash.each(a||{},function(c,b){Hash.include(this,b,c);
},this);return this;},erase:function(a){if(this.hasOwnProperty(a)){delete this[a];}return this;},get:function(a){return(this.hasOwnProperty(a))?this[a]:null;
},set:function(a,b){if(!this[a]||this.hasOwnProperty(a)){this[a]=b;}return this;},empty:function(){Hash.each(this,function(b,a){delete this[a];},this);
return this;},include:function(a,b){if(this[a]==undefined){this[a]=b;}return this;},map:function(b,c){var a=new Hash;Hash.each(this,function(e,d){a.set(d,b.call(c,e,d,this));
},this);return a;},filter:function(b,c){var a=new Hash;Hash.each(this,function(e,d){if(b.call(c,e,d,this)){a.set(d,e);}},this);return a;},every:function(b,c){for(var a in this){if(this.hasOwnProperty(a)&&!b.call(c,this[a],a)){return false;
}}return true;},some:function(b,c){for(var a in this){if(this.hasOwnProperty(a)&&b.call(c,this[a],a)){return true;}}return false;},getKeys:function(){var a=[];
Hash.each(this,function(c,b){a.push(b);});return a;},getValues:function(){var a=[];Hash.each(this,function(b){a.push(b);});return a;},toQueryString:function(a){var b=[];
Hash.each(this,function(f,e){if(a){e=a+"["+e+"]";}var d;switch($type(f)){case"object":d=Hash.toQueryString(f,e);break;case"array":var c={};f.each(function(h,g){c[g]=h;
});d=Hash.toQueryString(c,e);break;default:d=e+"="+encodeURIComponent(f);}if(f!=undefined){b.push(d);}});return b.join("&");}});Hash.alias({keyOf:"indexOf",hasValue:"contains"});
var Event=new Native({name:"Event",initialize:function(a,f){f=f||window;var k=f.document;a=a||f.event;if(a.$extended){return a;}this.$extended=true;var j=a.type;
var g=a.target||a.srcElement;while(g&&g.nodeType==3){g=g.parentNode;}if(j.test(/key/)){var b=a.which||a.keyCode;var m=Event.Keys.keyOf(b);if(j=="keydown"){var d=b-111;
if(d>0&&d<13){m="f"+d;}}m=m||String.fromCharCode(b).toLowerCase();}else{if(j.match(/(click|mouse|menu)/i)){k=(!k.compatMode||k.compatMode=="CSS1Compat")?k.html:k.body;
var i={x:a.pageX||a.clientX+k.scrollLeft,y:a.pageY||a.clientY+k.scrollTop};var c={x:(a.pageX)?a.pageX-f.pageXOffset:a.clientX,y:(a.pageY)?a.pageY-f.pageYOffset:a.clientY};
if(j.match(/DOMMouseScroll|mousewheel/)){var h=(a.wheelDelta)?a.wheelDelta/120:-(a.detail||0)/3;}var e=(a.which==3)||(a.button==2);var l=null;if(j.match(/over|out/)){switch(j){case"mouseover":l=a.relatedTarget||a.fromElement;
break;case"mouseout":l=a.relatedTarget||a.toElement;}if(!(function(){while(l&&l.nodeType==3){l=l.parentNode;}return true;}).create({attempt:Browser.Engine.gecko})()){l=false;
}}}}return $extend(this,{event:a,type:j,page:i,client:c,rightClick:e,wheel:h,relatedTarget:l,target:g,code:b,key:m,shift:a.shiftKey,control:a.ctrlKey,alt:a.altKey,meta:a.metaKey});
}});Event.Keys=new Hash({enter:13,up:38,down:40,left:37,right:39,esc:27,space:32,backspace:8,tab:9,"delete":46});Event.implement({stop:function(){return this.stopPropagation().preventDefault();
},stopPropagation:function(){if(this.event.stopPropagation){this.event.stopPropagation();}else{this.event.cancelBubble=true;}return this;},preventDefault:function(){if(this.event.preventDefault){this.event.preventDefault();
}else{this.event.returnValue=false;}return this;}});function Class(b){if(b instanceof Function){b={initialize:b};}var a=function(){Object.reset(this);if(a._prototyping){return this;
}this._current=$empty;var c=(this.initialize)?this.initialize.apply(this,arguments):this;delete this._current;delete this.caller;return c;}.extend(this);
a.implement(b);a.constructor=Class;a.prototype.constructor=a;return a;}Function.prototype.protect=function(){this._protected=true;return this;};Object.reset=function(a,c){if(c==null){for(var e in a){Object.reset(a,e);
}return a;}delete a[c];switch($type(a[c])){case"object":var d=function(){};d.prototype=a[c];var b=new d;a[c]=Object.reset(b);break;case"array":a[c]=$unlink(a[c]);
break;}return a;};new Native({name:"Class",initialize:Class}).extend({instantiate:function(b){b._prototyping=true;var a=new b;delete b._prototyping;return a;
},wrap:function(a,b,c){if(c._origin){c=c._origin;}return function(){if(c._protected&&this._current==null){throw new Error('The method "'+b+'" cannot be called.');
}var e=this.caller,f=this._current;this.caller=f;this._current=arguments.callee;var d=c.apply(this,arguments);this._current=f;this.caller=e;return d;}.extend({_owner:a,_origin:c,_name:b});
}});Class.implement({implement:function(a,d){if($type(a)=="object"){for(var e in a){this.implement(e,a[e]);}return this;}var f=Class.Mutators[a];if(f){d=f.call(this,d);
if(d==null){return this;}}var c=this.prototype;switch($type(d)){case"function":if(d._hidden){return this;}c[a]=Class.wrap(this,a,d);break;case"object":var b=c[a];
if($type(b)=="object"){$mixin(b,d);}else{c[a]=$unlink(d);}break;case"array":c[a]=$unlink(d);break;default:c[a]=d;}return this;}});Class.Mutators={Extends:function(a){this.parent=a;
this.prototype=Class.instantiate(a);this.implement("parent",function(){var b=this.caller._name,c=this.caller._owner.parent.prototype[b];if(!c){throw new Error('The method "'+b+'" has no parent.');
}return c.apply(this,arguments);}.protect());},Implements:function(a){$splat(a).each(function(b){if(b instanceof Function){b=Class.instantiate(b);}this.implement(b);
},this);}};var Chain=new Class({$chain:[],chain:function(){this.$chain.extend(Array.flatten(arguments));return this;},callChain:function(){return(this.$chain.length)?this.$chain.shift().apply(this,arguments):false;
},clearChain:function(){this.$chain.empty();return this;}});var Events=new Class({$events:{},addEvent:function(c,b,a){c=Events.removeOn(c);if(b!=$empty){this.$events[c]=this.$events[c]||[];
this.$events[c].include(b);if(a){b.internal=true;}}return this;},addEvents:function(a){for(var b in a){this.addEvent(b,a[b]);}return this;},fireEvent:function(c,b,a){c=Events.removeOn(c);
if(!this.$events||!this.$events[c]){return this;}this.$events[c].each(function(d){d.create({bind:this,delay:a,"arguments":b})();},this);return this;},removeEvent:function(b,a){b=Events.removeOn(b);
if(!this.$events[b]){return this;}if(!a.internal){this.$events[b].erase(a);}return this;},removeEvents:function(c){var d;if($type(c)=="object"){for(d in c){this.removeEvent(d,c[d]);
}return this;}if(c){c=Events.removeOn(c);}for(d in this.$events){if(c&&c!=d){continue;}var b=this.$events[d];for(var a=b.length;a--;a){this.removeEvent(d,b[a]);
}}return this;}});Events.removeOn=function(a){return a.replace(/^on([A-Z])/,function(b,c){return c.toLowerCase();});};var Options=new Class({setOptions:function(){this.options=$merge.run([this.options].extend(arguments));
if(!this.addEvent){return this;}for(var a in this.options){if($type(this.options[a])!="function"||!(/^on[A-Z]/).test(a)){continue;}this.addEvent(a,this.options[a]);
delete this.options[a];}return this;}});var Element=new Native({name:"Element",legacy:window.Element,initialize:function(a,b){var c=Element.Constructors.get(a);
if(c){return c(b);}if(typeof a=="string"){return document.newElement(a,b);}return document.id(a).set(b);},afterImplement:function(a,b){Element.Prototype[a]=b;
if(Array[a]){return;}Elements.implement(a,function(){var c=[],g=true;for(var e=0,d=this.length;e<d;e++){var f=this[e][a].apply(this[e],arguments);c.push(f);
if(g){g=($type(f)=="element");}}return(g)?new Elements(c):c;});}});Element.Prototype={$family:{name:"element"}};Element.Constructors=new Hash;var IFrame=new Native({name:"IFrame",generics:false,initialize:function(){var f=Array.link(arguments,{properties:Object.type,iframe:$defined});
var d=f.properties||{};var c=document.id(f.iframe);var e=d.onload||$empty;delete d.onload;d.id=d.name=$pick(d.id,d.name,c?(c.id||c.name):"IFrame_"+$time());
c=new Element(c||"iframe",d);var b=function(){var g=$try(function(){return c.contentWindow.location.host;});if(!g||g==window.location.host){var h=new Window(c.contentWindow);
new Document(c.contentWindow.document);$extend(h.Element.prototype,Element.Prototype);}e.call(c.contentWindow,c.contentWindow.document);};var a=$try(function(){return c.contentWindow;
});((a&&a.document.body)||window.frames[d.id])?b():c.addListener("load",b);return c;}});var Elements=new Native({initialize:function(f,b){b=$extend({ddup:true,cash:true},b);
f=f||[];if(b.ddup||b.cash){var g={},e=[];for(var c=0,a=f.length;c<a;c++){var d=document.id(f[c],!b.cash);if(b.ddup){if(g[d.uid]){continue;}g[d.uid]=true;
}if(d){e.push(d);}}f=e;}return(b.cash)?$extend(f,this):f;}});Elements.implement({filter:function(a,b){if(!a){return this;}return new Elements(Array.filter(this,(typeof a=="string")?function(c){return c.match(a);
}:a,b));}});Document.implement({newElement:function(a,b){if(Browser.Engine.trident&&b){["name","type","checked"].each(function(c){if(!b[c]){return;}a+=" "+c+'="'+b[c]+'"';
if(c!="checked"){delete b[c];}});a="<"+a+">";}return document.id(this.createElement(a)).set(b);},newTextNode:function(a){return this.createTextNode(a);
},getDocument:function(){return this;},getWindow:function(){return this.window;},id:(function(){var a={string:function(d,c,b){d=b.getElementById(d);return(d)?a.element(d,c):null;
},element:function(b,e){$uid(b);if(!e&&!b.$family&&!(/^object|embed$/i).test(b.tagName)){var c=Element.Prototype;for(var d in c){b[d]=c[d];}}return b;},object:function(c,d,b){if(c.toElement){return a.element(c.toElement(b),d);
}return null;}};a.textnode=a.whitespace=a.window=a.document=$arguments(0);return function(c,e,d){if(c&&c.$family&&c.uid){return c;}var b=$type(c);return(a[b])?a[b](c,e,d||document):null;
};})()});if(window.$==null){Window.implement({$:function(a,b){return document.id(a,b,this.document);}});}Window.implement({$$:function(a){if(arguments.length==1&&typeof a=="string"){return this.document.getElements(a);
}var f=[];var c=Array.flatten(arguments);for(var d=0,b=c.length;d<b;d++){var e=c[d];switch($type(e)){case"element":f.push(e);break;case"string":f.extend(this.document.getElements(e,true));
}}return new Elements(f);},getDocument:function(){return this.document;},getWindow:function(){return this;}});Native.implement([Element,Document],{getElement:function(a,b){return document.id(this.getElements(a,true)[0]||null,b);
},getElements:function(a,d){a=a.split(",");var c=[];var b=(a.length>1);a.each(function(e){var f=this.getElementsByTagName(e.trim());(b)?c.extend(f):c=f;
},this);return new Elements(c,{ddup:b,cash:!d});}});(function(){var h={},f={};var i={input:"checked",option:"selected",textarea:(Browser.Engine.webkit&&Browser.Engine.version<420)?"innerHTML":"value"};
var c=function(l){return(f[l]||(f[l]={}));};var g=function(n,l){if(!n){return;}var m=n.uid;if(Browser.Engine.trident){if(n.clearAttributes){var q=l&&n.cloneNode(false);
n.clearAttributes();if(q){n.mergeAttributes(q);}}else{if(n.removeEvents){n.removeEvents();}}if((/object/i).test(n.tagName)){for(var o in n){if(typeof n[o]=="function"){n[o]=$empty;
}}Element.dispose(n);}}if(!m){return;}h[m]=f[m]=null;};var d=function(){Hash.each(h,g);if(Browser.Engine.trident){$A(document.getElementsByTagName("object")).each(g);
}if(window.CollectGarbage){CollectGarbage();}h=f=null;};var j=function(n,l,s,m,p,r){var o=n[s||l];var q=[];while(o){if(o.nodeType==1&&(!m||Element.match(o,m))){if(!p){return document.id(o,r);
}q.push(o);}o=o[l];}return(p)?new Elements(q,{ddup:false,cash:!r}):null;};var e={html:"innerHTML","class":"className","for":"htmlFor",defaultValue:"defaultValue",text:(Browser.Engine.trident||(Browser.Engine.webkit&&Browser.Engine.version<420))?"innerText":"textContent"};
var b=["compact","nowrap","ismap","declare","noshade","checked","disabled","readonly","multiple","selected","noresize","defer"];var k=["value","type","defaultValue","accessKey","cellPadding","cellSpacing","colSpan","frameBorder","maxLength","readOnly","rowSpan","tabIndex","useMap"];
b=b.associate(b);Hash.extend(e,b);Hash.extend(e,k.associate(k.map(String.toLowerCase)));var a={before:function(m,l){if(l.parentNode){l.parentNode.insertBefore(m,l);
}},after:function(m,l){if(!l.parentNode){return;}var n=l.nextSibling;(n)?l.parentNode.insertBefore(m,n):l.parentNode.appendChild(m);},bottom:function(m,l){l.appendChild(m);
},top:function(m,l){var n=l.firstChild;(n)?l.insertBefore(m,n):l.appendChild(m);}};a.inside=a.bottom;Hash.each(a,function(l,m){m=m.capitalize();Element.implement("inject"+m,function(n){l(this,document.id(n,true));
return this;});Element.implement("grab"+m,function(n){l(document.id(n,true),this);return this;});});Element.implement({set:function(o,m){switch($type(o)){case"object":for(var n in o){this.set(n,o[n]);
}break;case"string":var l=Element.Properties.get(o);(l&&l.set)?l.set.apply(this,Array.slice(arguments,1)):this.setProperty(o,m);}return this;},get:function(m){var l=Element.Properties.get(m);
return(l&&l.get)?l.get.apply(this,Array.slice(arguments,1)):this.getProperty(m);},erase:function(m){var l=Element.Properties.get(m);(l&&l.erase)?l.erase.apply(this):this.removeProperty(m);
return this;},setProperty:function(m,n){var l=e[m];if(n==undefined){return this.removeProperty(m);}if(l&&b[m]){n=!!n;}(l)?this[l]=n:this.setAttribute(m,""+n);
return this;},setProperties:function(l){for(var m in l){this.setProperty(m,l[m]);}return this;},getProperty:function(m){var l=e[m];var n=(l)?this[l]:this.getAttribute(m,2);
return(b[m])?!!n:(l)?n:n||null;},getProperties:function(){var l=$A(arguments);return l.map(this.getProperty,this).associate(l);},removeProperty:function(m){var l=e[m];
(l)?this[l]=(l&&b[m])?false:"":this.removeAttribute(m);return this;},removeProperties:function(){Array.each(arguments,this.removeProperty,this);return this;
},hasClass:function(l){return this.className.contains(l," ");},addClass:function(l){if(!this.hasClass(l)){this.className=(this.className+" "+l).clean();
}return this;},removeClass:function(l){this.className=this.className.replace(new RegExp("(^|\\s)"+l+"(?:\\s|$)"),"$1");return this;},toggleClass:function(l){return this.hasClass(l)?this.removeClass(l):this.addClass(l);
},adopt:function(){Array.flatten(arguments).each(function(l){l=document.id(l,true);if(l){this.appendChild(l);}},this);return this;},appendText:function(m,l){return this.grab(this.getDocument().newTextNode(m),l);
},grab:function(m,l){a[l||"bottom"](document.id(m,true),this);return this;},inject:function(m,l){a[l||"bottom"](this,document.id(m,true));return this;},replaces:function(l){l=document.id(l,true);
l.parentNode.replaceChild(this,l);return this;},wraps:function(m,l){m=document.id(m,true);return this.replaces(m).grab(m,l);},getPrevious:function(l,m){return j(this,"previousSibling",null,l,false,m);
},getAllPrevious:function(l,m){return j(this,"previousSibling",null,l,true,m);},getNext:function(l,m){return j(this,"nextSibling",null,l,false,m);},getAllNext:function(l,m){return j(this,"nextSibling",null,l,true,m);
},getFirst:function(l,m){return j(this,"nextSibling","firstChild",l,false,m);},getLast:function(l,m){return j(this,"previousSibling","lastChild",l,false,m);
},getParent:function(l,m){return j(this,"parentNode",null,l,false,m);},getParents:function(l,m){return j(this,"parentNode",null,l,true,m);},getSiblings:function(l,m){return this.getParent().getChildren(l,m).erase(this);
},getChildren:function(l,m){return j(this,"nextSibling","firstChild",l,true,m);},getWindow:function(){return this.ownerDocument.window;},getDocument:function(){return this.ownerDocument;
},getElementById:function(o,n){var m=this.ownerDocument.getElementById(o);if(!m){return null;}for(var l=m.parentNode;l!=this;l=l.parentNode){if(!l){return null;
}}return document.id(m,n);},getSelected:function(){return new Elements($A(this.options).filter(function(l){return l.selected;}));},getComputedStyle:function(m){if(this.currentStyle){return this.currentStyle[m.camelCase()];
}var l=this.getDocument().defaultView.getComputedStyle(this,null);return(l)?l.getPropertyValue([m.hyphenate()]):null;},toQueryString:function(){var l=[];
this.getElements("input, select, textarea",true).each(function(m){if(!m.name||m.disabled||m.type=="submit"||m.type=="reset"||m.type=="file"){return;}var n=(m.tagName.toLowerCase()=="select")?Element.getSelected(m).map(function(o){return o.value;
}):((m.type=="radio"||m.type=="checkbox")&&!m.checked)?null:m.value;$splat(n).each(function(o){if(typeof o!="undefined"){l.push(m.name+"="+encodeURIComponent(o));
}});});return l.join("&");},clone:function(o,l){o=o!==false;var r=this.cloneNode(o);var n=function(v,u){if(!l){v.removeAttribute("id");}if(Browser.Engine.trident){v.clearAttributes();
v.mergeAttributes(u);v.removeAttribute("uid");if(v.options){var w=v.options,s=u.options;for(var t=w.length;t--;){w[t].selected=s[t].selected;}}}var x=i[u.tagName.toLowerCase()];
if(x&&u[x]){v[x]=u[x];}};if(o){var p=r.getElementsByTagName("*"),q=this.getElementsByTagName("*");for(var m=p.length;m--;){n(p[m],q[m]);}}n(r,this);return document.id(r);
},destroy:function(){Element.empty(this);Element.dispose(this);g(this,true);return null;},empty:function(){$A(this.childNodes).each(function(l){Element.destroy(l);
});return this;},dispose:function(){return(this.parentNode)?this.parentNode.removeChild(this):this;},hasChild:function(l){l=document.id(l,true);if(!l){return false;
}if(Browser.Engine.webkit&&Browser.Engine.version<420){return $A(this.getElementsByTagName(l.tagName)).contains(l);}return(this.contains)?(this!=l&&this.contains(l)):!!(this.compareDocumentPosition(l)&16);
},match:function(l){return(!l||(l==this)||(Element.get(this,"tag")==l));}});Native.implement([Element,Window,Document],{addListener:function(o,n){if(o=="unload"){var l=n,m=this;
n=function(){m.removeListener("unload",n);l();};}else{h[this.uid]=this;}if(this.addEventListener){this.addEventListener(o,n,false);}else{this.attachEvent("on"+o,n);
}return this;},removeListener:function(m,l){if(this.removeEventListener){this.removeEventListener(m,l,false);}else{this.detachEvent("on"+m,l);}return this;
},retrieve:function(m,l){var o=c(this.uid),n=o[m];if(l!=undefined&&n==undefined){n=o[m]=l;}return $pick(n);},store:function(m,l){var n=c(this.uid);n[m]=l;
return this;},eliminate:function(l){var m=c(this.uid);delete m[l];return this;}});window.addListener("unload",d);})();Element.Properties=new Hash;Element.Properties.style={set:function(a){this.style.cssText=a;
},get:function(){return this.style.cssText;},erase:function(){this.style.cssText="";}};Element.Properties.tag={get:function(){return this.tagName.toLowerCase();
}};Element.Properties.html=(function(){var c=document.createElement("div");var a={table:[1,"<table>","</table>"],select:[1,"<select>","</select>"],tbody:[2,"<table><tbody>","</tbody></table>"],tr:[3,"<table><tbody><tr>","</tr></tbody></table>"]};
a.thead=a.tfoot=a.tbody;var b={set:function(){var e=Array.flatten(arguments).join("");var f=Browser.Engine.trident&&a[this.get("tag")];if(f){var g=c;g.innerHTML=f[1]+e+f[2];
for(var d=f[0];d--;){g=g.firstChild;}this.empty().adopt(g.childNodes);}else{this.innerHTML=e;}}};b.erase=b.set;return b;})();if(Browser.Engine.webkit&&Browser.Engine.version<420){Element.Properties.text={get:function(){if(this.innerText){return this.innerText;
}var a=this.ownerDocument.newElement("div",{html:this.innerHTML}).inject(this.ownerDocument.body);var b=a.innerText;a.destroy();return b;}};}Element.Properties.events={set:function(a){this.addEvents(a);
}};Native.implement([Element,Window,Document],{addEvent:function(e,g){var h=this.retrieve("events",{});h[e]=h[e]||{keys:[],values:[]};if(h[e].keys.contains(g)){return this;
}h[e].keys.push(g);var f=e,a=Element.Events.get(e),c=g,i=this;if(a){if(a.onAdd){a.onAdd.call(this,g);}if(a.condition){c=function(j){if(a.condition.call(this,j)){return g.call(this,j);
}return true;};}f=a.base||f;}var d=function(){return g.call(i);};var b=Element.NativeEvents[f];if(b){if(b==2){d=function(j){j=new Event(j,i.getWindow());
if(c.call(i,j)===false){j.stop();}};}this.addListener(f,d);}h[e].values.push(d);return this;},removeEvent:function(c,b){var a=this.retrieve("events");if(!a||!a[c]){return this;
}var f=a[c].keys.indexOf(b);if(f==-1){return this;}a[c].keys.splice(f,1);var e=a[c].values.splice(f,1)[0];var d=Element.Events.get(c);if(d){if(d.onRemove){d.onRemove.call(this,b);
}c=d.base||c;}return(Element.NativeEvents[c])?this.removeListener(c,e):this;},addEvents:function(a){for(var b in a){this.addEvent(b,a[b]);}return this;
},removeEvents:function(a){var c;if($type(a)=="object"){for(c in a){this.removeEvent(c,a[c]);}return this;}var b=this.retrieve("events");if(!b){return this;
}if(!a){for(c in b){this.removeEvents(c);}this.eliminate("events");}else{if(b[a]){while(b[a].keys[0]){this.removeEvent(a,b[a].keys[0]);}b[a]=null;}}return this;
},fireEvent:function(d,b,a){var c=this.retrieve("events");if(!c||!c[d]){return this;}c[d].keys.each(function(e){e.create({bind:this,delay:a,"arguments":b})();
},this);return this;},cloneEvents:function(d,a){d=document.id(d);var c=d.retrieve("events");if(!c){return this;}if(!a){for(var b in c){this.cloneEvents(d,b);
}}else{if(c[a]){c[a].keys.each(function(e){this.addEvent(a,e);},this);}}return this;}});Element.NativeEvents={click:2,dblclick:2,mouseup:2,mousedown:2,contextmenu:2,mousewheel:2,DOMMouseScroll:2,mouseover:2,mouseout:2,mousemove:2,selectstart:2,selectend:2,keydown:2,keypress:2,keyup:2,focus:2,blur:2,change:2,reset:2,select:2,submit:2,load:1,unload:1,beforeunload:2,resize:1,move:1,DOMContentLoaded:1,readystatechange:1,error:1,abort:1,scroll:1};
(function(){var a=function(b){var c=b.relatedTarget;if(c==undefined){return true;}if(c===false){return false;}return($type(this)!="document"&&c!=this&&c.prefix!="xul"&&!this.hasChild(c));
};Element.Events=new Hash({mouseenter:{base:"mouseover",condition:a},mouseleave:{base:"mouseout",condition:a},mousewheel:{base:(Browser.Engine.gecko)?"DOMMouseScroll":"mousewheel"}});
})();Element.Properties.styles={set:function(a){this.setStyles(a);}};Element.Properties.opacity={set:function(a,b){if(!b){if(a==0){if(this.style.visibility!="hidden"){this.style.visibility="hidden";
}}else{if(this.style.visibility!="visible"){this.style.visibility="visible";}}}if(!this.currentStyle||!this.currentStyle.hasLayout){this.style.zoom=1;}if(Browser.Engine.trident){this.style.filter=(a==1)?"":"alpha(opacity="+a*100+")";
}this.style.opacity=a;this.store("opacity",a);},get:function(){return this.retrieve("opacity",1);}};Element.implement({setOpacity:function(a){return this.set("opacity",a,true);
},getOpacity:function(){return this.get("opacity");},setStyle:function(b,a){switch(b){case"opacity":return this.set("opacity",parseFloat(a));case"float":b=(Browser.Engine.trident)?"styleFloat":"cssFloat";
}b=b.camelCase();if($type(a)!="string"){var c=(Element.Styles.get(b)||"@").split(" ");a=$splat(a).map(function(e,d){if(!c[d]){return"";}return($type(e)=="number")?c[d].replace("@",Math.round(e)):e;
}).join(" ");}else{if(a==String(Number(a))){a=Math.round(a);}}this.style[b]=a;return this;},getStyle:function(g){switch(g){case"opacity":return this.get("opacity");
case"float":g=(Browser.Engine.trident)?"styleFloat":"cssFloat";}g=g.camelCase();var a=this.style[g];if(!$chk(a)){a=[];for(var f in Element.ShortStyles){if(g!=f){continue;
}for(var e in Element.ShortStyles[f]){a.push(this.getStyle(e));}return a.join(" ");}a=this.getComputedStyle(g);}if(a){a=String(a);var c=a.match(/rgba?\([\d\s,]+\)/);
if(c){a=a.replace(c[0],c[0].rgbToHex());}}if(Browser.Engine.presto||(Browser.Engine.trident&&!$chk(parseInt(a,10)))){if(g.test(/^(height|width)$/)){var b=(g=="width")?["left","right"]:["top","bottom"],d=0;
b.each(function(h){d+=this.getStyle("border-"+h+"-width").toInt()+this.getStyle("padding-"+h).toInt();},this);return this["offset"+g.capitalize()]-d+"px";
}if((Browser.Engine.presto)&&String(a).test("px")){return a;}if(g.test(/(border(.+)Width|margin|padding)/)){return"0px";}}return a;},setStyles:function(b){for(var a in b){this.setStyle(a,b[a]);
}return this;},getStyles:function(){var a={};Array.flatten(arguments).each(function(b){a[b]=this.getStyle(b);},this);return a;}});Element.Styles=new Hash({left:"@px",top:"@px",bottom:"@px",right:"@px",width:"@px",height:"@px",maxWidth:"@px",maxHeight:"@px",minWidth:"@px",minHeight:"@px",backgroundColor:"rgb(@, @, @)",backgroundPosition:"@px @px",color:"rgb(@, @, @)",fontSize:"@px",letterSpacing:"@px",lineHeight:"@px",clip:"rect(@px @px @px @px)",margin:"@px @px @px @px",padding:"@px @px @px @px",border:"@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)",borderWidth:"@px @px @px @px",borderStyle:"@ @ @ @",borderColor:"rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)",zIndex:"@",zoom:"@",fontWeight:"@",textIndent:"@px",opacity:"@"});
Element.ShortStyles={margin:{},padding:{},border:{},borderWidth:{},borderStyle:{},borderColor:{}};["Top","Right","Bottom","Left"].each(function(g){var f=Element.ShortStyles;
var b=Element.Styles;["margin","padding"].each(function(h){var i=h+g;f[h][i]=b[i]="@px";});var e="border"+g;f.border[e]=b[e]="@px @ rgb(@, @, @)";var d=e+"Width",a=e+"Style",c=e+"Color";
f[e]={};f.borderWidth[d]=f[e][d]=b[d]="@px";f.borderStyle[a]=f[e][a]=b[a]="@";f.borderColor[c]=f[e][c]=b[c]="rgb(@, @, @)";});(function(){Element.implement({scrollTo:function(h,i){if(b(this)){this.getWindow().scrollTo(h,i);
}else{this.scrollLeft=h;this.scrollTop=i;}return this;},getSize:function(){if(b(this)){return this.getWindow().getSize();}return{x:this.offsetWidth,y:this.offsetHeight};
},getScrollSize:function(){if(b(this)){return this.getWindow().getScrollSize();}return{x:this.scrollWidth,y:this.scrollHeight};},getScroll:function(){if(b(this)){return this.getWindow().getScroll();
}return{x:this.scrollLeft,y:this.scrollTop};},getScrolls:function(){var i=this,h={x:0,y:0};while(i&&!b(i)){h.x+=i.scrollLeft;h.y+=i.scrollTop;i=i.parentNode;
}return h;},getOffsetParent:function(){var h=this;if(b(h)){return null;}if(!Browser.Engine.trident){return h.offsetParent;}while((h=h.parentNode)&&!b(h)){if(d(h,"position")!="static"){return h;
}}return null;},getOffsets:function(){if(this.getBoundingClientRect){var j=this.getBoundingClientRect(),m=document.id(this.getDocument().documentElement),p=m.getScroll(),k=this.getScrolls(),i=this.getScroll(),h=(d(this,"position")=="fixed");
return{x:j.left.toInt()+k.x-i.x+((h)?0:p.x)-m.clientLeft,y:j.top.toInt()+k.y-i.y+((h)?0:p.y)-m.clientTop};}var l=this,n={x:0,y:0};if(b(this)){return n;
}while(l&&!b(l)){n.x+=l.offsetLeft;n.y+=l.offsetTop;if(Browser.Engine.gecko){if(!f(l)){n.x+=c(l);n.y+=g(l);}var o=l.parentNode;if(o&&d(o,"overflow")!="visible"){n.x+=c(o);
n.y+=g(o);}}else{if(l!=this&&Browser.Engine.webkit){n.x+=c(l);n.y+=g(l);}}l=l.offsetParent;}if(Browser.Engine.gecko&&!f(this)){n.x-=c(this);n.y-=g(this);
}return n;},getPosition:function(k){if(b(this)){return{x:0,y:0};}var l=this.getOffsets(),i=this.getScrolls();var h={x:l.x-i.x,y:l.y-i.y};var j=(k&&(k=document.id(k)))?k.getPosition():{x:0,y:0};
return{x:h.x-j.x,y:h.y-j.y};},getCoordinates:function(j){if(b(this)){return this.getWindow().getCoordinates();}var h=this.getPosition(j),i=this.getSize();
var k={left:h.x,top:h.y,width:i.x,height:i.y};k.right=k.left+k.width;k.bottom=k.top+k.height;return k;},computePosition:function(h){return{left:h.x-e(this,"margin-left"),top:h.y-e(this,"margin-top")};
},setPosition:function(h){return this.setStyles(this.computePosition(h));}});Native.implement([Document,Window],{getSize:function(){if(Browser.Engine.presto||Browser.Engine.webkit){var i=this.getWindow();
return{x:i.innerWidth,y:i.innerHeight};}var h=a(this);return{x:h.clientWidth,y:h.clientHeight};},getScroll:function(){var i=this.getWindow(),h=a(this);
return{x:i.pageXOffset||h.scrollLeft,y:i.pageYOffset||h.scrollTop};},getScrollSize:function(){var i=a(this),h=this.getSize();return{x:Math.max(i.scrollWidth,h.x),y:Math.max(i.scrollHeight,h.y)};
},getPosition:function(){return{x:0,y:0};},getCoordinates:function(){var h=this.getSize();return{top:0,left:0,bottom:h.y,right:h.x,height:h.y,width:h.x};
}});var d=Element.getComputedStyle;function e(h,i){return d(h,i).toInt()||0;}function f(h){return d(h,"-moz-box-sizing")=="border-box";}function g(h){return e(h,"border-top-width");
}function c(h){return e(h,"border-left-width");}function b(h){return(/^(?:body|html)$/i).test(h.tagName);}function a(h){var i=h.getDocument();return(!i.compatMode||i.compatMode=="CSS1Compat")?i.html:i.body;
}})();Element.alias("setPosition","position");Native.implement([Window,Document,Element],{getHeight:function(){return this.getSize().y;},getWidth:function(){return this.getSize().x;
},getScrollTop:function(){return this.getScroll().y;},getScrollLeft:function(){return this.getScroll().x;},getScrollHeight:function(){return this.getScrollSize().y;
},getScrollWidth:function(){return this.getScrollSize().x;},getTop:function(){return this.getPosition().y;},getLeft:function(){return this.getPosition().x;
}});Native.implement([Document,Element],{getElements:function(h,g){h=h.split(",");var c,e={};for(var d=0,b=h.length;d<b;d++){var a=h[d],f=Selectors.Utils.search(this,a,e);
if(d!=0&&f.item){f=$A(f);}c=(d==0)?f:(c.item)?$A(c).concat(f):c.concat(f);}return new Elements(c,{ddup:(h.length>1),cash:!g});}});Element.implement({match:function(b){if(!b||(b==this)){return true;
}var d=Selectors.Utils.parseTagAndID(b);var a=d[0],e=d[1];if(!Selectors.Filters.byID(this,e)||!Selectors.Filters.byTag(this,a)){return false;}var c=Selectors.Utils.parseSelector(b);
return(c)?Selectors.Utils.filter(this,c,{}):true;}});var Selectors={Cache:{nth:{},parsed:{}}};Selectors.RegExps={id:(/#([\w-]+)/),tag:(/^(\w+|\*)/),quick:(/^(\w+|\*)$/),splitter:(/\s*([+>~\s])\s*([a-zA-Z#.*:\[])/g),combined:(/\.([\w-]+)|\[(\w+)(?:([!*^$~|]?=)(["']?)([^\4]*?)\4)?\]|:([\w-]+)(?:\(["']?(.*?)?["']?\)|$)/g)};
Selectors.Utils={chk:function(b,c){if(!c){return true;}var a=$uid(b);if(!c[a]){return c[a]=true;}return false;},parseNthArgument:function(h){if(Selectors.Cache.nth[h]){return Selectors.Cache.nth[h];
}var e=h.match(/^([+-]?\d*)?([a-z]+)?([+-]?\d*)?$/);if(!e){return false;}var g=parseInt(e[1],10);var d=(g||g===0)?g:1;var f=e[2]||false;var c=parseInt(e[3],10)||0;
if(d!=0){c--;while(c<1){c+=d;}while(c>=d){c-=d;}}else{d=c;f="index";}switch(f){case"n":e={a:d,b:c,special:"n"};break;case"odd":e={a:2,b:0,special:"n"};
break;case"even":e={a:2,b:1,special:"n"};break;case"first":e={a:0,special:"index"};break;case"last":e={special:"last-child"};break;case"only":e={special:"only-child"};
break;default:e={a:(d-1),special:"index"};}return Selectors.Cache.nth[h]=e;},parseSelector:function(e){if(Selectors.Cache.parsed[e]){return Selectors.Cache.parsed[e];
}var d,h={classes:[],pseudos:[],attributes:[]};while((d=Selectors.RegExps.combined.exec(e))){var i=d[1],g=d[2],f=d[3],b=d[5],c=d[6],j=d[7];if(i){h.classes.push(i);
}else{if(c){var a=Selectors.Pseudo.get(c);if(a){h.pseudos.push({parser:a,argument:j});}else{h.attributes.push({name:c,operator:"=",value:j});}}else{if(g){h.attributes.push({name:g,operator:f,value:b});
}}}}if(!h.classes.length){delete h.classes;}if(!h.attributes.length){delete h.attributes;}if(!h.pseudos.length){delete h.pseudos;}if(!h.classes&&!h.attributes&&!h.pseudos){h=null;
}return Selectors.Cache.parsed[e]=h;},parseTagAndID:function(b){var a=b.match(Selectors.RegExps.tag);var c=b.match(Selectors.RegExps.id);return[(a)?a[1]:"*",(c)?c[1]:false];
},filter:function(f,c,e){var d;if(c.classes){for(d=c.classes.length;d--;d){var g=c.classes[d];if(!Selectors.Filters.byClass(f,g)){return false;}}}if(c.attributes){for(d=c.attributes.length;
d--;d){var b=c.attributes[d];if(!Selectors.Filters.byAttribute(f,b.name,b.operator,b.value)){return false;}}}if(c.pseudos){for(d=c.pseudos.length;d--;d){var a=c.pseudos[d];
if(!Selectors.Filters.byPseudo(f,a.parser,a.argument,e)){return false;}}}return true;},getByTagAndID:function(b,a,d){if(d){var c=(b.getElementById)?b.getElementById(d,true):Element.getElementById(b,d,true);
return(c&&Selectors.Filters.byTag(c,a))?[c]:[];}else{return b.getElementsByTagName(a);}},search:function(o,h,t){var b=[];var c=h.trim().replace(Selectors.RegExps.splitter,function(k,j,i){b.push(j);
return":)"+i;}).split(":)");var p,e,A;for(var z=0,v=c.length;z<v;z++){var y=c[z];if(z==0&&Selectors.RegExps.quick.test(y)){p=o.getElementsByTagName(y);
continue;}var a=b[z-1];var q=Selectors.Utils.parseTagAndID(y);var B=q[0],r=q[1];if(z==0){p=Selectors.Utils.getByTagAndID(o,B,r);}else{var d={},g=[];for(var x=0,w=p.length;
x<w;x++){g=Selectors.Getters[a](g,p[x],B,r,d);}p=g;}var f=Selectors.Utils.parseSelector(y);if(f){e=[];for(var u=0,s=p.length;u<s;u++){A=p[u];if(Selectors.Utils.filter(A,f,t)){e.push(A);
}}p=e;}}return p;}};Selectors.Getters={" ":function(h,g,j,a,e){var d=Selectors.Utils.getByTagAndID(g,j,a);for(var c=0,b=d.length;c<b;c++){var f=d[c];if(Selectors.Utils.chk(f,e)){h.push(f);
}}return h;},">":function(h,g,j,a,f){var c=Selectors.Utils.getByTagAndID(g,j,a);for(var e=0,d=c.length;e<d;e++){var b=c[e];if(b.parentNode==g&&Selectors.Utils.chk(b,f)){h.push(b);
}}return h;},"+":function(c,b,a,e,d){while((b=b.nextSibling)){if(b.nodeType==1){if(Selectors.Utils.chk(b,d)&&Selectors.Filters.byTag(b,a)&&Selectors.Filters.byID(b,e)){c.push(b);
}break;}}return c;},"~":function(c,b,a,e,d){while((b=b.nextSibling)){if(b.nodeType==1){if(!Selectors.Utils.chk(b,d)){break;}if(Selectors.Filters.byTag(b,a)&&Selectors.Filters.byID(b,e)){c.push(b);
}}}return c;}};Selectors.Filters={byTag:function(b,a){return(a=="*"||(b.tagName&&b.tagName.toLowerCase()==a));},byID:function(a,b){return(!b||(a.id&&a.id==b));
},byClass:function(b,a){return(b.className&&b.className.contains&&b.className.contains(a," "));},byPseudo:function(a,d,c,b){return d.call(a,c,b);},byAttribute:function(c,d,b,e){var a=Element.prototype.getProperty.call(c,d);
if(!a){return(b=="!=");}if(!b||e==undefined){return true;}switch(b){case"=":return(a==e);case"*=":return(a.contains(e));case"^=":return(a.substr(0,e.length)==e);
case"$=":return(a.substr(a.length-e.length)==e);case"!=":return(a!=e);case"~=":return a.contains(e," ");case"|=":return a.contains(e,"-");}return false;
}};Selectors.Pseudo=new Hash({checked:function(){return this.checked;},empty:function(){return !(this.innerText||this.textContent||"").length;},not:function(a){return !Element.match(this,a);
},contains:function(a){return(this.innerText||this.textContent||"").contains(a);},"first-child":function(){return Selectors.Pseudo.index.call(this,0);},"last-child":function(){var a=this;
while((a=a.nextSibling)){if(a.nodeType==1){return false;}}return true;},"only-child":function(){var b=this;while((b=b.previousSibling)){if(b.nodeType==1){return false;
}}var a=this;while((a=a.nextSibling)){if(a.nodeType==1){return false;}}return true;},"nth-child":function(g,e){g=(g==undefined)?"n":g;var c=Selectors.Utils.parseNthArgument(g);
if(c.special!="n"){return Selectors.Pseudo[c.special].call(this,c.a,e);}var f=0;e.positions=e.positions||{};var d=$uid(this);if(!e.positions[d]){var b=this;
while((b=b.previousSibling)){if(b.nodeType!=1){continue;}f++;var a=e.positions[$uid(b)];if(a!=undefined){f=a+f;break;}}e.positions[d]=f;}return(e.positions[d]%c.a==c.b);
},index:function(a){var b=this,c=0;while((b=b.previousSibling)){if(b.nodeType==1&&++c>a){return false;}}return(c==a);},even:function(b,a){return Selectors.Pseudo["nth-child"].call(this,"2n+1",a);
},odd:function(b,a){return Selectors.Pseudo["nth-child"].call(this,"2n",a);},selected:function(){return this.selected;},enabled:function(){return(this.disabled===false);
}});Element.Events.domready={onAdd:function(a){if(Browser.loaded){a.call(this);}}};(function(){var b=function(){if(Browser.loaded){return;}Browser.loaded=true;
window.fireEvent("domready");document.fireEvent("domready");};window.addEvent("load",b);if(Browser.Engine.trident){var a=document.createElement("div");
(function(){($try(function(){a.doScroll();return document.id(a).inject(document.body).set("html","temp").dispose();}))?b():arguments.callee.delay(50);})();
}else{if(Browser.Engine.webkit&&Browser.Engine.version<525){(function(){(["loaded","complete"].contains(document.readyState))?b():arguments.callee.delay(50);
})();}else{document.addEvent("DOMContentLoaded",b);}}})();var JSON=new Hash(this.JSON&&{stringify:JSON.stringify,parse:JSON.parse}).extend({$specialChars:{"\b":"\\b","\t":"\\t","\n":"\\n","\f":"\\f","\r":"\\r",'"':'\\"',"\\":"\\\\"},$replaceChars:function(a){return JSON.$specialChars[a]||"\\u00"+Math.floor(a.charCodeAt()/16).toString(16)+(a.charCodeAt()%16).toString(16);
},encode:function(b){switch($type(b)){case"string":return'"'+b.replace(/[\x00-\x1f\\"]/g,JSON.$replaceChars)+'"';case"array":return"["+String(b.map(JSON.encode).clean())+"]";
case"object":case"hash":var a=[];Hash.each(b,function(e,d){var c=JSON.encode(e);if(c){a.push(JSON.encode(d)+":"+c);}});return"{"+a+"}";case"number":case"boolean":return String(b);
case false:return"null";}return null;},decode:function(string,secure){if($type(string)!="string"||!string.length){return null;}if(secure&&!(/^[,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]*$/).test(string.replace(/\\./g,"@").replace(/"[^"\\\n\r]*"/g,""))){return null;
}return eval("("+string+")");}});Native.implement([Hash,Array,String,Number],{toJSON:function(){return JSON.encode(this);}});var Cookie=new Class({Implements:Options,options:{path:false,domain:false,duration:false,secure:false,document:document},initialize:function(b,a){this.key=b;
this.setOptions(a);},write:function(b){b=encodeURIComponent(b);if(this.options.domain){b+="; domain="+this.options.domain;}if(this.options.path){b+="; path="+this.options.path;
}if(this.options.duration){var a=new Date();a.setTime(a.getTime()+this.options.duration*24*60*60*1000);b+="; expires="+a.toGMTString();}if(this.options.secure){b+="; secure";
}this.options.document.cookie=this.key+"="+b;return this;},read:function(){var a=this.options.document.cookie.match("(?:^|;)\\s*"+this.key.escapeRegExp()+"=([^;]*)");
return(a)?decodeURIComponent(a[1]):null;},dispose:function(){new Cookie(this.key,$merge(this.options,{duration:-1})).write("");return this;}});Cookie.write=function(b,c,a){return new Cookie(b,a).write(c);
};Cookie.read=function(a){return new Cookie(a).read();};Cookie.dispose=function(b,a){return new Cookie(b,a).dispose();};var Swiff=new Class({Implements:[Options],options:{id:null,height:1,width:1,container:null,properties:{},params:{quality:"high",allowScriptAccess:"always",wMode:"transparent",swLiveConnect:true},callBacks:{},vars:{}},toElement:function(){return this.object;
},initialize:function(l,m){this.instance="Swiff_"+$time();this.setOptions(m);m=this.options;var b=this.id=m.id||this.instance;var a=document.id(m.container);
Swiff.CallBacks[this.instance]={};var e=m.params,g=m.vars,f=m.callBacks;var h=$extend({height:m.height,width:m.width},m.properties);var k=this;for(var d in f){Swiff.CallBacks[this.instance][d]=(function(n){return function(){return n.apply(k.object,arguments);
};})(f[d]);g[d]="Swiff.CallBacks."+this.instance+"."+d;}e.flashVars=Hash.toQueryString(g);if(Browser.Engine.trident){h.classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000";
e.movie=l;}else{h.type="application/x-shockwave-flash";h.data=l;}var j='<object id="'+b+'"';for(var i in h){j+=" "+i+'="'+h[i]+'"';}j+=">";for(var c in e){if(e[c]){j+='<param name="'+c+'" value="'+e[c]+'" />';
}}j+="</object>";this.object=((a)?a.empty():new Element("div")).set("html",j).firstChild;},replaces:function(a){a=document.id(a,true);a.parentNode.replaceChild(this.toElement(),a);
return this;},inject:function(a){document.id(a,true).appendChild(this.toElement());return this;},remote:function(){return Swiff.remote.apply(Swiff,[this.toElement()].extend(arguments));
}});Swiff.CallBacks={};Swiff.remote=function(obj,fn){var rs=obj.CallFunction('<invoke name="'+fn+'" returntype="javascript">'+__flash__argumentsToXML(arguments,2)+"</invoke>");
return eval(rs);};var Fx=new Class({Implements:[Chain,Events,Options],options:{fps:50,unit:false,duration:500,link:"ignore"},initialize:function(a){this.subject=this.subject||this;
this.setOptions(a);this.options.duration=Fx.Durations[this.options.duration]||this.options.duration.toInt();var b=this.options.wait;if(b===false){this.options.link="cancel";
}},getTransition:function(){return function(a){return -(Math.cos(Math.PI*a)-1)/2;};},step:function(){var a=$time();if(a<this.time+this.options.duration){var b=this.transition((a-this.time)/this.options.duration);
this.set(this.compute(this.from,this.to,b));}else{this.set(this.compute(this.from,this.to,1));this.complete();}},set:function(a){return a;},compute:function(c,b,a){return Fx.compute(c,b,a);
},check:function(){if(!this.timer){return true;}switch(this.options.link){case"cancel":this.cancel();return true;case"chain":this.chain(this.caller.bind(this,arguments));
return false;}return false;},start:function(b,a){if(!this.check(b,a)){return this;}this.from=b;this.to=a;this.time=0;this.transition=this.getTransition();
this.startTimer();this.onStart();return this;},complete:function(){if(this.stopTimer()){this.onComplete();}return this;},cancel:function(){if(this.stopTimer()){this.onCancel();
}return this;},onStart:function(){this.fireEvent("start",this.subject);},onComplete:function(){this.fireEvent("complete",this.subject);if(!this.callChain()){this.fireEvent("chainComplete",this.subject);
}},onCancel:function(){this.fireEvent("cancel",this.subject).clearChain();},pause:function(){this.stopTimer();return this;},resume:function(){this.startTimer();
return this;},stopTimer:function(){if(!this.timer){return false;}this.time=$time()-this.time;this.timer=$clear(this.timer);return true;},startTimer:function(){if(this.timer){return false;
}this.time=$time()-this.time;this.timer=this.step.periodical(Math.round(1000/this.options.fps),this);return true;}});Fx.compute=function(c,b,a){return(b-c)*a+c;
};Fx.Durations={"short":250,normal:500,"long":1000};Fx.CSS=new Class({Extends:Fx,prepare:function(d,e,b){b=$splat(b);var c=b[1];if(!$chk(c)){b[1]=b[0];
b[0]=d.getStyle(e);}var a=b.map(this.parse);return{from:a[0],to:a[1]};},parse:function(a){a=$lambda(a)();a=(typeof a=="string")?a.split(" "):$splat(a);
return a.map(function(c){c=String(c);var b=false;Fx.CSS.Parsers.each(function(f,e){if(b){return;}var d=f.parse(c);if($chk(d)){b={value:d,parser:f};}});
b=b||{value:c,parser:Fx.CSS.Parsers.String};return b;});},compute:function(d,c,b){var a=[];(Math.min(d.length,c.length)).times(function(e){a.push({value:d[e].parser.compute(d[e].value,c[e].value,b),parser:d[e].parser});
});a.$family={name:"fx:css:value"};return a;},serve:function(c,b){if($type(c)!="fx:css:value"){c=this.parse(c);}var a=[];c.each(function(d){a=a.concat(d.parser.serve(d.value,b));
});return a;},render:function(a,d,c,b){a.setStyle(d,this.serve(c,b));},search:function(a){if(Fx.CSS.Cache[a]){return Fx.CSS.Cache[a];}var b={};Array.each(document.styleSheets,function(e,d){var c=e.href;
if(c&&c.contains("://")&&!c.contains(document.domain)){return;}var f=e.rules||e.cssRules;Array.each(f,function(j,g){if(!j.style){return;}var h=(j.selectorText)?j.selectorText.replace(/^\w+/,function(i){return i.toLowerCase();
}):null;if(!h||!h.test("^"+a+"$")){return;}Element.Styles.each(function(k,i){if(!j.style[i]||Element.ShortStyles[i]){return;}k=String(j.style[i]);b[i]=(k.test(/^rgb/))?k.rgbToHex():k;
});});});return Fx.CSS.Cache[a]=b;}});Fx.CSS.Cache={};Fx.CSS.Parsers=new Hash({Color:{parse:function(a){if(a.match(/^#[0-9a-f]{3,6}$/i)){return a.hexToRgb(true);
}return((a=a.match(/(\d+),\s*(\d+),\s*(\d+)/)))?[a[1],a[2],a[3]]:false;},compute:function(c,b,a){return c.map(function(e,d){return Math.round(Fx.compute(c[d],b[d],a));
});},serve:function(a){return a.map(Number);}},Number:{parse:parseFloat,compute:Fx.compute,serve:function(b,a){return(a)?b+a:b;}},String:{parse:$lambda(false),compute:$arguments(1),serve:$arguments(0)}});
Fx.Tween=new Class({Extends:Fx.CSS,initialize:function(b,a){this.element=this.subject=document.id(b);this.parent(a);},set:function(b,a){if(arguments.length==1){a=b;
b=this.property||this.options.property;}this.render(this.element,b,a,this.options.unit);return this;},start:function(c,e,d){if(!this.check(c,e,d)){return this;
}var b=Array.flatten(arguments);this.property=this.options.property||b.shift();var a=this.prepare(this.element,this.property,b);return this.parent(a.from,a.to);
}});Element.Properties.tween={set:function(a){var b=this.retrieve("tween");if(b){b.cancel();}return this.eliminate("tween").store("tween:options",$extend({link:"cancel"},a));
},get:function(a){if(a||!this.retrieve("tween")){if(a||!this.retrieve("tween:options")){this.set("tween",a);}this.store("tween",new Fx.Tween(this,this.retrieve("tween:options")));
}return this.retrieve("tween");}};Element.implement({tween:function(a,c,b){this.get("tween").start(arguments);return this;},fade:function(c){var e=this.get("tween"),d="opacity",a;
c=$pick(c,"toggle");switch(c){case"in":e.start(d,1);break;case"out":e.start(d,0);break;case"show":e.set(d,1);break;case"hide":e.set(d,0);break;case"toggle":var b=this.retrieve("fade:flag",this.get("opacity")==1);
e.start(d,(b)?0:1);this.store("fade:flag",!b);a=true;break;default:e.start(d,arguments);}if(!a){this.eliminate("fade:flag");}return this;},highlight:function(c,a){if(!a){a=this.retrieve("highlight:original",this.getStyle("background-color"));
a=(a=="transparent")?"#fff":a;}var b=this.get("tween");b.start("background-color",c||"#ffff88",a).chain(function(){this.setStyle("background-color",this.retrieve("highlight:original"));
b.callChain();}.bind(this));return this;}});Fx.Morph=new Class({Extends:Fx.CSS,initialize:function(b,a){this.element=this.subject=document.id(b);this.parent(a);
},set:function(a){if(typeof a=="string"){a=this.search(a);}for(var b in a){this.render(this.element,b,a[b],this.options.unit);}return this;},compute:function(e,d,c){var a={};
for(var b in e){a[b]=this.parent(e[b],d[b],c);}return a;},start:function(b){if(!this.check(b)){return this;}if(typeof b=="string"){b=this.search(b);}var e={},d={};
for(var c in b){var a=this.prepare(this.element,c,b[c]);e[c]=a.from;d[c]=a.to;}return this.parent(e,d);}});Element.Properties.morph={set:function(a){var b=this.retrieve("morph");
if(b){b.cancel();}return this.eliminate("morph").store("morph:options",$extend({link:"cancel"},a));},get:function(a){if(a||!this.retrieve("morph")){if(a||!this.retrieve("morph:options")){this.set("morph",a);
}this.store("morph",new Fx.Morph(this,this.retrieve("morph:options")));}return this.retrieve("morph");}};Element.implement({morph:function(a){this.get("morph").start(a);
return this;}});Fx.implement({getTransition:function(){var a=this.options.transition||Fx.Transitions.Sine.easeInOut;if(typeof a=="string"){var b=a.split(":");
a=Fx.Transitions;a=a[b[0]]||a[b[0].capitalize()];if(b[1]){a=a["ease"+b[1].capitalize()+(b[2]?b[2].capitalize():"")];}}return a;}});Fx.Transition=function(b,a){a=$splat(a);
return $extend(b,{easeIn:function(c){return b(c,a);},easeOut:function(c){return 1-b(1-c,a);},easeInOut:function(c){return(c<=0.5)?b(2*c,a)/2:(2-b(2*(1-c),a))/2;
}});};Fx.Transitions=new Hash({linear:$arguments(0)});Fx.Transitions.extend=function(a){for(var b in a){Fx.Transitions[b]=new Fx.Transition(a[b]);}};Fx.Transitions.extend({Pow:function(b,a){return Math.pow(b,a[0]||6);
},Expo:function(a){return Math.pow(2,8*(a-1));},Circ:function(a){return 1-Math.sin(Math.acos(a));},Sine:function(a){return 1-Math.sin((1-a)*Math.PI/2);
},Back:function(b,a){a=a[0]||1.618;return Math.pow(b,2)*((a+1)*b-a);},Bounce:function(f){var e;for(var d=0,c=1;1;d+=c,c/=2){if(f>=(7-4*d)/11){e=c*c-Math.pow((11-6*d-11*f)/4,2);
break;}}return e;},Elastic:function(b,a){return Math.pow(2,10*--b)*Math.cos(20*b*Math.PI*(a[0]||1)/3);}});["Quad","Cubic","Quart","Quint"].each(function(b,a){Fx.Transitions[b]=new Fx.Transition(function(c){return Math.pow(c,[a+2]);
});});var Request=new Class({Implements:[Chain,Events,Options],options:{url:"",data:"",headers:{"X-Requested-With":"XMLHttpRequest",Accept:"text/javascript, text/html, application/xml, text/xml, */*"},async:true,format:false,method:"post",link:"ignore",isSuccess:null,emulation:true,urlEncoded:true,encoding:"utf-8",evalScripts:false,evalResponse:false,noCache:false},initialize:function(a){this.xhr=new Browser.Request();
this.setOptions(a);this.options.isSuccess=this.options.isSuccess||this.isSuccess;this.headers=new Hash(this.options.headers);},onStateChange:function(){if(this.xhr.readyState!=4||!this.running){return;
}this.running=false;this.status=0;$try(function(){this.status=this.xhr.status;}.bind(this));this.xhr.onreadystatechange=$empty;if(this.options.isSuccess.call(this,this.status)){this.response={text:this.xhr.responseText,xml:this.xhr.responseXML};
this.success(this.response.text,this.response.xml);}else{this.response={text:null,xml:null};this.failure();}},isSuccess:function(){return((this.status>=200)&&(this.status<300));
},processScripts:function(a){if(this.options.evalResponse||(/(ecma|java)script/).test(this.getHeader("Content-type"))){return $exec(a);}return a.stripScripts(this.options.evalScripts);
},success:function(b,a){this.onSuccess(this.processScripts(b),a);},onSuccess:function(){this.fireEvent("complete",arguments).fireEvent("success",arguments).callChain();
},failure:function(){this.onFailure();},onFailure:function(){this.fireEvent("complete").fireEvent("failure",this.xhr);},setHeader:function(a,b){this.headers.set(a,b);
return this;},getHeader:function(a){return $try(function(){return this.xhr.getResponseHeader(a);}.bind(this));},check:function(){if(!this.running){return true;
}switch(this.options.link){case"cancel":this.cancel();return true;case"chain":this.chain(this.caller.bind(this,arguments));return false;}return false;},send:function(k){if(!this.check(k)){return this;
}this.running=true;var i=$type(k);if(i=="string"||i=="element"){k={data:k};}var d=this.options;k=$extend({data:d.data,url:d.url,method:d.method},k);var g=k.data,b=String(k.url),a=k.method.toLowerCase();
switch($type(g)){case"element":g=document.id(g).toQueryString();break;case"object":case"hash":g=Hash.toQueryString(g);}if(this.options.format){var j="format="+this.options.format;
g=(g)?j+"&"+g:j;}if(this.options.emulation&&!["get","post"].contains(a)){var h="_method="+a;g=(g)?h+"&"+g:h;a="post";}if(this.options.urlEncoded&&a=="post"){var c=(this.options.encoding)?"; charset="+this.options.encoding:"";
this.headers.set("Content-type","application/x-www-form-urlencoded"+c);}if(this.options.noCache){var f="noCache="+new Date().getTime();g=(g)?f+"&"+g:f;
}var e=b.lastIndexOf("/");if(e>-1&&(e=b.indexOf("#"))>-1){b=b.substr(0,e);}if(g&&a=="get"){b=b+(b.contains("?")?"&":"?")+g;g=null;}this.xhr.open(a.toUpperCase(),b,this.options.async);
this.xhr.onreadystatechange=this.onStateChange.bind(this);this.headers.each(function(m,l){try{this.xhr.setRequestHeader(l,m);}catch(n){this.fireEvent("exception",[l,m]);
}},this);this.fireEvent("request");this.xhr.send(g);if(!this.options.async){this.onStateChange();}return this;},cancel:function(){if(!this.running){return this;
}this.running=false;this.xhr.abort();this.xhr.onreadystatechange=$empty;this.xhr=new Browser.Request();this.fireEvent("cancel");return this;}});(function(){var a={};
["get","post","put","delete","GET","POST","PUT","DELETE"].each(function(b){a[b]=function(){var c=Array.link(arguments,{url:String.type,data:$defined});
return this.send($extend(c,{method:b}));};});Request.implement(a);})();Element.Properties.send={set:function(a){var b=this.retrieve("send");if(b){b.cancel();
}return this.eliminate("send").store("send:options",$extend({data:this,link:"cancel",method:this.get("method")||"post",url:this.get("action")},a));},get:function(a){if(a||!this.retrieve("send")){if(a||!this.retrieve("send:options")){this.set("send",a);
}this.store("send",new Request(this.retrieve("send:options")));}return this.retrieve("send");}};Element.implement({send:function(a){var b=this.get("send");
b.send({data:this,url:a||b.options.url});return this;}});Request.HTML=new Class({Extends:Request,options:{update:false,append:false,evalScripts:true,filter:false},processHTML:function(c){var b=c.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
c=(b)?b[1]:c;var a=new Element("div");return $try(function(){var d="<root>"+c+"</root>",g;if(Browser.Engine.trident){g=new ActiveXObject("Microsoft.XMLDOM");
g.async=false;g.loadXML(d);}else{g=new DOMParser().parseFromString(d,"text/xml");}d=g.getElementsByTagName("root")[0];if(!d){return null;}for(var f=0,e=d.childNodes.length;
f<e;f++){var h=Element.clone(d.childNodes[f],true,true);if(h){a.grab(h);}}return a;})||a.set("html",c);},success:function(d){var c=this.options,b=this.response;
b.html=d.stripScripts(function(e){b.javascript=e;});var a=this.processHTML(b.html);b.tree=a.childNodes;b.elements=a.getElements("*");if(c.filter){b.tree=b.elements.filter(c.filter);
}if(c.update){document.id(c.update).empty().set("html",b.html);}else{if(c.append){document.id(c.append).adopt(a.getChildren());}}if(c.evalScripts){$exec(b.javascript);
}this.onSuccess(b.tree,b.elements,b.html,b.javascript);}});Element.Properties.load={set:function(a){var b=this.retrieve("load");if(b){b.cancel();}return this.eliminate("load").store("load:options",$extend({data:this,link:"cancel",update:this,method:"get"},a));
},get:function(a){if(a||!this.retrieve("load")){if(a||!this.retrieve("load:options")){this.set("load",a);}this.store("load",new Request.HTML(this.retrieve("load:options")));
}return this.retrieve("load");}};Element.implement({load:function(){this.get("load").send(Array.link(arguments,{data:Object.type,url:String.type}));return this;
}});Request.JSON=new Class({Extends:Request,options:{secure:true},initialize:function(a){this.parent(a);this.headers.extend({Accept:"application/json","X-Request":"JSON"});
},success:function(a){this.response.json=JSON.decode(a,this.options.secure);this.onSuccess(this.response.json,a);}});
function Gradient(stop1_hex, stop2_hex, num){
// stop1 and stop2 must be strings that rep hex color vals.
stop1_hex = stop1_hex.replace("#","").toUpperCase();
stop2_hex = stop2_hex.replace("#","").toUpperCase();

var stops = new Array(num),
stop1_rgb = {r:0,g:0,b:0},
stop2_rgb = {r:0,g:0,b:0},
steps = {r:0,g:0,b:0},
i,r,g,b;

//parse the two input strings into rgb values
stop1_rgb.r = parseInt(stop1_hex.substr(0,2),16);
stop1_rgb.g = parseInt(stop1_hex.substr(2,2),16);
stop1_rgb.b = parseInt(stop1_hex.substr(4,2),16);

stop2_rgb.r = parseInt(stop2_hex.substr(0,2),16);
stop2_rgb.g = parseInt(stop2_hex.substr(2,2),16);
stop2_rgb.b = parseInt(stop2_hex.substr(4,2),16);

steps.r = (stop2_rgb.r - stop1_rgb.r)/num;
steps.g = (stop2_rgb.g - stop1_rgb.g)/num;
steps.b = (stop2_rgb.b - stop1_rgb.b)/num;

stops[0] = "#"+stop1_hex;

for(i=1; i<num-1; i++){
r = Math.round(stop1_rgb.r+(i*steps.r)).toString(16);
g = Math.round(stop1_rgb.g+(i*steps.g)).toString(16);
b = Math.round(stop1_rgb.b+(i*steps.b)).toString(16);

r = (r.length != 2)?"0"+r:r;
g = (g.length != 2)?"0"+g:g;
b = (b.length != 2)?"0"+b:b;

stops[i] = "#"+(r+g+b).toUpperCase();
}

stops[num-1] = "#"+stop2_hex;
return stops;
}


var Set = function(set){
this.set = 0;
this.length = 0;
if (set instanceof Array){
this.add(set);
}else if (set){
this.set = set;
this.length = this.calcLength();
}
};
Set.prototype = {
clear: function(args){
this.set = 0;
this.length = 0;
if (args) this.add(args);
return this;
},

add: function(args){
args = (args instanceof Array) ? args : [args];
args.each(function(num){
if (this.contains(num)) return;
this.set |= 1 << (num - 1);
this.length++;
}, this);

return this;
},

remove: function(args){
args = (args instanceof Array) ? args : [args];
args.each(function(num){
if (!this.contains(num)) return;
this.set &= ~(1 << (num - 1));
this.length--;
}, this);

return this;
},

contains: function(num){
return !!(this.set & 1 << (num - 1));
},

union: function(other, inplace){
return this.finish(this.set | other.set, inplace);
},

intersection: function(other, inplace){
return this.finish(this.set & other.set, inplace);
},

difference: function(other, inplace){
return this.finish(this.set & (~other.set), inplace);
},

equals: function(other){
return (this.set == other.set);
},

calcLength: function(){
return this.toArray().length;
},

finish: function(set, inplace){
if (inplace){
this.set = set;
this.length = this.calcLength();
return this;
} else return new Set(set);
},

toString: function(sep){
return this.toArray().join(sep || "");
},

toArray: function(){
var set = this.set,
array = [];

for (var i = 0; set; i++, set >>= 1)
if((set & 1) == 1) array.push(i + 1);

return array;
}
};
window.addEvent('domready', function(){
var sudoku = Sudoku();

document.addEvent('keydown', function(e){
return sudoku.keyStroke(e.code);
});

document.id('sudoku').getElements('td').each(function(td){
if (td.get('id')) td.addEvent('click', function(){
sudoku.setSelected(+this.id.charAt(1), +this.id.charAt(2));
});
});
});

var Sudoku = function(){
// private variables:
var _cell,
_candidates, // 2d array that will conatain all the markup information
_masks, // a quick hash to help ident. blocks, rows and col.
bar_gradient = Gradient('F08080','90EE90',101),
selected_row = 1, // the current row that is selected.
selected_col = 1, // the current col that is selected.
keyCodes, // an array of acceptible keycodes.
demo_timer,
demo_frame,
demo_keys, // an array that will store all the demo keystrokes.

// private methods:
// methods for user interaction (key press and mouse events):
keyPressed = function(c){
switch(c){
case "backspace":
backspace();
solve();
break;

case "left":
moveSelected(selected_row, (selected_col == 1) ? 9 : selected_col - 1);
break;

case "up":
moveSelected((selected_row == 1) ? 9 : selected_row - 1, selected_col);
break;

case "right":
moveSelected(selected_row, (selected_col == 9) ? 1 : selected_col + 1);
break;

case "down":
moveSelected((selected_row == 9) ? 1 : selected_row + 1, selected_col);
break;

case "1": case "2": case "3": case "4": case "5":
case "6": case "7": case "8": case "9":
writeNumberToSelected(c);
solve();
break;

case "c":
clear();
break;

case "d":
toggleDemo();
break;
}
},

moveSelected = function(i, j){
_cell[selected_row][selected_col].removeClass("selected");
selected_row = i;
selected_col = j;
_cell[selected_row][selected_col].addClass("selected");
},

backspace = function(){
_cell[selected_row][selected_col].removeClass('user-defined').erase('html');
},

writeNumberToSelected = function(num){
_cell[selected_row][selected_col].set({
'class': 'user-defined selected',
'html': num
});
},


// methods for when the demo is run.
// just continuous step through an array
// containing the keystrokes for the demo.
stepDemo = function(){
if (demo_frame < current_demo.length)
keyPressed(keyCodes[current_demo[demo_frame++]]);
else stopDemo();
},

toggleDemo = function(){
if (!demo_timer){
stopDemo();
clear();
current_demo = demo_keys[Math.floor(Math.random()*demo_keys.length)];
demo_frame = 0;
demo_timer = setInterval(stepDemo, 150);
} else stopDemo();
},

stopDemo = function(){
if (demo_timer) clearInterval(demo_timer);
demo_timer = null;
},

isDemoRunning = function(){
return !!demo_timer;
},

solve = function(){
if (initialize()){
while(findCandidates());
errors();
}
output();
return;
},

initialize = function(){
for (var i = 1; i < 10; i++){
for (var j = 1; j < 10; j++){
var cell = _cell[i][j],
candidates = _candidates[i][j];

if (cell.hasClass('user-defined')) candidates.clear(+cell.get('html'));
else candidates.add([1, 2, 3, 4, 5, 6, 7, 8, 9]);

cell.erase('html');
}
}
return !errors();
},

output = function(){
var solved = 0,
cell,
candidates,
num_candidates,
contents;

for (var i = 1; i < 10; i++){
for (var j = 1; j < 10; j++){
cell = _cell[i][j];
cell.erase('html');
candidates = _candidates[i][j];
num_candidates = candidates.length;

if (num_candidates == 1){
cell.set('html', candidates.toString(""));
solved++;
} else {
contents = "";
candidates = candidates.toArray();

for (var k = 1, l = 0; k <= 9; k++){
if (candidates[l] == k) contents += candidates[l++].toString();
else contents += " ";

contents += (k % 3 == 0) ? '\n' : ' ';
}

new Element("pre", {'text': contents}).inject(cell);
}
}
}

solved = Math.round((solved/81)*100);
setBar(solved);

},

errors = function(){
var i, j,
error = false;

var check = function(mask){
var unique = new Set(),
count = 0,
candidates, result;

result = mask.some(function(info){
candidates = info.candidates;
if (candidates.length == 1){
unique = unique.union(candidates);
count++;
}
if (unique.length != count) return true;
else return false;
});

if (result) for (var i = 0; i < 9; i++)
mask[i].cell.addClass('error');

return result;
};

// first clear all the previous errors
for(i = 1; i <= 9; i++)
for(j = 1; j <= 9; j++)
_cell[i][j].removeClass("error");

for(i = 1; i <= 3; i++)
for(j = 1; j <= 3; j++)
error = check(_masks['blocks'][i][j]) || error;

for(i = 1; i <= 9; i++)
error = check(_masks['rows'][i]) || check(_masks['cols'][i]) || error;

return error;
},

findCandidates = function(){
// return true of a change has occured false otherwise.

var types = ['blocks', 'rows', 'cols'],
fns = [cleanUp, singles, nakedPairs, nakedTriples, hiddenPairs, hiddenTriples],
changed = false;

changed = fns.some(function(fn){
return types.some(function(type){
return run(type, fn);
});
});

if (changed) return true;

if (pointingPairs()) return true;

return false;
},

run = function(type, funct){
var changed = false,
i, j;

if (type == 'blocks')
for (i = 1; i <= 3; i++)
for (j = 1; j <= 3; j++)
changed = funct(_masks[type][i][j]) || changed;
else for (i = 1; i <= 9; i++)
changed = funct(_masks[type][i]) || changed;

return changed;
},

cleanUp = function(mask){
var removed = new Set(),
changed = false,
candidates, length, i;

for (i = 0; i < 9; i++)
if (mask[i].candidates.length == 1)
removed = removed.union(mask[i].candidates);

for (i = 0; i < 9; i++){
candidates = mask[i].candidates;
length = candidates.length;
if (length != 1){
candidates.difference(removed, true);
changed = (candidates.length != length) || changed;
}
}

return changed;
},

singles = function(mask){
var changed = false,
pointer, candidates,
count, result;

for (var n = 1; n <= 9; n++){
count = 0;

for (var i = 0; i < 9; i++){
candidates = mask[i].candidates;

if (candidates.length != 1 && candidates.contains(n)){
pointer = candidates;
count++;
}

if (count > 1) break;
}

if (count == 1){
pointer.clear(n);
changed = true;
}
}

return changed;
},

nakedPairs = function(mask){
var changed = false,
candidates, i_candidates, j_candidates;

for (var i = 0; i < 8; i++){ // try every combination
i_candidates = mask[i].candidates;
if (i_candidates.length != 2) continue;

for (var j = i + 1; j < 9; j++){
j_candidates = mask[j].candidates;
if (j_candidates.length != 2 || !i_candidates.equals(j_candidates)) continue;

for (var k = 0; k < 9; k++){
candidates = mask[k].candidates;
if (k == i || k == j || candidates.length <= 2) continue;

if (candidates.intersection(i_candidates).length != 0){
changed = true;
candidates.difference(i_candidates, true);
}
}
}
}

return changed;
},

nakedTriples = function(mask){
var changed = false,
candidates, i_candidates, j_candidates, k_candidates,
triple;

for (i = 0; i < 7; i++){
i_candidates = mask[i].candidates;
if (i_candidates.length < 2) continue;

for (j = i + 1; j < 8; j++){
j_candidates = mask[j].candidates;
if (j_candidates.length < 2) continue;

for (k = j + 1; k < 9; k++){
k_candidates = mask[k].candidates;
if (k_candidates.length < 2) continue;

triple = i_candidates.union(j_candidates.union(k_candidates));
if (triple.length != 3) continue;

for (var l = 0; l < 9; l++){
candidates = mask[l].candidates;
if (l == i || l == j || l == k || candidates.length < 2) continue;

if (candidates.intersection(triple).length != 0){
changed = true;
candidates.difference(triple, true);
}
}
}
}
}

return changed;
},

hiddenPairs = function(mask){
var changed = false,
positions = [],
candidates, n, m, j;

for (n = 1; n <= 9; n++){
positions[n] = new Set();

for (j = 0; j < 9; j++){
candidates = mask[j].candidates;

if (candidates.length != 1 && candidates.contains(n))
positions[n].add(j + 1);
}
}

for (n = 1; n <= 8; n++){
if (positions[n].length != 2) continue;

for (m = n + 1; m <= 9; m++){
if (!positions[n].equals(positions[m])) continue;

for (j = 0; j < 9; j++){
candidates = mask[j].candidates;

if (positions[n].contains(j + 1) && candidates.length > 2){
changed = true;
candidates.intersection(new Set([n, m]), true);
}
}
}
}

return changed;
},

hiddenTriples = function(mask){
var changed = false,
positions = [],
candidates, triple, jp1,
testn, testm, testl,
n, m, l, j;

for (n = 1; n <= 9; n++){
positions[n] = new Set();

for (j = 0; j < 9; j++){
candidates = mask[j].candidates;

if (candidates.length != 1 && candidates.contains(n))
positions[n].add(j + 1);
}
}

for (n = 1; n <= 7; n++){
if (positions[n].length <= 1) continue;

for (m = n + 1; m <= 8; m++){
if (positions[m].length <= 1) continue;

for (l = m + 1; l <= 9; l++){
if (positions[l].length <= 1) continue;

triple = positions[n].union(positions[m].union(positions[l]));
if (triple.length != 3) continue;

for (j = 0; j < 9; j++){
candidates = mask[j].candidates;
testn = positions[n].contains(j + 1);
testm = positions[m].contains(j + 1);
testl = positions[l].contains(j + 1);

if (candidates.length > 1 && (testn || testm || testl) && (candidates.length > (testn + testm + testl))){
changed = true;
candidates.intersection(new Set([n, m, l]), true);
}
}

}
}
}

return changed;
},

pointingPairs = function(){
var rows = [],
cols = [],
pointers, mask;

for (var I = 1; I <= 3; I++){ // foreach block
for (var J = 1; J <= 3; J++){
mask = _masks['blocks'][I][J];

for (var n = 1; n <= 9; n++){
pointers = [];

for (var i = 0; i < 9; i++){
var info = mask[i],
candidates = info.candidates,
contains = candidates.contains(n);

if (contains && candidates.legnth == 1) break;

if (contains){
pointers.push(info.coords);
if (pointers.length > 3) break;
}
} // for each cell

pointers_length = pointers.length;

if (candidates.legnth == 1 && contains) continue;
if (pointers_length < 2 || pointers_length > 3) continue;
var obj = {'n': n, 'pointers': pointers};

if (pointers_length == 2){
if (pointers[0].i == pointers[1].i)
rows.push(obj);
else if (pointers[0].j == pointers[1].j)
cols.push(obj);
} else {
if (pointers[0].i == pointers[1].i && pointers[1].i == pointers[2].i){
rows.push(obj);
} else if (pointers[0].j == pointers[1].j && pointers[1].j == pointers[2].j){
cols.push(obj);
}
}

} // for 1 - 9
}
} // for each block

if (rows.length == 0 && cols.length == 0) return false;

var clean = function(pairs, type){
var changed = false,
coord = (type == 'rows') ? 'i' : 'j',
icoord = (type == 'rows') ? 'j' : 'i',
n, min_index, max_index,
mask, candidates, index;

for (var i = 0; i < pairs.length; i++){
n = pairs[i].n;
pointers = pairs[i].pointers;
mask = _masks[type][pointers[0][coord]];
min_index = 10; max_index = -1;

for (var k = 0; k < pointers.length; k++){
min_index = Math.min(pointers[k][icoord], min_index);
max_index = Math.max(pointers[k][icoord], max_index);
}

for (var j = 0; j < 9; j++){
candidates = mask[j].candidates;
index = mask[j].coords[icoord];

if ((index < min_index || index > max_index) && candidates.contains(n)){
candidates.remove(n);
changed = true;
}
}
}
return changed;
};

return clean(rows, 'rows') || clean(cols, 'cols');
},

clear = function(){
stopDemo();
setBar(0);
for(var i = 1; i <= 9; i++)
for(var j = 1; j <= 9; j++)
_cell[i][j].set({'class': '', 'html': ''});

moveSelected(1,1);
},

setBar = function(percentage){
document.id('bar').setStyles({
'width': percentage + "%",
'background-color': bar_gradient[percentage]

});
},

toString = function(){
var string = "",
candidates, is_user;

for (var i = 1; i <= 9; i++){
for (var j = 1; j <= 9; j++){
candidates = _candidates[i][j];
is_user = _cell[i][j].hasClass('user-defined');
if (candidates.length == 1 && is_user) string += candidates.toString();
else string += "0";
}
}
return string;
},

fromString = function(string){
string.replace(/^\s|\s$/, ''); // trim

var regex = /[1-9]/,
string_length = string.length,
index, number;

clear();

for (var i = 1; i <= 9; i++){
for (var j = 1; j <= 9; j++){
number = string.charAt((j - 1) + ((i - 1)*9));
if (regex.test(number)){
moveSelected(i,j);
writeNumberToSelected(number);
}
}
}

solve();
};

// initialize the hell out of everything
var i, j, I, J;

_cell = [];
_candidates = [];
for (i = 1; i <= 9; i++){
_cell[i] = [];
_candidates[i] = [];
for (j = 1; j <= 9; j++){
_cell[i][j] = document.id("c" + i.toString() + j.toString());
_candidates[i][j] = new Set();
}
}

_masks = [];
_masks['rows'] = [];
_masks['cols'] = [];
for (i = 1; i <= 9; i++){
_masks['rows'][i] = [];
_masks['cols'][i] = [];

for (j = 1; j <= 9; j++){
_masks['rows'][i].push({
'coords': {'i': i, 'j': j},
'cell': _cell[i][j],
'candidates': _candidates[i][j]
});
_masks['cols'][i].push({
'coords': {'i': j, 'j': i},
'cell': _cell[j][i],
'candidates': _candidates[j][i]
});
}
}

_masks['blocks'] = [];
for (I = 1; I <= 3; I++){
_masks['blocks'][I] = [];

for (J = 1; J <= 3; J++){
_masks['blocks'][I][J] = [];

for (i = 1; i <= 3; i++){
var abs_i = i + (3 * (I - 1));
for (j = 1; j <= 3; j++){
var abs_j = j + (3 * (J - 1));
_masks['blocks'][I][J].push({
'cell': _cell[abs_i][abs_j],
'coords': {'i': abs_i, 'j': abs_j},
'candidates': _candidates[abs_i][abs_j]
});
}
}
}
}

// initialize the key codes array;
keyCodes = [];

keyCodes[8] = "backspace";

keyCodes[37] = "left"; keyCodes[38] = "up";
keyCodes[39] = "right"; keyCodes[40] = "down";

keyCodes[67] = "c"; keyCodes[68] = "d";

keyCodes[49] = keyCodes[97] = "1"; keyCodes[50] = keyCodes[98] = "2";
keyCodes[51] = keyCodes[99] = "3"; keyCodes[52] = keyCodes[100] = "4";
keyCodes[53] = keyCodes[101] = "5"; keyCodes[54] = keyCodes[102] = "6";
keyCodes[55] = keyCodes[103] = "7"; keyCodes[56] = keyCodes[104] = "8";
keyCodes[57] = keyCodes[105] = "9";

// the demo stuff:
demo_frame = 0;
demo_timer = null;
demo_keys = [
[39,39,57,39,40,52,40,50,39,53,38,39,38,49,39,40,53,39,55,39,56,40,57,40,37,52,37,40,51,37,37,37,56,37,38,54,37,56,40,40,55,40,40,57,37,40,52,39,51,39,49,39,38,39,38,54,40,40,39,55,39,38,50,39,39,53],
[53,39,39,57,39,51,40,56,39,39,39,39,39,38,55,40,40,49,37,53,37,54,40,39,39,53,40,37,49,37,55,40,50,37,37,54,38,50,38,39,49,37,37,37,37,37,52,40,40,49,40,39,52,39,56,40,53,37,54,40,57,39,39,38,52,39,56,38,39,57,39,39,55],
[40,40,51,39,39,56,39,39,38,39,51,39,50,39,54,38,39,53,40,40,49,37,37,52,40,39,52,40,37,53,40,51,37,49,37,37,52,38,38,53,37,37,37,57,40,54,39,55,40,37,40,49,39,52,40,40,51,39,38,39,49,38,39,50,40,55,40,53,39,56],
[40,56,39,57,39,52,39,40,57,39,39,53,38,38,54,39,39,50,40,37,53,40,39,49,39,52,40,40,49,37,53,37,37,51,38,50,37,37,56,37,37,37,53,40,40,52,40,40,40,51,39,38,38,50,38,54,39,51,40,56,39,38,49,39,40,55,40,37,50,40,39,39,39,50,39,57,39,38,53,38,37,37,49],
[39,39,39,51,39,56,39,39,39,39,54,40,37,49,37,57,37,37,37,53,37,37,37,54,40,39,53,40,39,39,39,39,52,39,39,39,49,40,56,37,55,37,37,37,37,37,37,37,52,40,39,50,39,39,39,39,57,39,39,39,40,37,52,37,54,37,37,51,37,55,37,40,37,40,57,39,50,39,39,39,39,39,56],
[49,40,51,39,38,39,55,39,40,40,49,39,39,38,50,39,52,39,57,39,40,51,40,52,37,37,37,37,49,37,37,54,40,39,52,40,39,53,39,39,39,50,40,40,40,37,53,37,38,56,38,37,54,37,55,40,51,40,37,37,52,37,38,53,39,38,57,38,56],
[40,57,39,38,55,39,40,52,40,53,40,40,37,51,40,40,40,50,37,40,53,39,39,39,56,38,54,38,51,39,49,38,54,38,37,38,52,38,38,38,39,51,40,40,40,39,53,39,38,50,39,40,54,39,56,40,57,40,40,37,37,53,40,40,52,39,55]
];

clear();
moveSelected(1, 1);
return {
'setSelected': function(i,j){
if (isDemoRunning()) return;
moveSelected(i, j);
},
'keyStroke': function(c){
var key = keyCodes[c];

if (!key) return true;

if (isDemoRunning()) stopDemo();
else keyPressed(key);

return false;
},
'clear': clear,
'fromString': fromString
};
};

anda dapat mencobanya dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD


Sebagai contoh anda dapat menyelesaikan soal ini :

Soal sudoku slover

Author : Lakshya32
From : http://cssdeck.com/labs/sudoko-solver
Modified by : Jin Toples

Sudoku Slover Dengan Javascript anda sudah selesai, baca juga tutorial program Javascript lainnya.
Share:

Cara Pasang Syntax Highlighter Keren di Blog

 Cara Pasang Syntax Highlighter Keren di Blog

Cara Pasang Syntax Highlighter Keren di Blog - Syntax Highlighter adalah fitur dari beberapa teks editor yang digunakan untuk menampilkan teks atau biasanya source code, ditampilkan dalam bentuk berbagai warna untuk memudahkan user untuk membaca codenya.   

Khususnya bagi anda yang mempunyai blog atau website yang sering membagikan source code program, Syntax Highlighter memungkinkan penyisipan potongan kode berwarna pada halaman web tanpa bergantung pada sisi script server. 

Baca juga : Cara Membuat Infinite Scroll Post di Blog

Kode untuk Syntax Highlighter yang akan kita gunakan kali ini dibuat oleh alexgorbatchev dengan menggunakan jQuery dan CSS, alexgorbatechv menyediakan banyak jenis library bahasa pemrograman yang tersedia seperti C Family, PHP, Java, Javascript, Python, Ruby Dan lain - lain. 

Untuk mengimplementasikannya di blogger langkah - langkahnya adalah sebagai berikut :

1. Klik Template > Klik Edit HTML
2. Cari kode </head> ( untuk lebih cepat anda dapat menekan CTRL + F )
3. Letakan baris kode ini di atas </head> tadi


<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>

<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

4. Klik Simpan.

Perhatikan pada baris code :
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

ini adalah template Syntax Highlighteranda anda dapat menggantinya dengan tema yang berbeda cek di sini untuk pilihan tema yang tersedia : THEME

Perhatikan pada baris code :

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>

Ini adalah jenis brush code yang anda gunakan, jika anda hanya menggunakan beberapa bahasa saja, lebih baik gunakan yang diperlukan saja agar tidak berat. Sebagai contoh saya hanya menggunakan Brush PHP saja meskipun terdapat banyak jenis bahasa pemrograman yang saya pakai, hal ini agar membuat loading blog menjadi tidak berat. hal ini juga tidak akan berdampak besar pada Syntax Highlighter anda, efeknya hanya jika kata yang tidak ada pada library PHP tidak akan berwarna - warni.
 
Sekarang bagai mana cara menggunakannya ? jika anda ingin meletakan di postingan klik terlebih dahulu tombol HTML yang ada di atas untuk edit HTML postingan kemudian gunakan kode berikut : 

<pre class="brush:php">
....Letakan source code yang sudah di parse anda di sini....
</pre>

Ganti brushnya jika ingin menggunakan bahasa program lain.
 
Pemasangan Syntax Highlighter Keren di Blog anda sekarang sudah selesai, baca juga tutorial blogger lainnya.
Share:

Cara Membuat Drag and Drop Upload Dengan jQuery Dropzone


Cara Membuat Drag and Drop Upload Dengan jQuery - Kali ini kita akan belajar membuat upload file Drag and Drop dengan jQuery, Drag and drop upload memungkinkan anda untuk mengupload file dengan cara mendrag sebuah file kemudian mendropnya di area yang telah disediakan. Dengan fitur ini mempercepat proses upload file yang berjumlah banyak, bahkan dengan fitur ini anda tidak perlu drag and drop satu persatu filenya anda dapat langsung menyeleksi file anda kemudian drop di area upload file.


Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

Dropzone

Pertama buatlah sebuah folder dengan nama  drag_drop di dalam webserver anda.
Untuk mempermudah kita gunakan library khusus untuk upload Drag and drop yaitu Dropzone.js download dropzone file di sini : DOWNLOAD

Download juga style dropzpnenya di sini : DOWNLOAD ( Ctrl + S )

Simpan keduanya dalam folder drag_drop

Style

Sekarang untuk style tampilan halamannya buatlah sebuah file CSS baru dalam folder drag_drop dengan nama style.css dengan isi script :

<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #333;
}
body {
text-align:center;
background-color:#61b3de;
font-family:Arial, Helvetica, sans-serif;
font-size:80%;
color:#666;
}
.wrap {
background: #f3f8fb;
width:730px;
margin:30px auto;
border: 4px dashed #61b3de;
border-radius:4px;
padding: 20px 5px;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:170%;
color:#fff;
font-style:italic;
text-decoration:none;
font-weight:100;
padding: 10px;
}
</style>

PHP

Sekarang untuk upload filenya buatlah sebuah file PHP baru dalam folder drag_drop dengan nama file-upload.php dengan isi script :

<?php
$upload_dir = 'uploads';
if (!empty($_FILES))
{
$tempFile = $_FILES['file']['tmp_name'];//this is temporary server location

// using DIRECTORY_SEPARATOR constant is a good practice, it makes your code portable.
$uploadPath = dirname( __FILE__ ) . DIRECTORY_SEPARATOR . $upload_dir . DIRECTORY_SEPARATOR;

// Adding timestamp with image's name so that files with same name can be uploaded easily.
$mainFile = $uploadPath.time().'-'. $_FILES['file']['name'];

move_uploaded_file($tempFile,$mainFile);
}
?>

HTML

Terakhir untuk markupnya buatlah sebuah file HTML di dalam folder drag_drop dengan nama index.html dengan isi script :

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Drag and Drop Upload Degan jQuery | Jin Toples Programming</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="dropzone.css">
<script src="dropzone.js"></script>

</head>
<body>
<h1>Jin Toples Programming</h1>
<h1>Drag and Drop Upload Degan jQuery</h1>
<div class="wrap">
<form action="file-upload.php" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
<p class='copy'>Copyright &copy 
<a href="http://www.jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
</div>
</body>
</html>

Drag and Drop Upload Dengan jQuery Dropzone anda sudah selesai anda dapat mencobanya dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran. silahkan baca tutorial jQuery dan PHP lainnya.

Anda juga dapat mendownload file jadinya di sini : DOWNLOAD
Share:

Cara Membuat Autocomplete Dari Database Dengan jQuery dan PHP

Cara Membuat Autocomplete Dari Database Dengan jQuery dan PHP

Cara Membuat Autocomplete Dari Database Dengan jQuery dan PHP - Kali ini kita akan belajar membuat Autocomplete field yang datanya berasal dari database ( MySQL ), data akan di ambil menggunakan bantuan jQuery dan PHP. Autocomplete adalah fitur yang berfungsi memberikan sugesti prediksi data dari inputan oleh user sehingga mempermudah dan mempercepat proses input. konsepnya adalah dengan cara mencocokan setiap karakter yang dimasukan oleh user dengan data yang telah ada atau disimpan di dalam database.


Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

Database

Pertama buatlah sebuah database terlebih dahulu dengan nama db_anime kemudian buatlah sebuah table di dalamnya dengan nama tbl_anime dengan struktur :

NameTypeSizeExtraPrimary
idINT100auto_incrementyes
nama_animeVARCHAR50

Masukan beberapa data dummy sebagai contoh

Data dummy autocomplete

jQuery

Buatlah sebuah folder di dalam webserver anda dengan nama Autocomplete kemudian buatlah lagi sebuah folder dengan nama js

Downloadlah jQuery UI di situs resminya di sini : DOWNLOAD

Downloadlah jQuery di situs resminya di sini : DOWNLOAD

Kemudian exstrak keduanya di dalam folder js

PHP

Buatlah sebuah file PHP di dalam folder Autocomplete dengan nama data.php dengan isi script :


<?php
//connect ke database
mysql_connect("localhost","root","");
mysql_select_db("db_anime");
//harus selalu gunakan variabel term saat memakai autocomplete,
//jika variable term tidak bisa, gunakan variabel q
$term = trim(strip_tags($_GET['term']));

$qstring = "SELECT * FROM tbl_anime WHERE nama_anime LIKE '".$term."%'";
//query database untuk mengecek tabel anime
$result = mysql_query($qstring);

while ($row = mysql_fetch_array($result))
{
$row['value']=htmlentities(stripslashes($row['nama_anime']));
$row['id']=(int)$row['id'];
//buat array yang nantinya akan di konversi ke json
$row_set[] = $row;
}
//data hasil query yang dikirim kembali dalam format json
echo json_encode($row_set);
?>

File ini berfungsi untuk koneksi database kemudian file akan melakukan pencarian data dalam tabel dari inputan yang dimasukan oleh user kemudian dicocokan dengan field nama_anime jika bertemu yang cocok kemudian data di kembalikan dalam format json untuk di tampilkan sebagai sugesti autocomplete.

Buatlah sebuah file PHP baru di dalam folder Autocomplete dengan nama index.php dengan isi script :

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Autocomplete dari database dengan jQuery dan PHP | Jin Toples Programming</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet"
href="js/jquery-ui.css" />
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui.js"></script>

<script>
/*autocomplete muncul setelah user mengetikan minimal2 karakter */
$(function() {
$( "#anime" ).autocomplete({
source: "data.php",
minLength:2,
});
});
</script>
</head>
<body>
<div class="wrap">
<h1>Jin Toples Programming</h1>
<h1>Autocomplete dari database dengan jQuery dan PHP</h1>
<div class="ui-widget">
<label for="anime">Judul Anime : </label>
<input id="anime" />
</div>
<p class='copy'>Copyright &copy <a href="http://www.jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
</div>
</body>
</html>

CSS

Sekarang untuk style tampilannya buatlah sebuah file CSS di dalam folder Autocomplete dengan nama style.css dengan isi script :

<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #333;
}
body {
text-align:center;
background-color:#61b3de;
font-family:Arial, Helvetica, sans-serif;
font-size:80%;
color:#666;
}
.wrap {
background: #f3f8fb;
width:730px;
margin:30px auto;
border: 4px dashed #61b3de;
border-radius:4px;
padding: 20px 5px;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:170%;
color:#645348;
font-style:italic;
text-decoration:none;
font-weight:100;
padding: 10px;
}
</style>

Autocomplete Dari Database Dengan jQuery dan PHP anda sudah selesai anda dapat mencobanya dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran. silahkan baca tutorial jQuery dan PHP lainnya.

*Notes Jika sugesti tidak muncul
- Perhatikan baik - baik nama dari file JS nya di index.php pastikan file jQuery dan jQuery UI terload
- Perhatikan baik - baik nama field dan tabel anda yang ada di databse sudah sama dengan yang di data.php

Anda juga dapat mendownload file jadinya di sini : DOWNLOAD
Share:

Cari Blog Ini

Diberdayakan oleh Blogger.

Statemen Kendali / Kondisional If di C#

Statemen Kendali / Kondisional If di C#  -  C# mempunyai statemen kendali yang hampir sama dengan bahasa - bahasa pemrograman lainnya. Ter...

Label

Recent Posts

Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Label Cloud

AJAX (3) Blogging (4) C (13) C# (15) Codeigniter (5) CSS (18) Game Maker (12) Google Maps (21) HTML (46) Instaling (2) Java (12) Java Script (40) JQUERY (16) PHP (12)

Sample Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation test link ullamco laboris nisi ut aliquip ex ea commodo consequat.

Pages

Theme Support

Need our help to upload or customize this blogger template? Contact me with details about the theme customization you need.