var inttoShow = 4;

var buttons = document.getElementById("dvDisplayangel").getElementsByTagName("img");
document.getElementById("dvanglethumbnail").innerHTML = " ";

try
{

	for (intI = 0; intI < inttoShow; intI++)
	{
	    buttons[intI].id = "angle" + intI;
	    var objCtrl = document.getElementById("angle" + intI);
	    //alert(objCtrl);
	    
	    //alert(objCtrl.src);
	    //alert(buttons[intI].width);
	    //alert(objCtrl.height);
	    
	    var propHeight = proporHeight(objCtrl.width, objCtrl.height, 70)
	    document.getElementById("dvanglethumbnail").innerHTML += "&nbsp;<img src='" + objCtrl.src + "'/>&nbsp;&nbsp;" ;
	}
}
catch(err)
{
	//error description
}


//alert(document.getElementById("dvanglethumbnail").innerHTML);


buttons = document.getElementById("dvDisplayangel").getElementsByTagName("img");
for (intI = 0; intI < buttons.length; intI++)
{
    buttons[intI].id = "angle" + intI;
    if (intI == 0)
        document.getElementById("dvDisplay").innerHTML = "<img src='" + document.getElementById("angle" + intI).src + "'/>" ;
}
buttons = document.getElementById("dvDisplayColor").getElementsByTagName("img");
for (intI = 0; intI < buttons.length; intI++){
    buttons[intI].id = "color" + intI;
}

buttons = document.getElementById("dvanglethumbnail").getElementsByTagName("img");
for (intI = 0; intI < buttons.length; intI++){
    buttons[intI].id = "anglethumb" + intI;
    buttons[intI].onclick = function(){fnHandleMulticolorImage("angel", this);};//fnHandleMulticolorImage;
}
buttons = document.getElementById("dvcolorthumbnail").getElementsByTagName("img");
for (intI = 0; intI < buttons.length; intI++){
    buttons[intI].id = "colorthumb" + intI;
	buttons[intI].onclick = function(){fnHandleMulticolorImage("color", this);};;
}


// functionss .........

function proporHeight(actualWidth, actualHeight, propWidth)
{
	var prportionateWidth = (parseInt(actualWidth, 10)/parseInt(actualHeight, 10))*parseInt(propWidth, 10);
    return prportionateWidth;
    
}

function fnHandleMulticolorImage(strFrom, srcElem)
{
    var imSrcgObj = srcElem;
    
    if (strFrom == "angel")
    {   
        var idNum = imSrcgObj.id.replace("anglethumb", "");
        var strFieldName = "angle" + idNum;
        var strfldName = "";
        document.getElementById("dvDisplay").innerHTML = "<img src='" + document.getElementById(strFieldName).src + "'/>" ;
    }
    else if (strFrom == "color")
    {
        var idNum = imSrcgObj.id.replace("colorthumb", "");
        var strFieldName = "color" + idNum;
        document.getElementById("dvDisplay").innerHTML = "<img src='" + document.getElementById(strFieldName).src + "'/>" ;
    }
}

function fnMoveNext(srcElem)
{
	try
	{
	    var btnPreNext = document.getElementById("dvanglethumbnail").getElementsByTagName("img");
	    var strHTML = "";
	    //alert(btnPreNext.length);
	    //if (btnPreNext.length > 3)
	   // {
		    for (intI = 0; intI < btnPreNext.length; intI++){
		        strHTML += "&nbsp;<img id = 'dvanglethumbnail" + intI + "' src='" + document.getElementById("angle" + (parseInt(intI, 10) + 1)).src + "'/>&nbsp;&nbsp;" ;
		    }
		    document.getElementById("dvanglethumbnail").innerHTML  = strHTML;
		    
		    //reassign the function
		    btnPreNext = document.getElementById("dvanglethumbnail").getElementsByTagName("img");
		    for (intI = 0; intI < btnPreNext.length; intI++)
		    {
		        btnPreNext[intI].id = "anglethumb" + (parseInt(intI, 10) + 1);
		        btnPreNext[intI].onclick = function(){fnHandleMulticolorImage("angel", this);};
		    }
		//}
	}
	catch(err)
	{
		//error description
	}
}

function fnMovePrev(srcElem)
{
    var btnPreNext = document.getElementById("dvanglethumbnail").getElementsByTagName("img");
    var strHTML = "";
    for (intI = 0; intI < btnPreNext.length; intI++)
    {
        strHTML += "&nbsp;<img id = 'dvanglethumbnail" + intI + "' src='" + document.getElementById("angle" + (parseInt(intI, 10))).src + "'/>&nbsp;&nbsp;" ;
    }
    document.getElementById("dvanglethumbnail").innerHTML  = strHTML;
    
    //reassign the function
    btnPreNext = document.getElementById("dvanglethumbnail").getElementsByTagName("img");
    for (intI = 0; intI < btnPreNext.length; intI++)
    {
        btnPreNext[intI].id = "anglethumb" + (parseInt(intI, 10));
        btnPreNext[intI].onclick = function(){fnHandleMulticolorImage("angel", this);};
    }
}


