var MError = "Error";
var MInfo = "Info";
var MSuccess = "Success";
var BASE_AJAX_URL = "../../ajax/";
var BASE_IMAGES_URL = "../../images/";
App = {
	pendingAjax: false
};
COMMON = {
	viewDeck : function(deckId, placeholderId) {
		// var deckViewer = new Ext.ux.DeckViewer({owner: 1});

		Ext.Ajax.request({
					url : BASE_AJAX_URL + 'ajDeck.aspx?type=view&did=' + deckId,
					success : function(response) {
						var data = Ext.decode(response.responseText);
						if (!Ext.isEmpty(data)) {
							var deckViewer = new Ext.ux.OnPageDeckViewer({
										owner : 1
									});
							var first = Ext.get(placeholderId).first();
							if (!Ext.isEmpty(first))
								Ext.destroy(first);
							deckViewer.init(data);
							deckViewer.render(placeholderId);
						}
					}
				});
	},
	convertFromName2Img : function(name) {
		// alert("before:"+name);
		name = Ext.util.Format.htmlDecode(name);
		while (name.indexOf(' ') !== -1) {
			name = name.replace(' ', '');
		}
		while (name.indexOf('#') !== -1) {
			name = name.replace('#', '');
		}
		while (name.indexOf('\'') !== -1) {
			name = name.replace('\'', '');
		}
		while (name.indexOf('/') !== -1) {
			name = name.replace('/', '');
		}
		while (name.indexOf('\\') !== -1) {
			name = name.replace('\\', '');
		}
		// while(name.indexOf('.')!==-1) {
		// name = name.replace('.','');
		// }
		// alert("after:"+name);
		return name + ".gif";
	},
	showStdMessage : function(mcode, msg, placeholderId) {
		var divMessage = Ext.get(placeholderId);
		if (mcode == MError) {
			divMessage.removeClass('Msg-Blue');
			divMessage.removeClass('Msg-Grey');
			divMessage.addClass('Msg-Yellow');
		} else if (mcode == MInfo) {
			divMessage.removeClass('Msg-Yellow');
			divMessage.removeClass('Msg-Blue');
			divMessage.addClass('Msg-Grey');
		} else if (mcode == MSuccess) {
			divMessage.removeClass('Msg-Yellow');
			divMessage.removeClass('Msg-Grey');
			divMessage.addClass('Msg-Blue');
		}
		divMessage.update(msg);
		divMessage.show();
	},
	clear : function(placeholderId) {
		var divMessage = Ext.get(placeholderId);
		divMessage.update();
		divMessage.hide();
	}
};

