function FileFormatPickerView(){
	this.data = null;
	this.dialog = new YAHOO.widget.Panel("fileFormatPicker", { 
		fixedcenter: true,
		y:30,
		zIndex:999,
		modal:true,
		visible:false,
		underlay:"none",
		constraintoviewport:false,
		close:false,
		draggable:true
	});
	this.dialog.render();
	YAHOO.util.Dom.replaceClass("fileFormatPicker","hidden","show");	
	TSWIDGET.EVENTS.subscribeEx('evtFileFormatLoaded', this.initUI, this, true);
	TSWIDGET.EVENTS.subscribeEx('evtFilterFileFormatResult', this.filteredHandler, this, true);	
	TSWIDGET.EVENTS.createEvent("evtFileFormatPickerApply");
}

FileFormatPickerView.prototype.init = function() {
	var close = $("div.fileFormatPicker > div.pickerHeader > div.right");
	var cancel = $("div.fileFormatPicker > div.pickerFooter > div > input.cancelButton");
	var apply = $("div.fileFormatPicker > div.pickerFooter > div > input.applyButton");
	var input = $("div.fileFormatPicker > div.pickerBody > div > div > input.findFormatKeyword");
	YAHOO.util.Event.on(close, "click", this.close, null, this);
	YAHOO.util.Event.on(cancel, "click", this.close, null, this);
	YAHOO.util.Event.on(apply, "click", this.apply, null, this);
	YAHOO.util.Event.on(input, "keyup", this.filter, null, this);
	YAHOO.util.Event.on("btnPickerClear", "click", this.clearAll, null, this);
}

FileFormatPickerView.prototype.initUI = function(data){
	if ($("#listItemFirst").html() == "") {
		this.data = data;			
		this.buildFileFormatHtml();
		$("div.fileFormatPicker > div.pickerBody > div > div > input.findFormatKeyword")[0].value = "";		
	}
	else{		
		this.Reset();	
	}
}
FileFormatPickerView.prototype.apply = function(blShow) {
	var formatObj=this.read();
	var formats = formatObj.formats.join(",");
	if (formats != "") {
		Analytics.prototype.recordEvent("Search_Filter_Compatibility","Search_Filter_Compatibility:select_format",formatObj.formatName.join(","));	
		TSWIDGET.EVENTS.fireEvent('evtFileFormatPickerApply', formats)
	}
}
FileFormatPickerView.prototype.clearAll = function() {
	$("#listItemFirst > li > div > input[type='checkbox']").each(function(){this.checked = false;});
	$("#listItemSecond > li").each(function(){display(this,false);});
	this.showSelectedItem(false);
}
FileFormatPickerView.prototype.show = function(blShow) {
	this.setIEStyle(false);
	this.dialog.show();
	this.dialog.cfg.setProperty("fixedcenter",false);
}
FileFormatPickerView.prototype.close = function(){
	this.setIEStyle(true);
	this.dialog.hide();
	this.dialog.cfg.setProperty("fixedcenter",true);
}
FileFormatPickerView.prototype.Reset = function(){
	$("#listItemFirst > li").each(function(){display(this,true);});
	$("#listItemFirst > li > div > input[type='checkbox']").each(function(){this.checked = false;});
	$("#listItemSecond > li").each(function(){display(this,false);});
	$("div.fileFormatPicker > div.pickerBody > div > div > input.findFormatKeyword")[0].value = "";
	this.showSelectedItem(false);
}
FileFormatPickerView.prototype.filter = function(evt){
	var target = evt.target ? evt.target : evt.srcElement;
	var value = jQuery.trim(target.value).toLowerCase();
	TSWIDGET.EVENTS.fireEvent('evtFilterFileFormat', value);
}
FileFormatPickerView.prototype.filteredHandler = function(data){
	this.data = data;			
	this.buildFileFormatHtml();
	this.setSelectedItems();
	/*var idList = data.join(",") + ",";
	$("#listItemFirst > li > div > input[type='checkbox']").each(
		function(){
			var parentItem =  YAHOO.util.Dom.getAncestorByTagName(this,"li");
			if(parentItem!=null){
				if(idList.indexOf(this.value+",")!=-1){// || this.checked==true){
					display(parentItem,true);
				}else{
					display(parentItem,false);
				}
			}					
		}
	);*/
}
FileFormatPickerView.prototype.read = function(){
	var formatName=[];
	var formats = [];
	var formatStruct=new Object();
	$("#listItemSecond > li").each(
								function() {
									if(!YAHOO.util.Dom.hasClass(this,"hidden")){
										formats.push($(this).attr("name"));
										formatName.push($(this).attr("title"));
									}
								});
	formatStruct.formats=formats;
	formatStruct.formatName=formatName;
	return formatStruct;
}

