#freecell{background:#fff;cursor:default;padding:5px;background:#fff;text-align:center;font-size:12px;font-family:Arial;}
#fc-body{width:660px;}
#fc-toolbar{margin:0 0 5px 1px;text-align:left;}
.fc-buttons a:link,.fc-buttons a:visited{width:auto !important;width:50px;min-width:50px;padding:1px 5px;text-align:center;margin:2px 5px;border:1px #06c solid;display:inline-block;text-decoration:none;color:#06c;background:#fff;}
.fc-buttons a:hover{color:#fff;background:#06c;}
#fc-table{clear:left;float:left;border:1px #eee solid;height:auto !important;height:364px;min-height:364px;}
.fc-column{float:left;width:80px;text-align:center;padding:90px 0px;}
.fc-card{width:64px;text-align:left;background-color:#fff;position:relative;}
.fc-column .fc-card{margin-top:-78px;}
#fc-cells{margin-right:10px;}
.fc-cell{width:64px;border:1px #666 solid;height:103px;margin:2px;float:left;padding:1px;}
#fc-info{width:64px;border-style:none;font-size:40px;text-align:left;float:left;}
#fc-logo span{display:block;padding:0 5px;margin:-30px 0;}
#fc-logo span.fc-top{margin-top:-10px !important;margin-top:-5px;}
#fc-logo span.fc-down{margin-bottom:-10px;}
#fc-score{font-weight:bold;font-size:10px;color:#06c;margin-top:10px !important;margin-top:6px;}
#fc-score span{width:26px;display:inline-block;text-align:right;}
#fc-score span.fc-label{width:30px;}
#fc-time{clear:left;margin-bottom:5px;}
#fc-time span{width:auto !important;width:30px;min-width:30px;display:inline-block;text-align:right;margin-right:40px;}
#fc-time span.fc-label{font-weight:bold;width:65px;margin-right:5px;}
.fc-animate{position:absolute;}
.fc-right{text-align:right;}
.fc-card-content{border:1px #666 solid;border-style:none solid;}
.fc-card h2{font-size:16px;padding:0 1px;margin:0;}
.fc-card h2 span{display:block;font-size:16px !important;margin-top:-7px !important;margin-top:0;font-size:11px;padding:2px 0;}
.fc-red{color:red;}
.fc-black{color:black;}
.fc-card .fc-card-pattern{font-size:40px !important;font-size:22px;text-align:center;height:36px !important;height:19px;margin-top:-12px !important;;margin-top:0;overflow:hidden;}
.fc-card-border-1,.fc-card-border-2,.fc-card-border-3,.fc-card-border-4{margin:0 1px;height:1px;border:1px #666 solid;border-style:none solid;overflow:hidden;}
.fc-card-border-2{margin:0 2px;}
.fc-card-border-3{margin:0 3px;}
.fc-card-border-4{margin:0 4px;border-style:none;border-top:1px #666 solid;}
.fc-select,.fc-select .fc-card-border-1,.fc-select .fc-card-border-2,.fc-select .fc-card-border-3,.fc-select .fc-card-border-4{background:#3ff;color:#fff;}
#fc-highlight{position:absolute;z-index:10000;}
#fc-msgbox{width:220px;margin:-40px 0 0 -110px;left:50%;top:50%;position:absolute;border:1px #666 solid;background:#fff;display:none;z-index:1000;}
#fc-msgbox-title{background:#ccc;text-align:left;}
#fc-msgbox-content{padding:10px;border:1px #ccc solid;}
#fc-msgbox-buttons{text-align:center;padding:5px;}
#fc-msgbox-buttons input{width:60px;margin:0 5px;}
#fc-mask{width:100%;height:100%;top:0;left:0;position:absolute;background:#fff;filter:alpha(opacity=50);opacity:0.5;display:none;z-index:100;}
#mine td{width:18px;height:18px;border:1px #666 solid;text-align:center;background:#f0f0f0;overflow:hidden;display:block;overflow:hidden;font-size:16px;padding:0;border-color:#fff #666 #666 #fff;cursor:default;}
$(function(){
Freecell.Initialize();
});
var Freecell={
Initialize:function(){
Animate.Init();
document.body.oncontextmenu=function(){return false;};
var fc=$('<div id="freecell">');
$(document.body).append(fc);
this.body=$('<div id="fc-body">');
fc.append(this.body);
this.toolbar=$('<div id="fc-toolbar" class="fc-buttons">');
this.body.append(this.toolbar);
this.startButton=$('<a id="fc-toolbar-start" href="javascript:void(0)">Start</a>');
this.toolbar.append(this.startButton);
this.oprZone=$('<div id="fc-oprzone">');
this.body.append(this.oprZone);
this.cellContainer=$('<div id="fc-cells">');
this.oprZone.append(this.cellContainer);
this.info=$('<div id="fc-info"><div id="fc-logo"><font class="fc-top">♠</font><font class="fc-right fc-red">♦</font><font>♣</font><font class="fc-right fc-down fc-red">♥</font></div></div>');
this.oprZone.append(this.info);
var scoreBoard=$('<div id="fc-score"><font class="fc-label">Won:</font></div>');
this.info.append(scoreBoard);
this.scoreWin=$('<font>').text(0);
scoreBoard.append(this.scoreWin).append('<br/><font class="fc-label">Lost:</font>');
this.scoreLose=$('<font>').text(0);
scoreBoard.append(this.scoreLose);
this.collectContainer=$('<div id="fc-collections">');
this.oprZone.append(this.collectContainer);
var time=$('<div id="fc-time"><font class="fc-label">Best Time:</font></div>');
this.body.append(time);
this.best=$('<font>').text('-');
time.append(this.best).append('<font class="fc-label">Time:</font>');
this.elapseTime=$('<font>').text('-');
time.append(this.elapseTime);
this.table=$('<div id="fc-table">');
this.body.append(this.table);
this.msgbox=$('<div id="fc-msgbox">');
this.body.append(this.msgbox);
this.msgboxTitle=$('<div id="fc-msgbox-title">');
this.msgbox.append(this.msgboxTitle);
this.msgboxTitle.append($('<font class="fc-black">♠</font><font class="fc-red">♦</font><font class="fc-black">♣</font><font class="fc-red">♥</font>'));
this.msgboxContent=$('<div id="fc-msgbox-content">');
this.msgbox.append(this.msgboxContent);
this.msgboxButtons=$('<div id="fc-msgbox-buttons" class="fc-buttons">');
this.msgbox.append(this.msgboxButtons);
this.msgboxButtonOK=$('<a>').text('OK').attr('href','javascript:void(0)');
this.msgboxButtons.append(this.msgboxButtonOK);
this.msgboxButtonRetry=$('<a>').text('Play again?').attr('href','javascript:void(0)');
this.msgboxButtons.append(this.msgboxButtonRetry);
this.msgboxButtonCancel=$('<a>').text('Cancel').attr('href','javascript:void(0)');
this.msgboxButtons.append(this.msgboxButtonCancel);
this.mask=$('<div id="fc-mask">');
this.body.append(this.mask);
this.availableCells=0;
this.freeColumns=0;
this.finished=true;
this.cells=[];
this.collectCells=[];
this.columns=[];
for(var i=0;i<4;i++){
this.cells[i]=new Cell(i);
this.cellContainer.append(this.cells[i].Element);
this.collectCells[i]=new CollectCell(i);
this.collectContainer.append(this.collectCells[i].Element);
}
for(var i=0;i<8;i++){
this.columns[i]=new Column(i);
this.table.append(this.columns[i].Element);
}
this.win=0;
this.lose=0;
this.bestTime=Number.MAX_VALUE;
this.timer;
this.elapse=0;
this.highlight=$('<div id="fc-highlight">');
this.body.append(this.highlight);
this.functionBind();
//this.start();
},
shuffle:function(){
this.finished=false;
this.availableCells=5;
var shuffleCards=[];
for(var i=0;i<4;i++){
this.cells[i].Destroy();
this.collectCells[i].Destroy();
for(var j=0;j<13;j++){
var cardIndex=i*13+j;
var card=new Card(i,j+1);
shuffleCards[cardIndex]=card;
}
}
for(var i=0;i<8;i++){
var col=this.columns[i];
col.Destroy();
var q=6;
if(i<4){
q=7;
}
for(var j=0;j<q;j++){
var l=shuffleCards.length-1;
var rnd=Math.round(Math.random()*l);
col.Add(shuffleCards[rnd]);
shuffleCards.splice(rnd,1);
}
}
},
score:function(){
this.scoreWin.text(this.win);
this.scoreLose.text(this.lose);
},
start:function(){
Freecell.shuffle();
Freecell.startTimer();
},
disableButton:function(disable){
if(this.finished){
if(disable){
this.mask.show();
this.msgboxButtons.hide();
}else{
this.msgboxButtons.show();
}
}
},
startTimer:function(){
this.elapse=0;
this.setRealTime();
this.timer=setInterval(this.timerInterval,1000);
},
timerInterval:function(){
Freecell.elapse++;
Freecell.setRealTime();
},
getTimeValue:function(){
var h=Math.floor(this.elapse/3600);
var m=Math.floor((this.elapse%3600)/60);
var s=this.elapse%60;
return (h>0?h+':':'')+(m>9?m:'0'+m)+':'+(s>9?s:'0'+s);
},
setRealTime:function(){
Freecell.elapseTime.text(Freecell.getTimeValue());
},
stopTimer:function(){
clearInterval(Freecell.timer);
Freecell.elapseTime.text(Freecell.getTimeValue());
},
setBestTime:function(){
if(Freecell.elapse<Freecell.bestTime){
Freecell.bestTime=Freecell.elapse;
Freecell.best.text(Freecell.getTimeValue());
}
},
msg:function(message,button){
if(!button){
button=0;
}
Freecell.msgboxButtonOK.hide();
Freecell.msgboxButtonRetry.hide();
Freecell.msgboxButtonCancel.hide();
if(button==0){
Freecell.msgboxButtonOK.show();
}else{
Freecell.msgboxButtonRetry.show();
Freecell.msgboxButtonCancel.show();
}
Freecell.msgboxContent.html(message);
var box=Freecell.msgbox;
var b=$(document.body);
box.show();
},
collect:function(){
if(Freecell.activeCard){
Freecell.activeCard.Deactive();
Freecell.activeCard=null;
}
var card;
var collectSth=false;
Freecell.freeColumns=0;
Freecell.availableCells=5;
for(var i=0;i<8;i++){
if(i<4){
if(Freecell.cells[i].Card){
card=Freecell.cells[i].Card;
if(Freecell.collectableCheck(card)){
Freecell.collectCells[card.ColorIndex].Add(Freecell.cells[i].Remove());
collectSth=true;
}else{
Freecell.availableCells--;
}
}
}
if(!Freecell.columns[i].IsEmpty()){
var l=Freecell.columns[i].Cards.length;
card=Freecell.columns[i].Cards[l-1];
if(Freecell.collectableCheck(card)){
Freecell.columns[i].Cards.splice(l-1,1);
Freecell.collectCells[card.ColorIndex].Add(card);
collectSth=true;
}
}else{
Freecell.freeColumns++;
}
}
if(Freecell.collectCells[0].Number==13 && Freecell.collectCells[1].Number==13 && Freecell.collectCells[2].Number==13 && Freecell.collectCells[3].Number==13){
Freecell.stopTimer();
Freecell.setBestTime();
Freecell.finished=true;
Freecell.msg('You win!',1);
Freecell.win++;
Freecell.score();
Freecell.disableButton(true);
return;
}
if(collectSth){
Freecell.collect();
}else{
if(Freecell.availableCells==1){
for(var i=0;i<8;i++){
var col=Freecell.columns[i];
if(col.IsEmpty()){
return;
}
if(i<4){
if(Freecell.fitCheck(Freecell.cells[i].Card)){
return;
}
}
if(Freecell.fitCheck(col.Cards[col.Cards.length-1])){
return;
}
}
Freecell.stopTimer();
Freecell.finished=true;
Freecell.lose++;
Freecell.score();
Freecell.msg('You lose!',1);
Freecell.mask.show();
}
}
},
fitCheck:function(card){
if(card){
for(var j=0;j<8;j++){
if(j<4){
if(Freecell.collectCells[j].Fit(card)){
return true;
}
}
if(Freecell.columns[j].Cards.length>0 && Freecell.columns[j].Cards[Freecell.columns[j].Cards.length-1].Fit(card)){
return true;
}
}
return false;
}
return true;
},
collectableCheck:function(card){
return ((card.Number==Freecell.minCollectedNumber()+1 || card.Number<3) && card.Number==Freecell.collectCells[card.ColorIndex].Number+1);
},
minCollectedNumber:function(){
var num=15;
for(var i=0;i<4;i++){
num=Math.min(num,Freecell.collectCells[i].Number);
}
return num;
},
functionBind:function(){
this.body.click(function(){
if(Freecell.activeCard){
Freecell.activeCard.Deactive();
Freecell.activeCard=null;
}
});
this.startButton.click(function(){
if(!Freecell.finished){
if(confirm('You want to give up this match?')){
Freecell.stopTimer();
Freecell.lose++;
Freecell.score();
}else{
return;
}
}
Freecell.start();
});
$('#freecell .fc-column').click(function(e){
stopBubble(e);
var col=Freecell.columns[this.attributes['index'].value];
if(Freecell.activeCard){
if(Freecell.activeCard.Owner!==col){
Freecell.activeCard.SendTo(col,Freecell.availableCells,Freecell.freeColumns);
}
Freecell.collect();
}else{
Freecell.activeCard=col.Active();
}
});
$('#fc-cells .fc-cell').click(function(e){
stopBubble(e);
var cell=Freecell.cells[this.attributes['index'].value];
if(Freecell.activeCard){
Freecell.activeCard.SendTo(cell);
Freecell.collect();
}else{
Freecell.activeCard=cell.Active();
}
});
$('#fc-collections .fc-cell').click(function(e){
stopBubble(e);
var collectCell=Freecell.collectCells[this.attributes['index'].value];
if(Freecell.activeCard){
Freecell.activeCard.SendTo(collectCell);
Freecell.collect();
}
});
$('.fc-card').live('mousedown',function(e){
stopBubble(e);
if(e.which==3){
var t=$(this);
var h=Freecell.highlight;
var p=t.offset();
h.css('top',p.top).css('left',p.left).append(t.clone()).show();
}
}).live('mouseup',function(e){
stopBubble(e);
if(e.which==3){
Freecell.highlight.empty().hide();
}
});
this.msgboxButtonOK.click(function(){
Freecell.msgbox.hide();
});
this.msgboxButtonCancel.click(function(){
Freecell.mask.hide();
Freecell.msgbox.hide();
});
this.msgboxButtonRetry.click(function(){
Freecell.start();
Freecell.mask.hide();
Freecell.msgbox.hide();
});
}
}
function stopBubble(e){
if(e && e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
}
function Column(index){
this.Name='column';
this.Index=index;
this.Element=$('<div index="'+index+'" class="fc-column">');
this.Cards=[];
}
Column.prototype.Add=function(card){
if(card){
card.Owner=this;
this.Cards.push(card);
this.Element.append(card.Element);
}
}
Column.prototype.Destroy=function(){
var l=this.Cards.length;
for(var i=0;i<l;i++){
this.Cards[i].Destroy();
this.Cards[i]=null;
}
this.Cards=[];
this.Element.empty();
}
Column.prototype.Active=function(){
if(!this.IsEmpty()){
return this.Cards[this.Cards.length-1].Active();
}
return null;
}
Column.prototype.Remove=function(){
if(!this.IsEmpty()){
return this.Cards.pop();
}
return null;
}
Column.prototype.IsEmpty=function(){
return this.Cards.length==0;
}
function Cell(index){
this.Name='cell';
this.Index=index;
this.Element=$('<div class="fc-cell" index="'+index+'">');
this.Card=null;
}
Cell.prototype.Add=function(card){
if(!this.Card && card){
card.Owner=this;
this.Card=card;
this.Element.append(card.Element);
}
}
Cell.prototype.Destroy=function(){
if(this.Card){
this.Card=this.Card.Destroy();
}
this.Element.empty();
}
Cell.prototype.Active=function(){
if(this.Card){
return this.Card.Active();
}else{
return null;
}
}
Cell.prototype.Remove=function(){
var card=this.Card;
this.Card=null;
return card;
}
Cell.prototype.IsEmpty=function(){
return this.Card==null;
}
function CollectCell(index){
this.Name='collect';
this.Index=index;
this.Number=0;
this.Element=$('<div class="fc-cell" index="'+index+'">');
this.Card=null;
}
CollectCell.prototype.Add=function(card){
if(card){
if(this.Card){
this.Card.Destroy();
}
this.Card=card;
this.Number=card.Number;
Animate.Add(this.Index,this.Element,card.Element);
}
}
CollectCell.prototype.Destroy=function(){
this.Number=0;
if(this.Card){
this.Card=this.Card.Destroy();
}
this.Element.empty();
}
CollectCell.prototype.Fit=function(card){
if(card){
if(card.Number==(this.Number+1) && card.ColorIndex==this.Index){
return true;
}
}
return false;
}
var Animate={
Init:function(){
this.items=new Array(new Array(),new Array(),new Array(),new Array());
this.isPlaying=new Array(false,false,false,false);
this.speed=0.5;
this.timer=20;
},
Add:function(index,cellEl,cardEl){
var obj=new Object();
obj.cell=cellEl;
obj.card=cardEl;
this.items[index].push(obj);
this.play(index);
},
play:function(index){
if(Animate.isPlaying[index]){
return;
}
Animate.next(index);
},
animate:function(index,obj){
var card=obj.card;
var cell=obj.cell;
var pos=card.position();
var cellPos=cell.position();
var cellTop=cellPos.top;
var cellLeft=cellPos.left;
if (Math.abs(pos.top-cellTop)>5 || Math.abs(pos.left-cellLeft)>5){
card.css('top',(cellTop+pos.top)*Animate.speed).css('left',(cellLeft+pos.left)*Animate.speed);
setTimeout(function(){Animate.animate(index,obj)},Animate.timer);
}else{
cell.empty().append(card.removeClass('fc-animate').css('top',0).css('left',0));
Animate.next(index);
}
},
next:function(index){
if(Animate.items[index].length==0){
Animate.isPlaying[index]=false;
if(!Animate.isPlaying[0] && !Animate.isPlaying[1] && !Animate.isPlaying[2] && !Animate.isPlaying[3]){
Freecell.disableButton(false);
}
return;
}
Animate.isPlaying[index]=true;
var obj=Animate.items[index].shift();
var pos=obj.card.addClass('fc-animate').position();
$(document.body).append(obj.card.css('top',pos.top).css('left',pos.left));
Animate.animate(index,obj);
}
}
function Card(colorIndex,number){
this.Index=colorIndex*13+number;
this.Number=number;
this.ColorIndex=colorIndex;
this.Owner=null;
switch(colorIndex){
case 0:
this.Pattern='♠';
this.Color='black';
break;
case 1:
this.Pattern='♦';
this.Color='red';
break;
case 2:
this.Pattern='♣';
this.Color='black';
break;
case 3:
this.Pattern='♥';
this.Color='red';
break;
}
switch(number){
case 1:
this._string='A';
break;
case 11:
this._string='J';
break;
case 12:
this._string='Q';
break;
case 13:
this._string='K';
break;
default:
this._string=number;
}
this.Element=$('<div class="fc-card fc-'+this.Color+'" index="'+this.Index+'"><div class="fc-card-border-4"></div><div class="fc-card-border-3"></div><div class="fc-card-border-2"></div><div class="fc-card-border-1"></div><div class="fc-card-content"><h2 class="fc-card-num">'+this._string+'<font>'+this.Pattern+'</font></h2><div class="fc-card-pattern">'+this.Pattern+'</div><h2 class="fc-card-num fc-right"><font>'+this.Pattern+'</font>'+this._string+'</h2></div><div class="fc-card-border-1"></div><div class="fc-card-border-2"></div><div class="fc-card-border-3"></div><div class="fc-card-border-4"></div></div>');
}
Card.prototype.Destroy=function(){
this.Index=null;
this.Number=null;
this.ColorIndex=null;
this.Owner=null;
this.Element=null;
return null;
}
Card.prototype.Fit=function(card){
if(card.Number==13 || this.Color==card.Color || this.Number!=(card.Number+1)){
return false;
}
return true;
}
Card.prototype.Active=function(){
this.Element.addClass('fc-select');
if(this.Owner){
this.Owner.ActiveCard=this;
}
return this;
}
Card.prototype.Deactive=function(){
this.Element.removeClass('fc-select');
}
Card.prototype.SendTo=function(target,availableCells,emptyCols){
var owner=this.Owner;
switch(target.Name){
case 'collect':
if(target.Fit(this)){
target.Add(owner.Remove());
}
break;
case 'column':
if(target.IsEmpty()){
emptyCols--;
}
switch(owner.Name){
case 'cell':
if(target.IsEmpty() || target.Cards[target.Cards.length-1].Fit(this)){
target.Add(owner.Remove());
}
break;
case 'column':
var length=owner.Cards.length;
var curIndex=length-1;
if(target.IsEmpty()){
while(curIndex>0){
if(!owner.Cards[curIndex-1].Fit(owner.Cards[curIndex])){
break;
}
curIndex--;
}
}else{
var l=target.Cards.length;
while(curIndex>=0){
var card=owner.Cards[curIndex];
if(target.Cards[l-1].Fit(card)){
break;
}
if(curIndex>0 && !owner.Cards[curIndex-1].Fit(card)){
curIndex=-2;
break;
}
curIndex--;
}
}
if(curIndex>-1){
var cellsNeeded=length-curIndex;
if(!target.IsEmpty()){
availableCells=emptyCols*availableCells+availableCells;
if(cellsNeeded>availableCells){
alert('You need '+cellsNeeded+' cells, only '+availableCells+' available');
return;
}
}else{
if(cellsNeeded>availableCells){
curIndex=length-availableCells;
}
}
for(var i=curIndex;i<length;i++){
target.Add(owner.Cards[curIndex]);
owner.Cards.splice(curIndex,1);
}
}
break;
}
break;
case 'cell':
if(target.IsEmpty()){
target.Add(owner.Remove());
}
break;
}
}