Ext.ux.OnPageDeckViewer = function(cfg) {
	Ext.apply(this, cfg);
	var parent = this;
	var thumbTemplate = this.thumbTemplate = new Ext.XTemplate(
			'<tpl for=".">',
			'<div class="thumb-wrap" id="',
			cfg.owner,
			'_{id}">',
			'<div class="thumb"><img src="../../images/minicards/{image}" title="{name}"></div>',
			'<span>{deckType}:{[fm.ellipsis(values.name,12)]}</span></div></tpl>');
	this.thumbTemplate.compile();

	this.detailsTemplate = new Ext.XTemplate(
			'<div class="details"><img src="../../images/minicards/{image}"><div class="details-info">',
			'<b>Card Name:</b>',
			'<span>{name}</span><br/>',
			'<b>Card Info:</b>',
			'<span>Attribute: {attribute}</span><br/>',
			'<span>Type: <tpl if="nonMonsterType!=\'\'">{nonMonsterType}</tpl> {type}</span><br/>',
			'<tpl if="level!=\'\'"><span>Level: {level}<br/></span>',
			'<span>Attack: {attack}<br/></span>',
			'<span>Defence: {defence}</span><br/></tpl>',
			'<b>Description:</b>', '<span>{description}</span></div></div>'

	);
	this.detailsTemplate.compile();
	var FullCardReader = [{
				name : 'id',
				type : 'int',
				mapping : 0
			}, {
				name : 'cid',
				type : 'int',
				mapping : 1
			}, {
				name : 'name',
				mapping : 2
			}, {
				name : 'image',
				mapping : 2,
				convert : function(item) {
					return COMMON.convertFromName2Img(item);
				}
			}, {
				name : 'level',
				mapping : 3
			}, {
				name : 'nonMonsterType',
				mapping : 4
			}, {
				name : 'attack',
				mapping : 5
			}, {
				name : 'defence',
				mapping : 6
			}, {
				name : 'type',
				mapping : 7
			}, {
				name : 'attribute',
				mapping : 8
			}, {
				name : 'description',
				mapping : 9
			}, {
				name : 'deckTypeId',
				mapping : 10
			}, {
				name : 'deckType',
				mapping : 10,
				convert : function(dt) {
					switch (dt) {
						case 0 :
						case '0' :
							return "M";
						case 1 :
						case '1' :
							return "E";
						case 2 :
						case '2' :
							return "S";
					}
				}
			}, {
				name : 'category',
				mapping : 8,
				convert : function(attribute) {
					switch (Ext.util.Format.lowercase(attribute)) {
						case 'spell' :
						case 'trap' :
							return 'spell';
						default :
							return 'monster';
					}
				}
			}];
	var store = this.store = new Ext.data.JsonStore({
				fields : FullCardReader,
				listeners : {
					'load' : function() {
						this.sort('deckTypeId', 'asc');
					}
				}
			});

	var view = this.view = new Ext.DataView({
		itemSelector : "div.thumb-wrap",
		cls : 'ychooser-view',
		singleSelect : true,
		store : store,
		tpl : thumbTemplate,
		emptyText : '<div style="padding:10px;">No images match the specified filter</div>'
	});

	this.view.on('selectionchange', this.showDetails, this, {
				buffer : 100
			});
	var imageView = this.ImageView = new Ext.Panel({
				region : 'center',
				width : 520,
				autoScroll : true,
				items : [view]
			});

	var detailView = this.DetailView = new Ext.Panel({
				region : 'east',
				html : '<b>' + lang.get("CLICK_TO_VIEW") + '</b>',
				split : true,
				width : 180,
				maxSize : 200,
				autoScroll : true
			});

	Ext.ux.OnPageDeckViewer.superclass.constructor.call(this, {
				width : 600,
				height : 400,
				// modal: true,
				title : 'Deck Viewer',
				layout : 'border',
				// closeAction: 'hide',
				items : [imageView, detailView]
			});

}

Ext.extend(Ext.ux.OnPageDeckViewer, Ext.Panel, {
			owner : 1,
			init : function(data) {
				this.store.loadData(data.cards)
				this.setTitle("Deck: " + data.deckName);
			},
			loadFromCollection : function(collection) {
				this.store.loadData(collection.getRange());
			},
			doCallback : function() {
				var selNode = this.view.getSelectedNodes()[0];
				var callback = this.callback;
				var lookup = this.lookup;
				this.dlg.hide(function() {
							if (selNode && callback) {
								var data = lookup[selNode.id];
								callback(data);
							}
						});
			},

			showDetails : function(view, nodes) {
				var p = this;
				var selNode = nodes[0];
				this.selected = selNode;
				if (selNode && this.store.getCount() > 0) {
					var index = this.findCardIndex(selNode.id);
					if (index != -1) {
						var row = this.store.getAt(index);
						// this.DetailView.hide();
						this.detailsTemplate.overwrite(this.DetailView.body,
								row.data);
						this.DetailView.el.fadeIn({
									stopFx : true,
									duration : 1
								}).stopFx();
					}
				} else {
					// this.DetailView.update('');
				}
			},
			findCardIndex : function(id) {
				var index = this.store.findBy(function(record, recordId) {
							if (record.data.id == id.split('_')[1])
								return true;
						});
				return index;
			}
		});

function refreshiframe() {
	window.frames["cboxmain"].location.href = "http://www2.cbox.ws/box/?boxid=1793758&boxtag=2pkw6f&sec=main";
	setTimeout("refreshiframe()", 30000);
}

function showDeckChoice(link, deckID) {
	var menu = new Ext.menu.Menu({
				items : [{
							text : 'Edit',
							iconCls : 'icon-deck-edit',
							href : '../Decks/Createdeck.aspx?id=' + deckID + '&p=card'
						}, {
							text : 'Delete',
							iconCls : 'icon-deck-delete',
							handler : function() {
								delThisDeck(menu, link, deckID);
							}
						}, {
							text : 'Set Active',
							iconCls : 'icon-deck-active',
							handler : function() {
								changeThisActiveDeck(menu, link, deckID);
							}
						}]
			});
	menu.show(link);
	return false;
}