FileFormatPickerView.prototype.addSelectedItem = function(evt){
	var target = evt.target ? evt.target : evt.srcElement;
	if(target.checked==true){
		this.addItem(target.name,target.value);
	}
	else{
		this.removeItem(target.value);
	}
}

/***** Private, helper *******/
// fixed the bug: can't focus on popup in IE, seems it was blocked by a mask
FileFormatPickerView.prototype.setIEStyle = function(blReset){
	if(YAHOO.env.ua.ie!=0){  // is IE		
		var container = document.getElementById("OneColumnContent");
		var value = blReset ? "relative" : "static";
		$(container).css("position",value);
	}
}
FileFormatPickerView.prototype.buildFileFormatHtml = function(){
	var html = "";
	if(this.data!=null){
		var len = this.data.length;
		var arrHtml = [];
		for(var i=0;i<len;i++){
			arrHtml.push(this.buildFormatListItem(this.data[i]));
		}
		html = arrHtml.join('');
		var reg = /,+/g;
		html = html.replace(reg," ");
		reg = /\s+/g;
		html = html.replace(reg," ").trim();
	}
	$("#listItemFirst").html(html);
	var checkboxes = $("#listItemFirst > li > div > input[type='checkbox']");
	YAHOO.util.Event.on(checkboxes, "click", this.addSelectedItem, null, this);
}
FileFormatPickerView.prototype.buildFormatListItem = function(obj){
	var appName = obj.appName;
	var formatName = obj.formatName;
	var shortAppName = appName;
	var title = "";
	if(appName.length>23){
		shortAppName = appName.substr(0,20) + "...";
		title = appName;
	}
	var result = '<li><div class="itemLeft"><input name="'+appName+'__'+formatName+'" value="' + obj.formatID + '" type="checkbox" id="chkFormat' 
				+ obj.formatID + '" /></div><div class="itemRight"><label class="app" for="chkFormat' + obj.formatID + '" title="'+title+'">' + shortAppName
				+ '</label><label class="format">' + formatName + '</label></div></li>';
	return result;
}
FileFormatPickerView.prototype.setSelectedItems = function(){
	$("#listItemSecond > li").each(
		function() {
			if(!YAHOO.util.Dom.hasClass(this,"hidden")){
				var itemId = $(this).attr("name");
				var item = $("#chkFormat"+itemId);
				if(item.length!=0){
					item[0].checked = true;
				}
			}
		});
}
FileFormatPickerView.prototype.addItem = function(name,id){
	var itemId = "#selectedFFItem" + id;
	var item = $(itemId);
	if(item.length!=0){
		display(YAHOO.util.Dom.getAncestorByTagName(item[0],"li"),true);
	}
	else{
		var arr = name.split("__");
		var appName = arr[0];
		var formatName = arr[1];
		var shortAppName = appName;
		var title = "";
		if(appName.length>23){
			shortAppName = appName.substr(0,20) + "...";
			title = appName;
		}
		var html = '<li name="'+id+'" title="'+shortAppName+'"><div class="itemLeft" id="selectedFFItem'+id+'"></div><div class="itemRight"><label class="app" title="'+title+'">' + shortAppName
					+ '</label><label class="format">' + formatName + '</label></div></li>';
		$("#listItemSecond").append(html);
		var removes = $("#listItemSecond > li > div.itemLeft");
		YAHOO.util.Event.on(removes, "click", this.removeFromSelectedItem, null, this);
	}
	this.showSelectedItem(true);
}
FileFormatPickerView.prototype.removeItem = function(id){
	var itemId = "#selectedFFItem" + id;
	var item = $(itemId);	
	if(item.length!=0){
		display(YAHOO.util.Dom.getAncestorByTagName(item[0],"li"),false);
	}
	var items = $("#listItemSecond > li");
	var len = items.length;
	var hasItem = false;
	for(var i=0;i<len;i++){
		if(!YAHOO.util.Dom.hasClass(items[i],"hidden")){
			hasItem = true;
			break;
		}
	}
	if(hasItem==false){
		this.showSelectedItem(false);
	}
}
FileFormatPickerView.prototype.removeFromSelectedItem = function(evt){
	var target = evt.target ? evt.target : evt.srcElement;
	var id = target.id.replace("selectedFFItem","")
	this.removeItem(id);
	var item = $("#chkFormat"+id);
	if(item.length!=0){
		item[0].checked = false;
	}
}
FileFormatPickerView.prototype.showSelectedItem = function(blShow){
	display("listItemSecond",blShow);
	display("btnPickerClear",blShow);
	display("listItemSelectedTip",!blShow);
}