function initCollectionView(){
	if (isIE()) {
		if (getCookie("VideoNavCtlMode") == "enlarged") {
			_elem("mainBodyDivCol").style.visibility = "hidden";
		}
		else {
			_elem("mainBodyDivCol").style.visibility = "visible";
		}
	} 
   
    breadCrumbDataList.push(new breadCrumbData(null, getLocaleStr("source_all", "All")));
    
    categoryChange(null);
}

function categoryChange(categoryCode){
    dojo.xhrGet({
        url: 'service?action=getCollectionCategory' + "&parentCategory=" + (categoryCode != null || categoryCode != undefined ? categoryCode : ""),
        handleAs: "json",
        load: function(data, evt){
            //after success
            renderCategory(data);
        }
    });
}

var MAX_SUB_CATEGORY = 3;
function collectionCatClick(){
    categoryChange(this.catCode);
    updateBreadCrumps(this.catCode, this.catName);
    displayCollection(this.catCode);
	return false;
}

function renderCategory(data){
    document.getElementById("collectionCategory").innerHTML = "";
    for (var i = 0; i < data.length; i++) {
        var catDiv = document.createElement("div");
        catDiv.id = data[i].catCode;
        catDiv.className = "collectionCatSection";
        var catLink = document.createElement("a");
        catLink.href = "#";
        catLink.className = "collectionCatImgSection";
        catLink.onclick = collectionCatClick;
        catLink.catCode = data[i].catCode;
        catLink.catName = data[i].catName;
        var catImg = document.createElement("img");
        catImg.src = data[i].catThumbnailUrl;
        catImg.className = "catImg";
        catLink.appendChild(catImg);
        catDiv.appendChild(catLink);
        
        //cat title and child links
        var catTxtDiv = document.createElement("div");
        catTxtDiv.className = "collectionCatTxtSection";
        var catTitleLink = document.createElement("a");
        catTitleLink.className = "collect_main_txt";
        catTitleLink.innerHTML = data[i].catName;
        catTitleLink.onclick = collectionCatClick;
        catTitleLink.catCode = data[i].catCode;
        catTitleLink.catName = data[i].catName;
        catTitleLink.href = "#";
        catTxtDiv.appendChild(catTitleLink);
        
        var catSubTxtDiv = document.createElement("div");
        catSubTxtDiv.className = "collectionGroupPanelS";
        for (var j = 0; j < data[i].subCat.length && j < MAX_SUB_CATEGORY; j++) {
            var catSubTitleLink = document.createElement("a");
            catSubTitleLink.className = "collection_sub_txt";
            catSubTitleLink.innerHTML = data[i].subCat[j].catName;
            catSubTitleLink.catCode = data[i].subCat[j].catCode;
            catSubTitleLink.catName = data[i].subCat[j].catName;
            catSubTitleLink.onclick = collectionCatClick;
            catSubTitleLink.href = "#";
            catSubTxtDiv.appendChild(catSubTitleLink);
            
            var separator = null;
            if (j < (data[i].subCat.length > MAX_SUB_CATEGORY ? MAX_SUB_CATEGORY : data[i].subCat.length) - 1) {
                separator = document.createTextNode(",");
            }
            else {
                /*
                 * this is the last entry
                 */
                separator = document.createTextNode("...");
            }
            catSubTxtDiv.appendChild(separator);
        }
        catTxtDiv.appendChild(catSubTxtDiv);
        catDiv.appendChild(catTxtDiv);
        
        document.getElementById("collectionCategory").appendChild(catDiv);
    }
    
}

var breadCrumbDataList = [];
function breadCrumbData(catCode, catName){
    this.catCode = catCode;
    this.catName = catName;
}