function delThisDeck(menu, link, deckId) {
	if (link.className == 'a-active') {
		Ext.Msg.alert('Thong bao', "You cannot delete active deck");
		return false;
	}
	Ext.Msg.confirm('Delete Deck?',
			'Are you sure to delete the deck? It will be deleted permanently',
			function(buttonID) {
				if (buttonID == 'yes') {
					var myMask = new Ext.LoadMask(Ext.get('DeckList'), {
								msg : "Please wait..."
							});
					myMask.show();
					Ext.Ajax.request({
						url : BASE_AJAX_URL + 'ajDeck.aspx?type=del&id=' + deckId,
						method : 'GET',
						success : function() {
							Ext.get(link).setStyle('display', 'none');
							Ext.get(link).remove();
							myMask.hide();
						},
						failure : function() {
							Ext.Msg
									.alert('Thong bao',
											"Unable to delete deck. There's problem from server.");
							myMask.hide();
						}
					});
				}
			});
	menu.hide();
	return false;
}

function changeThisActiveDeck(menu, link, deckID) {
	var myMask = new Ext.LoadMask(Ext.get('DeckList'), {
				msg : "Please wait..."
			});
	myMask.show();
	Ext.Ajax.request({
		url : BASE_AJAX_URL + 'ajDeck.aspx?type=act&id=' + deckID,
		method : 'GET',
		success : function() {
			var ele = Ext.get(link);
			ele.parent().child('a.a-active').replaceClass('a-active',
					'a-bullet');
			ele.replaceClass('a-bullet', 'a-active');
			myMask.hide();
		},
		failure : function() {
			Ext.Msg
					.alert('Thong bao',
							"Unable to change active deck. There's problem from server.");
			myMask.hide();
		}
	});
	menu.hide();
}

$.fn.userlink = function(type) {
    return this.each(function(){
        var element = $(this);
        var username = element.find('span').html();
        var temp = element.find('div').html().split('|');
        //id|avatar|slogan|point|level|ischampion|
        var data = {id: temp[0], username: username, avatar: temp[1], slogan:temp[2], point:temp[3], level: temp[4], isChampion: temp[5]};
        
        switch(type) {
            case 'medium':
                mediumLink(element, data);
                break;
            default:
                simpleLink(element, data);
                break;
        }
    });
    
    function simpleLink(element, data) {
        var cls = element.attr('class');
        //element.wrap('<div class="'+cls+'"/>');
        element.attr('class', cls + ' StandardUserLink');
        element.attr('title', data.username);
		element.attr('href', String.format('../../Yugioh/User/profile.aspx?a=view&obj=user&code=0&id={0}', data.id));
        element.mouseover(function(){TagToTip('div-usertip-' + data.id,WIDTH,300);});
        element.html('<span class="medal' + data.level +' std_medal">' + data.username + '</span>');
        
        attachTips(element, data);
    };
    
    function mediumLink(element, data) {
        var cls = element.attr('class');
        //element.wrap('<div class="'+cls+'"/>');
        element.attr('class', cls +' StandardUserLink');
        element.attr('title', data.username);
		element.attr('href', String.format('../../Yugioh/User/profile.aspx?a=view&obj=user&code=0&id={0}', data.id));
        element.mouseover(function(){TagToTip('div-usertip-' + data.id,WIDTH,300);});
        element.html('<table><tr><td width="45px"><img src="'+data.avatar+'" class="avt"></td><td valign="middle"><span class="medal' + data.level +' std_medal" onmouseover="TagToTip(\'div-usertip-' + data.id +'\',WIDTH,300);">' + data.username + '</span></td></tr></table>');
        
        attachTips(element, data);
    };
    
    function attachTips(jObject, data) {
        var tpl = '<div style="display: none;" id="div-usertip-{0}"><table width="100%"><tr><td><img src="{1}" class="tip-img"/></td><td>Slogan: {2}<br/>Point:<b>{3}</b><br/> Level:<b class="medal{4} std_medal">{4}</b></td></tr></table></div>';
        jObject.after(String.format(tpl, data.id, data.avatar, data.slogan, data.point, data.level));
    };
}

