var catIdHolder = new GupShup.forms.controls({name:'picCategory.catId'});	
var contentTypeHolder = new GupShup.forms.controls({name:'picCategory.richContentType'});

GupShup.util.disableRightClick();

(function(){
GupShup.html.picLib = {};
GupShup.html.picLib.activeId = -1;
GupShup.html.picLib.isGalleryPage = false;

GupShup.html.picLib.setActiveId = function(id){
GupShup.html.picLib.activeId = id;
};

GupShup.html.picLib.setPreviewGreeting = function(img){
	switch(img.contentType)
	{
		case "IMAGE" :
		case "GREETINGS" :
		{
				GupShup.html.util.hideElement("polytuneAVGreetingContainer");
				GupShup.html.util.showElement("webarooGreetings");
				var picList = document.getElementsByName("selectedImage");
				for(var i = 0 ; i < picList.length ; i++)
				{
					picList[i].src = img.url;
					var descDiv = picList[i].parentNode.getElementsByTagName("DIV");
					for(var j = 0 ; j < descDiv.length; j++)
							descDiv[j].innerHTML = img.text;
				}
				document.forms['greetingInfo'].type.value = "IMAGE";

		}break;
		case "POLYTONE" : 
		case "TRUETONE" :
		case "WALLPAPER" :
		case "THEME" :
		case "AUDIO" : 
		case "VIDEO" :  
						GupShup.html.util.hideElement("webarooGreetings");
						GupShup.html.util.showElement("polytuneAVGreetingContainer");
						GupShup.util.setInnerHTML("polytuneAVGreeting",GupShup.html.picLib.getHTMLStringOfPictures([img],true,false));
						document.forms['greetingInfo'].type.value = img.contentType;
						break;	
	}
	GupShup.util.setInnerHTML("attachedGreetingHeader", GupShup.conf.richContentTypes[img.contentType].camelCase);
	document.forms['greetingInfo'].cost.value = img.cost;
	document.forms['greetingInfo'].desc.value = img.text;
};

GupShup.html.picLib.renderCategoryList = function(catStr){
	var catObj = GupShup.util.getJsonFromResponse(catStr);
	//ref: http://www.w3schools.com/jsref/jsref_sort.asp
	var sortedCats = catObj.smsRichContentCategories.sort(GupShup.html.picLib.sortCategoryList);
	var html = GupShup.util.expandTemplate(GupShup.util.getInnerHTML('catTemplate'), GupShup.html.picLib.map.catTemplate, sortedCats);
	GupShup.util.setInnerHTML('catListContainer',html);
};

GupShup.html.picLib.sortCategoryList = function(cat1, cat2){
	return GupShup.conf.richContentTypes[cat1.richContentType].rank - GupShup.conf.richContentTypes[cat2.richContentType].rank;
};

GupShup.html.picLib.renderFeaturedContent = function(content){
	var contentObj = GupShup.util.getJsonFromResponse(content);
	var html = GupShup.util.expandTemplate(GupShup.util.getInnerHTML('featuredRichContentTemplate'), GupShup.html.picLib.map.featuredRichContent, [contentObj]);
	GupShup.util.setInnerHTML('featuredRichContent',html);
	GupShup.html.picLib.showFeaturedContent();
};

GupShup.html.picLib.clearCategoryHighlighting = function(){
	var catList = document.getElementsByName('richContentCategory');
	for(var i = 0 ; i < catList.length ; i++ )
	 {
		catList[i].className = "";
	 }
}

GupShup.html.picLib.highlightSubCategory = function(catId,type){
	GupShup.html.picLib.clearCategoryHighlighting();
	var catList = document.getElementsByName('richContentCategory');
	for(var i = 0 ; i < catList.length ; i++ )
	 {
		if(catList[i].id == ("richContentCategory_" + type + "_" + catId))
			catList[i].className = "active";
	 }
};

GupShup.html.picLib.highlightCategory = function(type){
	GupShup.html.picLib.clearCategoryHighlighting();
	GupShup.html.picLib.expandCategoryList(type);
	var catList = document.getElementsByName('richContentCategory');
	for(var i = 0 ; i < catList.length ; i++ )
	 {
		if(catList[i].id == ("richContentCategory_" + type))
			catList[i].className = "active";
	 }
};

GupShup.html.picLib.collapseCategoryList = function(){
	var catList = document.getElementsByName('richContentSubCategories');
	for(var i = 0 ; i < catList.length ; i++ )
	 {
		catList[i].style.display = "none";
	 }
}

GupShup.html.picLib.expandCategoryList = function(type){
	GupShup.html.picLib.collapseCategoryList();
	var catList = document.getElementsByName('richContentSubCategories');
	for(var i = 0 ; i < catList.length ; i++ )
	 {
		if(catList[i].id == ("richContentSubCategories_" + type))
		{
			catList[i].style.display = "block";
		}
	 }
};

GupShup.html.picLib.showFeaturedContent = function(){
GupShup.html.picLib.clearCategoryHighlighting();
GupShup.html.picLib.collapseCategoryList();
GupShup.util.setInnerHTML("paginationContent","");
GupShup.util.setInnerHTML("catRichContent","");
GupShup.html.util.showElement("featuredRichContent");
};

GupShup.html.picLib.getContentType = function(pic){
	if(pic.contentType != "IMAGE")
		return pic.contentType;
		
	if(parseInt(pic.cost) > 0 || GupShup.util.trim(pic.text).length > 0)
		return "GREETINGS";
	else
		return "IMAGE";
};

GupShup.html.picLib.unselectGreeting = function(){
	GupShup.html.picLib.setActiveId(-1);
};

GupShup.html.picLib.getSelectedGreeting = function()
{
	var picList = document.getElementsByName("picMsg");
	for(var i = 0 ; i < picList.length ; i++)
	{
		switch(picList[i].tagName)
		{
			case "IMG" : if(picList[i].alt == GupShup.html.picLib.activeId)
							return picList[i];
			case "EMBED" : 
			case "OBJECT" : 
							var idStr = picList[i].id;
							if(idStr.indexOf(GupShup.html.picLib.activeId) > -1)
								return picList[i];
		}
	}
	
	return {};
};

GupShup.html.picLib.selectGreeting = function(imgId)
{
	var picList = document.getElementsByName("picMsg");
	for( i = 0 ; i < picList.length ; i++)
	{
		switch(picList[i].tagName)
		{
			case "IMG" : if(picList[i].alt == imgId)
							GupShup.html.picLib.setActiveId(imgId);
						 break;
			case "EMBED" : 
			case "OBJECT" : 
							var idStr = picList[i].id;
							if(idStr.indexOf(imgId) > -1)
								GupShup.html.picLib.setActiveId(imgId);
							break;
		}
	}
};

GupShup.html.picLib.getHTMLStringOfPictures = function(picList, forPicGallery, show_Cost){
	var op = '';
	for(var i = 0 ; i < picList.length; i ++ )
	{
		picList[i].showCost = show_Cost;
		picList[i].greetingClass = show_Cost ? "greetingFloat" : "";
		
		var pic = picList[i];
		if(typeof pic.imageUrl == "undefined")
			pic.imageUrl = "";
			
		var tmpl = '';
		var ele = '';
		var clearFix = '';
		var contentType = GupShup.html.picLib.getContentType(pic); //Override content type 
		if(forPicGallery)
		{
			switch(contentType)
			{
				case 'IMAGE' : ele = 'picGalleryImageTemplate'; clearFix = "<div style=\"clear:both\"></div>"; break;
				case 'GREETINGS' : ele = 'greetingGalleryImageTemplate'; clearFix = "<div style=\"clear:both\"></div>"; break;
				case 'AUDIO' :
				case 'TRUETONE' :
				case 'POLYTONE' :  ele = 'tonesContainerTemplate'; break;
				case 'VIDEO' :  ele = 'videoContainerTemplate'; break;
				case 'WALLPAPER' :
				case 'THEME' : ele = 'themesContainerTemplate'; break;
			}
		}
		else
		{
			switch(contentType)
			{
				case 'IMAGE' : ele = 'picLibImageTemplate'; clearFix = "<div style=\"clear:both\"></div>"; break;
				case 'GREETINGS' : ele = 'greetingLibImageTemplate'; clearFix = "<div style=\"clear:both\"></div>"; break;
				case 'AUDIO' :
				case 'TRUETONE' :
				case 'POLYTONE' :  ele = 'tonesContainerTemplate'; break;
				case 'VIDEO' :  ele = 'videoContainerTemplate'; break;
				case 'WALLPAPER' :
				case 'THEME' : ele = 'themesContainerTemplate'; break;
			}
		}
		
		tmpl = GupShup.util.getInnerHTML(ele);	
		if(i > 0 && i%3 == 0)
			op += clearFix;
		var html = GupShup.util.expandTemplate(tmpl,GupShup.templates.picLibImageMap, [pic]);
		
		op += html.replace('<!--', '').replace('-->', '');
		
		// Create dynamic form elements which will hold text and cost info about pic
		var formName = "greetingInfo_" + pic.id;
		GupShup.util.createAndAppendDummyForm(formName , "desc", pic.text, "cost" , pic.cost, "type" , contentType, "src" , pic.url, "title" , pic.title, "id" , pic.id, "imageUrl", pic.imageUrl);
	}
	
	return op;
};

GupShup.html.picLib.getPicListStringWithPagination = function(smsRichContentGal,contentType,forPicGallery){
	var smsPictures = smsRichContentGal.smsRichContent;
	var paginationContent = "";	
	var galleryContent = "";
	var ele = new Array();
	var paginationObj = {
	start:smsRichContentGal.params.start,
	total:smsRichContentGal.totalForPg,
	returned:smsPictures.length,
	windowSize:GupShup.conf.windowSize,
	listType : GupShup.conf.richContentTypes[contentType].name
	};

	var reqObj =  {
		url:GupShup.conf.readUrl,
		queryStr: "type=SMS_RICH_CONTENT_LIST&catId=" + smsRichContentGal.catId + "&richContentType=" + contentType,
		callBack:{
		success:GupShup.callback.processPicLibResponse,
		failure:GupShup.callback.processPicLibResponse,
		argument:smsRichContentGal.argument
		} 
	};
	paginationContent = GupShup.util.expandPaginationTemplate(reqObj,paginationObj,'PICGALLERY_' + contentType + "_" + (smsRichContentGal.catId > 0 ? smsRichContentGal.catId : '') );
	var op = GupShup.html.picLib.getHTMLStringOfPictures(smsPictures,forPicGallery,true);
	return {content:op,pagination:paginationContent};
};

GupShup.html.picLib.getCategoryContent = function(type){
	if((catIdHolder.get('value') == -1) && (contentTypeHolder.get('value') == type))
		return;
		
	catIdHolder.set(-1);
	contentTypeHolder.set(type);

	GupShup.html.picLib.highlightCategory(type);
	var callback = {
	success:GupShup.callback.processPicLibResponse,
	failure:GupShup.callback.processPicLibResponseErr
	}
	GupShup.html.util.submitFormUsingAjax('POST', GupShup.conf.readUrl , callback, 'picCategory');
};

GupShup.html.picLib.getSubCategoryContent = function(catId,type){
	if((catIdHolder.get('value') == catId) && (contentTypeHolder.get('value') == type))
		return;
		
	catIdHolder.set(catId);
	contentTypeHolder.set(type);

	GupShup.html.picLib.highlightSubCategory(catId,type);
	var callback = {
	success:GupShup.callback.processPicLibResponse,
	failure:GupShup.callback.processPicLibResponseErr
	}
	GupShup.html.util.submitFormUsingAjax('POST', GupShup.conf.readUrl , callback, 'picCategory');
};

GupShup.html.picLib.processPicLibCustomResponse = function(text){
	var xhr = new Object();
	xhr.responseText = text;
	GupShup.callback.processPicLibResponse(xhr);
};

GupShup.callback.processPicLibResponse = function(xhr){
	var smsPicGal = GupShup.util.getJsonFromResponse(xhr.responseText);
	var op = GupShup.html.picLib.getPicListStringWithPagination(smsPicGal,contentTypeHolder.getValue(),GupShup.html.picLib.isGalleryPage);
	var subCatheaderObj = {};
	if(smsPicGal.catId > 0)
		subCatheaderObj.title = smsPicGal.catDetails.title;
	else
		subCatheaderObj.title = smsPicGal.title;
	subCatheaderObj.richContentType = smsPicGal.params.richContentType;
	
	var subCatheader = GupShup.util.expandTemplate(GupShup.util.getInnerHTML("richContentSubHeader"),GupShup.html.picLib.map.richContentSubHeader, [subCatheaderObj]);
	GupShup.html.util.hideElement("featuredRichContent");
	GupShup.util.setInnerHTML('catRichContent',subCatheader + op.content);
	GupShup.util.setInnerHTML('paginationContent',op.pagination);

};

GupShup.callback.processPicLibResponseErr = function(){
};

})();

