/**
 * This jQuery Grid plugin.
 * 
 * @author Jack Rao
 * @param store: The data that Grid display
 * @param parameters: Few parameters that grid plugin need. 
 * @return {Object} jQuery Object
 */
jQuery.fn.grid = function(store, parameters) {
	parameters = jQuery.extend({
				panelName:"",
				innerHtml:"",
				//dislpay column on the grid
				display_fields : [],
				date_format : null,
				//sortable column on the grid ( unfinished )
				sort_fields : [],
				callBackHandle : null
			}, parameters || {});

	return this.each(function() {		
				/**
				 * Clear all rows
				 */
				function clearRows() {
					var selectorName = parameters.panelName+" .divSearchItemClass";
					$(selectorName).remove();
				}

				/**
				 * This function inserts the grid row into the container element
				 */
				function drawRow(index) {
					var fields = parameters.display_fields;
					var dataAry = [];
					for (var displayItem in fields) {
						for (var item in store[index]) {
							if (fields[displayItem] == item) {
								if( ( item == "releasedate" || item == "date" ) && parameters.date_format){
										store[index][item] = store[index][item].substring(0,4);
								}
								dataAry.push(store[index][item]);
							}	
						}
					}
					var innerHtml = formatString(parameters.innerHtml,dataAry);
					$(innerHtml).appendTo(parameters.panelName);
				}
				
				/**
				 * This function replace {number} as the data.
				 */
				function formatString(str,ary){					
					var reg=new RegExp("\{[0-9]\}","g");				
					var j=-1;
				    return str.replace(reg, function(){
				        		j++;
								return ary[j];
				    });
				}
				
				//Clear all rows
				clearRows();
				
				//Because when js insert row into table, the existed row will be down.
				//So before we begin insert rows, we need to reverse the array.  
				for (var i = 0; i < store.length ; i++) {
					drawRow(i);
				}
				//specialEffect();
				if(parameters.callBackHandle!=null){
					parameters.callBackHandle();
				}
			});
}