$.fn.duel_recent = function() {
    return this.each(function(){
		var element = $(this);
		element.css({fontSize: '8pt'});
		var duelId = element.attr('id').split('-')[1];
		var users = element.find('a');
		var html = element.html();
		var actions = [
		   '<a class="a-btn icon-log" onclick="return showDuelLog({0},\'{1}\',\'{2}\')" href="#">Log</a>',
		   '<a class="a-btn icon-replay" href="../../Yugioh/Duels/StartDuel.aspx?a=replay&gamekey={0}&type=anonymous">Replay</a>',
		   '<a class="a-btn icon-download" href="../../Yugioh/Duels/DownloadDuels.aspx?a=down&gamekey={0}">Download</a>'
		];
		if ($('.allowDel').length > 0)
		    actions.push('<a class="a-btn a-icon-cancel" style="color: red;" href="../Duels/ReportDuels.aspx?a=del&id={0}"><u>Del</u></a>');
		var a = String.format(actions.join('<br/>'), duelId, $(users[0]).text(), $(users[1]).text());		
		var tpl = String.format('<div class="grid_5 alpha">{0}</div><div class="grid_2 omega">{1}</div><div class="clear"></div>', html, a);
		element.html(tpl);
//server side
//<li class="d-recent d-recent-<%#Eval("Id")%>">
  //      <div><%#Eval("P1User")%> vs <%#Eval("P2User") %> at <%#Eval("DuelTime") %></div>
  //      <div><%#Eval("Result") %></div>
//</li>

    
		
//        <li class="{5} d-recent">
//        <div class=r0>
//            <div class='grid_2 alpha c0'>{0}</div>
//            <div class='grid_1 c1'><img src='{2}' class='avt'/></div>
//            <div class='grid_1 c2'>vs</div>
//            <div class='grid_1 c3'><img src='{3}' class='avt'/></div>
//            <div class='grid_2 omega c4'>{1}</div>
//            <div class='clear'></div>
//        </div>
//        <div class=r1> at {4}</div>
//    </li>
//<div class="r3"><a class="a-btn icon-log" onclick='return showDuelLog(325972,"stealth_ninja03","StarDust-Anti")' href="#">Log</a> <a class="a-btn icon-replay" href="../../Yugioh/Duels/createDuel.aspx?a=replay&amp;gamekey=325972&amp;type=anonymous">Replay</a> <a class="a-btn icon-download" href="../../Yugioh/Duels/DownloadDuels.aspx?a=down&amp;gamekey=325972">Download</a>| <a style="color: red;" href="../Duels/ReportDuels.aspx?a=del&amp;id=325972"><u>Del</u></a> </div>
    });
}


var serverDate = false;
Date.patterns = {
	ISO8601Long : "Y-m-d H:i:s",
	ISO8601Short : "Y-m-d",
	ShortDate : "n/j/Y",
	LongDate : "l, F d, Y",
	FullDateTime : "l, F d, Y g:i:s A",
	MonthDay : "F d",
	ShortTime : "g:i A",
	LongTime : "g:i:s A",
	SortableDateTime : "Y-m-d\\TH:i:s",
	UniversalSortableDateTime : "Y-m-d H:i:sO",
	YearMonth : "F, Y"
};

function updateServerTime() {
	if (!serverDate) {
		var val = $('#serverTime').html();
		// alert(val);
		serverDate = new Date(val);
	}
	serverDate = serverDate.add(Date.SECOND, 1);
	var text = serverDate.format("h:m:s");
	Ext.get('serverTime').update("Server Time: " + text);
}
$(document).ready(function() {
			Ext.TaskMgr.start({
						run : updateServerTime,
						interval : 1000
					});
			Ext.get('serverTime').show();
			
			$('.simple-ulink').userlink('simple').fadeIn('fast');
			$('.medium-ulink').userlink('medium').fadeIn('fast');
			
			$('.d-recent').duel_recent();
			$('.d-recent:even').css({borderBottom: 'solid brown 1px'});
		});

// my jquery extension functions
String.format = function() {
	var s = arguments[0];
	for (var i = 0; i < arguments.length - 1; i++) {
		var reg = new RegExp("\\{" + i + "\\}", "gm");
		s = s.replace(reg, arguments[i + 1]);
	}

	return s;
}

$.extend({
			isset : function(x) {
				return (x != 'undefined');
			}
		});

var gAlternateFootSynch = false;