// prod details script attaching for label name changes and title category data population


	var strConsumer_Model_Category, strTitleSubCategory;
	strConsumer_Model_Category = "ctl00_PlaceHolderMain_editmodepanel123_Consumer_Model_Category_Lookup";
	strTitleSubCategory = "ctl00_PlaceHolderMain_editmodepanel123_TitleSubCategorycon_ctl00_TextField"
	
	function fnonSubmitHandlers()
	{
		if (document.getElementById(strConsumer_Model_Category) == null)
		{
			strConsumer_Model_Category = "ctl00_PlaceHolderMain_editmodepanel123_Consumer_Model_Category_ctl01";
			document.getElementById(strTitleSubCategory).value =  document.getElementById(strConsumer_Model_Category).value;
		}
		else
		{
			fnPopulateModelCategory_Lookp();
		}
		//alert(document.getElementById(strTitleSubCategory).value);
		
	}
		
	function fnPopulateModelCategory_Lookp()
	{
		var objModelCategory = document.getElementById(strConsumer_Model_Category);
		var intSalIndex = objModelCategory.selectedIndex;
		
		document.getElementById(strTitleSubCategory).value = objModelCategory.options[intSalIndex].text;	
		
	}
	
	function fnPopulateModelCategory()
	{
		document.getElementById(strTitleSubCategory).value =  document.getElementById(strConsumer_Model_Category).value;//objModelCategory.options[intSalIndex].text;	
	}

	//////////////
	
	
	// hide the controls which are not applicable
	function get_hostname_from_url(url) { 
	    return url.match(/:\/\/(.[^/]+)/)[1]; 
	} 
	var strHost = "http://" + get_hostname_from_url(window.location.href);
	 
	objCtlGroup = "ctl00_PlaceHolderMain_editmodepanel123_ConsumerGroup_Lookup";
    if (document.getElementById(objCtlGroup) == null)
    {
        objCtlGroup = "ctl00_PlaceHolderMain_editmodepanel123_ConsumerGroup_ctl01";
        flgGrpDrpdwn = false;
    }
    else
    {
    	flgGrpDrpdwn = true;
    	document.getElementById(objCtlGroup).onchange = populateSubcategory;
    }
    
    objCtlSubCategory = "ctl00_PlaceHolderMain_editmodepanel123_GroupCategoryConsumer_Lookup";
    if (document.getElementById(objCtlSubCategory) == null)
    {
    	flgCateDrpdwn = false;
        objCtlSubCategory = "ctl00_PlaceHolderMain_editmodepanel123_GroupCategoryConsumer_ctl01";
        document.getElementById(objCtlSubCategory).onfocus = populateSubcategory;
    }
    else
    {
    	flgCateDrpdwn = true;
    	document.getElementById(objCtlSubCategory).onchange = populateModelcategory;
    }
    
    objCtlModelCategory = "ctl00_PlaceHolderMain_editmodepanel123_Consumer_Model_Category_Lookup";
    if (document.getElementById(objCtlModelCategory) == null)
    {
    	flgModelDrpdwn = false;
        objCtlModelCategory = "ctl00_PlaceHolderMain_editmodepanel123_Consumer_Model_Category_ctl01";
        document.getElementById(objCtlModelCategory).onfocus = populateModelcategory;
    }
    else
    {
    	flgModelDrpdwn = true;
    }
    
    
    
    var lists;
    var itemsCategory;
    var itemsModelCategory;
    var flgGrpDrpdwn, flgCateDrpdwn, flgModelDrpdwn;
    
    
    var xmlSubcategoryList= new ActiveXObject("Microsoft.XMLDOM");
    xmlSubcategoryList.async = false;
    
    var xmlModelCategoryList= new ActiveXObject("Microsoft.XMLDOM");
    xmlModelCategoryList.async = false;
    
    if (document.getElementById(objCtlModelCategory) != null)
    {
	    lists = new SPAPI_Lists(strHost);
		//var itemsGroup = lists.getListItems("Consumer Group Category");
		 
		 
		itemsCategory = lists.getListItems("Consumer Sub Category");
		itemsModelCategory = lists.getListItems("Consumer Model category");
	 
	 	//var xmlCategoryList = new ActiveXObject("Microsoft.XMLDOM");
	    //xmlCategoryList.async = false;
	    
	    //xmlCategoryList.loadXML(itemsGroup.responseXML.xml)
	    xmlSubcategoryList.loadXML(itemsCategory.responseXML.xml)
	    xmlModelCategoryList.loadXML(itemsModelCategory.responseXML.xml)
		
	    
    }
    
    
    function populateSubcategory()
    {
    	if (flgGrpDrpdwn == false)
    	{
        	var selectedVal = document.getElementById(objCtlGroup).value;
        }
        else
        {
        	var selectedVal = document.getElementById(objCtlGroup).value + ";#";
        }
        	
        var strXpath = "//rs:data";
        
        var objRootNode = xmlSubcategoryList.documentElement.selectSingleNode(strXpath);
        var strChoices = "";
        
        if (flgCateDrpdwn == true)
		{
			ClearDropDown(objCtlSubCategory);
		}
        for (intI = 0; intI < objRootNode.childNodes.length; intI++)
        {
        	objChildNode = objRootNode.childNodes[intI];
            strMainCatId = objChildNode.getAttribute("ows_MainCategory");
            strId = objChildNode.getAttribute("ows_ID");
            strtext = objChildNode.getAttribute("ows_SubCategory");
            
            if (flgCateDrpdwn == false)
    		{
	            if (strMainCatId.indexOf(selectedVal) != -1)
	            {
	                strChoices = strChoices + strtext + "|" + strId + "|";
	            }
	        }
	        else
	        {
	        	if (strMainCatId.indexOf(selectedVal) != -1)
	            {
		        	objDropdown = document.getElementById(objCtlSubCategory);
		        	var optSelect = document.createElement('option');
		            optSelect.text = strtext;
		            optSelect.value = strId;
		            var flgadd = true;
		           	
		           	for (var i =0; i < objDropdown.options.length; i++) 
		            {
		            	if (objDropdown.options[i].value == strId)
		                {
		                    flgadd = false;
		                    break;
		                }
		            }
		            if (flgadd == true)                
	                {
	               		objDropdown.options.add(optSelect); // standards compliant; doesn't work in IE
	               	}
	            }
	        }
	    }
        if (flgCateDrpdwn == false)
		{
			if (strChoices.length > 0)
	        {
	        	strChoices = strChoices.substring(0, strChoices.length-1);
	        }
			document.getElementById(objCtlSubCategory).value = ""
	    	document.getElementById(objCtlSubCategory).choices = strChoices;
	    }
        
    }
        
    function populateModelcategory()
    {
    	try
    	{
	    	if (flgCateDrpdwn == false)
	    	{
	        	var selectedVal = document.getElementById(objCtlSubCategory).value;
	        }
	        else
	        {
	        	var selectedVal = document.getElementById(objCtlSubCategory).value + ";#";
	        }
	        	
	        var strXpath = "//rs:data";
	        
	        var objRootNode = xmlModelCategoryList.documentElement.selectSingleNode(strXpath);
	        var strChoices = "";
	        
	        if (flgModelDrpdwn == true)
			{
				ClearDropDown(objCtlModelCategory);
			}
	        for (intchld = 0; intchld < objRootNode.childNodes.length; intchld++)
	        {
	        	objChildNode = objRootNode.childNodes[intchld];
	            strMainCatId = objChildNode.getAttribute("ows_SubCategory");
	            strId = objChildNode.getAttribute("ows_ID");
	            strtext = objChildNode.getAttribute("ows_LinkTitle");
	            
	            if (strMainCatId != null)
	            {

		            if (flgModelDrpdwn == false)
		    		{
			            if (strMainCatId.indexOf(selectedVal) != -1)
			            {
			                strChoices = strChoices + strtext + "|" + strId + "|";
			            }
			        }
			        else
			        {
			        	if (strMainCatId.indexOf(selectedVal) != -1)
			            {
				        	objDropdown = document.getElementById(objCtlModelCategory);
				        	var optSelect = document.createElement('option');
				            optSelect.text = strtext;
				            optSelect.value = strId;
				            var flgadd = true;
				           	
				           	for (var j =0; j < objDropdown.options.length; j++) 
				            {
				            	if (objDropdown.options[j].value == strId)
				                {
				                    flgadd = false;
				                    break;
				                }
				            }
				            if (flgadd == true)                
			                {
			               		objDropdown.options.add(optSelect); // standards compliant; doesn't work in IE
			               	}
			            }
			        }
		        }
		    }
	        if (flgModelDrpdwn == false)
			{
				if (strChoices.length > 0)
		        {
		        	strChoices = strChoices.substring(0, strChoices.length-1);
		        }
		        document.getElementById(objCtlModelCategory).value = ""
		    	document.getElementById(objCtlModelCategory).choices = strChoices;
		    	
				ShowDropdown(objCtlModelCategory);
		    	
		    }
		}
		
		catch(err)
		{
			//error description
		}
    }
    
    function ClearDropDown(objSelect)
    {
        objDropdown = document.getElementById(objSelect);
        var i;
        for (i = objDropdown.length - 1; i>=0; i--) {
            objDropdown.remove(i);
        }
        
        var optSelect = document.createElement('option');
		optSelect.text = "(None)";
		optSelect.value = "";
        objDropdown.options.add(optSelect); // standards compliant; doesn't work in IE
    }