(function(){
GupShup.html.picLib.map = {};
GupShup.html.picLib.map.methods = {
	
	getSuperCatExpansion : function(richContent_Type){
		var expObj = [{richContentType: richContent_Type,title:richContent_Type}];
		return GupShup.util.expandTemplate(GupShup.util.getInnerHTML('superCatListTemplate'), GupShup.html.picLib.map.superCatListTemplate, expObj);
	},
	
	getSubCatExpansion : function(subCatList, data){
		if(subCatList.length < 1)
			return "";
		else
		{
			for(var i = 0; i < subCatList.length ; i++)
				subCatList[i].richContentType = data.richContentType;
			return GupShup.util.expandTemplate(GupShup.util.getInnerHTML('subCatListTemplate'), GupShup.html.picLib.map.subCatListTemplate, subCatList);
		}
	},
	
	getRichSubContentExpansion : function(smsRichContent){
		return GupShup.html.picLib.getHTMLStringOfPictures(smsRichContent,GupShup.html.picLib.isGalleryPage,true);
	},

	getRichSubContentExpansionClass : function(type){
		return ((type == "AUDIO") || (type == "POLYTONE") || (type == "TRUETONE")) ? "tones" : "";
	},
	
	getSubCatHeaderExpansion : function(type){
		var expObj = [{richContentType: type}];
		return GupShup.util.expandTemplate(GupShup.util.getInnerHTML('featuredSubContentHeaderTemplate'), GupShup.html.picLib.map.featuredRichSubHeader, expObj);
	},
	
	getFeaturedRichContent : function(data){
		var sortedCats = data.sort(GupShup.html.picLib.sortCategoryList);
		return GupShup.util.expandTemplate(GupShup.util.getInnerHTML('featuredRichSubContentTemplate'), GupShup.html.picLib.map.featuredRichSubContent, sortedCats);
	},
	
	getSuperCatTitle : function(type){
		return GupShup.conf.richContentTypes[type].name;
	}
};

GupShup.html.picLib.map.superCatListTemplate = [
											{key:'$CONTENT_TYPE$', dataMember:'richContentType'},
											{key:'$CAT_TITLE$',dataMember:'richContentType', dataProcessor: GupShup.html.picLib.map.methods.getSuperCatTitle}
										];

GupShup.html.picLib.map.subCatListTemplate = [
											{key:'$CONTENT_TYPE$', dataMember:'richContentType'},
											{key:'$CATID$', dataMember:'id'},
											{key:'$CAT_TITLE$',dataMember:'title'}
										];
GupShup.html.picLib.map.catTemplate = [
											{key:'$CONTENT_TYPE$', dataMember:'richContentType'},
											{key:'$SUPER_CAT_EXPANSION$', dataMember:'richContentType', dataProcessor: GupShup.html.picLib.map.methods.getSuperCatExpansion},
											{key:'$SUBCATLIST$', dataMember:'subCategories', dataProcessor: GupShup.html.picLib.map.methods.getSubCatExpansion}
										];

GupShup.html.picLib.map.featuredRichSubHeader = [
													{key:'$CONTENT_TYPE$', dataMember:'richContentType'},
													{key:'$CAT_TITLE$',dataMember:'richContentType', dataProcessor: GupShup.html.picLib.map.methods.getSuperCatTitle}
											];
GupShup.html.picLib.map.richContentSubHeader = [
													{key:'$CONTENT_TYPE$', dataMember:'richContentType'},
													{key:'$CAT_TITLE$',dataMember:'title'},
													{key:'$SUPER_CAT_TITLE$',dataMember:'richContentType', dataProcessor: GupShup.html.picLib.map.methods.getSuperCatTitle}
											];
										
GupShup.html.picLib.map.featuredRichSubContent = [
													{key:'$RICHCONTENT_SUB_HEADER$', dataMember:'richContentType', dataProcessor: GupShup.html.picLib.map.methods.getSubCatHeaderExpansion},
													{key:'$RICHCONTENT_UNITS$', dataMember:'smsRichContent', dataProcessor: GupShup.html.picLib.map.methods.getRichSubContentExpansion},
													{key:'$TONE_CLASS$',dataMember:'richContentType', dataProcessor: GupShup.html.picLib.map.methods.getRichSubContentExpansionClass}
											];
GupShup.html.picLib.map.featuredRichContent = [
												{key:'$FEATURED_RICH_CONTENT$', dataMember:'featuredRichContent', dataProcessor: GupShup.html.picLib.map.methods.getFeaturedRichContent}
											];
											
})();