function updateBreadCrumps(catCode, catName){
    if (catCode) {
        breadCrumbDataList.push(new breadCrumbData(catCode, catName));
    }
    var breadCrumb = document.getElementById("CategoryBreadCrumbs");
    breadCrumb.innerHTML = "";
    for (j = 0; j < breadCrumbDataList.length; j++) {
        switch (j) {
            case 0:
                breadCrumb.appendChild(renderBreadCrumpJoint(JOINT_TYPE_START, breadCrumbDataList[j].catCode, breadCrumbDataList[j].catName))
                break;
            case breadCrumbDataList.length - 1:
                break;
            default:
        }
        
        var bCDiv = document.createElement("div");
        bCDiv.catCode = breadCrumbDataList[j].catCode;
        bCDiv.onclick = catBreadCrumbClick;
        bCDiv.className = "breadCrumpsBody";
        bCDiv.appendChild(document.createTextNode(breadCrumbDataList[j].catName));
        breadCrumb.appendChild(bCDiv);
        if (j < breadCrumbDataList.length - 1) {
            breadCrumb.appendChild(renderBreadCrumpJoint(JOINT_TYPE_MID, breadCrumbDataList[j].catCode, breadCrumbDataList[j].catName))
        }
        else 
            if (j == breadCrumbDataList.length - 1) {
                breadCrumb.appendChild(renderBreadCrumpJoint(JOINT_TYPE_END, breadCrumbDataList[j].catCode, breadCrumbDataList[j].catName));
            }
    }
    
}

var JOINT_TYPE_END = 0, JOINT_TYPE_START = 1, JOINT_TYPE_MID = 3;

function renderBreadCrumpJoint(jointType, catCode, catName){
    var bCDivJoin = document.createElement("div");
    bCDivJoin.catCode = catCode;
    bCDivJoin.onclick = catBreadCrumbClick;
    switch (jointType) {
        case JOINT_TYPE_END:
            bCDivJoin.className = "breadCrumpsEnd";
            break;
        case JOINT_TYPE_START:
            bCDivJoin.className = "breadCrumpsStart";
            break;
        case JOINT_TYPE_MID:
            bCDivJoin.className = "breadCrumpsMid";
            break;
    }
    return bCDivJoin;
}

function catBreadCrumbClick(){
    for (k = breadCrumbDataList.length - 1; k >= 0; k--) {
        if (breadCrumbDataList[k].catCode != this.catCode) {
            breadCrumbDataList.pop();
        }
        else {
            break;
        }
    }
    categoryChange(this.catCode);
    updateBreadCrumps(null, null);//refresh breadcrumbs
    displayCollection(this.catCode);
	return false;
}

function displayCollection(catCode){
    
    dojo.xhrGet({
        url: "service?action=getRelatedCollections&LimitResults=100&collectionCatCode=" + catCode,
        load: function(data, evt){
            renderCollectionPrev(data);
            
        },
        handleAs: "xml"
    });
    
}

function getCollectionDetail(collectionId){
    
    dojo.xhrPost({
        url: "service?action=findRelatedCollections&collectionId=" + collectionId,
        load: function(data, evt){
            renderCollectionDetail(data);
        },
        handleAs: "json"
    });
    
}

function renderCollectionDetail(data){
	_elem("collectionDetail").innerHTML="";
    for (k=0;k<data.length;k++) {
		collectionId = data[k].id;
		compId= data[k].comp_id;
		//hide collection summery
		_elem("collectionDiv").style.display='none';
		_elem("collectionDetail").style.display='block';
		
        var divLeft = document.createElement("div");
        divLeft.id = "collectionDetailLeft";
        var colImgLink = document.createElement("a");
		colImgLink.id="collectionImgLink";
        var colImg = document.createElement("img");
		colImg.id="collectionImg";
        colImg.src = data[k].thumbnail;
        colImgLink.appendChild(colImg);
        var pageUrl = "collectionPage.html?pageId=" + data[k].id + "&ownerId=" + data[k].comp_id;
        colImgLink.href = pageUrl;
        divLeft.appendChild(colImgLink);
        
        divLeft.appendChild(createCollectionDetailNav(getLocaleStr('subscribe', 'Subscribe'), "images/subscribe.gif", "", "#", subscribe));
         divLeft.appendChild(createCollectionDetailNav(getLocaleStr('join_network','Join Network'), "images/network_add.gif", "", "#", joinNetworkClicked));
		divLeft.appendChild(createCollectionDetailNav(getLocaleStr('visit_collection_page', 'Visit Page'), "images/sitelink_small.jpg", "", pageUrl, null));
        divLeft.appendChild(createCollectionDetailNav(getLocaleStr('collection_content', 'Content'), "video_images/player_controls_vol_on.gif", "", "#", playCollection));
       
        
        var divRight = document.createElement("div");
        divRight.id = "collectionDetailRight";
        var title = document.createElement("a");
        title.innerHTML = data[k].name;
        title.id = "title";
		title.href=pageUrl;
        divRight.appendChild(title);
        divRight.appendChild(createCollectionDetailNav("http://multimq.com/media/"+pageUrl, null, getLocaleStr('link', 'Link')+":", pageUrl, null));
        divRight.appendChild(createCollectionDetailNav(data[k].category, null, getLocaleStr('collection_cat', 'Category')+":", "", null));
        divRight.appendChild(createCollectionDetailNav(data[k].creator, null, getLocaleStr('collection_creator', 'Creator')+":", "profile.html?pageId="+data[k].comp_id+"&ownerId="+data[k].comp_id, null));
        divRight.appendChild(createCollectionDetailNav(data[k].last_updated, null, getLocaleStr('collection_updated', 'Last Updated')+":", "", null));
        var tags = [];
        if (data[k].tags) {
            tags = data[k].tags.split(",");
        }
        var tagNode = createCollectionDetailNav(null, null, getLocaleStr('tags_tag', 'Tags')+":", "", null);
        for (i = 0; i < tags.length; i++) {
            var tagLink = document.createElement("a");
            tagLink.onclick = collectionTagClicked;
            tagLink.tag = tags[i];
			tagLink.href="#";
            tagLink.innerHTML = tags[i];
            tagLink.className = "collectionTags";
            tagNode.appendChild(tagLink);
        }
        divRight.appendChild(tagNode);
		
	       
		var descDiv = document.createElement("div");
		descDiv.id="collectionDescDiv";
		var descTitle=document.createElement("span");
		descTitle.id="description";
		descTitle.innerHTML=getLocaleStr('collection_desc', 'Description');
		descDiv.appendChild(descTitle);
		var descTxt=document.createElement("p");
		descTxt.innerHTML=data[k].desc;
		descDiv.appendChild(descTxt);
		divRight.appendChild(descDiv);
 	
      
	   _elem("collectionDetail").appendChild(divLeft) ;   
      _elem("collectionDetail").appendChild(divRight) ; 
    }
}

function createCollectionDetailNav(title, icon, iconAlt, link, onClickFunction){
    var navDiv = document.createElement("div");
    var iconLink = null;
    if (icon || iconAlt) {
        iconLink = document.createElement("a");
        iconLink.id = "CollectionDetailIcon";
        var iconImg=null;
		if (icon) {
			iconImg = document.createElement("img");
			iconImg.src = icon;
			iconImg.alt = iconAlt;
			iconImg.className = "navDetailIcon";
			
		}else{
			iconImg = document.createTextNode(iconAlt);
			iconLink.className = "navDetailTxt";
		}
        
        iconLink.appendChild(iconImg);
        iconLink.onclick = onClickFunction;
        navDiv.appendChild(iconLink);
    }
   if (title) {
   	var txtLink = document.createElement("a");
   	txtLink.id = "CollectionDetailTextLink";
   	txtLink.onclick = onClickFunction;
   	txtLink.href = link;
   	txtLink.appendChild(document.createTextNode(title));
   	
   	
   	navDiv.appendChild(txtLink);
   }
    return navDiv;
}
function joinNetworkClicked(){
	joinNetwork(compId);
}
function collectionTagClicked(){

}
function playCollection(){
	loadNavigation('notification','notificationType=findRelated&collectionId='+collectionId,param);
}
var collectionId = null, subOptions = "EW",compId=null;
function subscribe(){
	signin();
    dojo.xhrPost({
        url: "service?action=subscribe&collectionId=" + collectionId + "&subOptions=" + subOptions+"&compId="+compId,
        load: function(data, evt){
            if (data.status = 'SUCCESS') {
                alert(getLocaleStr("subscription_msg", "Subscription Succeeded"));
            }
        },
        handleAs: "json"
    });
    
}
function onPanelClick(){
	if(this.id=="panelCtl1"){
		if(_elem("collectionDiv").style.display=="none")
	 _elem("collectionDiv").style.display='block';
	 else	
	  _elem("collectionDiv").style.display='none';
	}
	if(this.id=="panelCtl2"){
		if(_elem("collectionDetail").style.display=="none")
	 _elem("collectionDetail").style.display='block';
	 else	
	  _elem("collectionDetail").style.display='none';
	}
}