var _ringSizeIndex=0;
var _foundCountry=false;
var _canEnableButton=true;
function InitializeBandPreference(bandPreference)
{   
    var bandP = eval('(' + bandPreference + ')'); 
    bandPreferences = new BandPreference();
    bandPreferences.DepthId = bandP.DepthId;
    bandPreferences.WidthId = bandP.WidthId;
    bandPreferences.RingSizeAttributeId = bandP.RingSizeAttributeId;   
    bandPreferences.RingSizeName = bandP.RingSizeName;
    bandPreferences.RingSizeIndex = bandP.RingSizeIndex;       
}
//inizialize the wedding band control
function InizializeWeddingBand()
{   
    //get countries for ringSize
    GetCountryRingSize();   
    
}
//get countries
function GetCountryRingSize()
{   
     Website.WebServices.WebService.GetCountryRingSize(
     function(success)
     {
        var countries = eval('(' + success + ')');   
        removeAllOptions(document.aspnetForm.ddlCountrySize);
        //add please select
        
        for (i=0; i<countries.ObjectCollection.length; i++) {
            
            addOptionCountryRingSize(document.aspnetForm.ddlCountrySize, countries.ObjectCollection[i]);                
        }    
        
        //country not found select uk
        if (!_foundCountry)
        {
            $("#ddlCountrySize").val('826');
        }  
        //get ringSize
        GetRingSizesByCountry();                 
        
     },
     function(error)
     {       
     });
}

//gets ring sizes to draw in the drop down after a country has been selected
function GetRingSizesByCountry()
{    
    _ringSizeIndex=0;
    AddPleaseSelect();
}

//Get Depth and Width
function DrawDepths()
{
    var ddlRingSize= document.getElementById('ddlRingSize');
    if(ddlRingSize.options[ddlRingSize.selectedIndex].getAttribute('attribId')!=null){
        bandPreferences.RingSizeAttributeId = ddlRingSize.options[ddlRingSize.selectedIndex].getAttribute('attribId'); //so we know the ring size we're doing all thius for
        bandPreferences.RingSizeName = ddlRingSize.options[ddlRingSize.selectedIndex].text;    
        bandPreferences.RingSizeIndex = ddlRingSize.selectedIndex;
        UpdateBandSession(bandPreferences);
        Website.WebServices.WebService.GetDepthsForBand(bandPreferences.RingSizeAttributeId, GetCookie(), 
         function(success)
         {
            //tblDepthsContainer
            var depths = eval('(' + success + ')');
            
            var depthTds = document.getElementById('tblDepthsContainer').getElementsByTagName('td');
            var canSelect = false;
            var selectDepthId=depths[0]; //the first depth we are going to select
            for(var k=0;k<depthTds.length;k++) //switch them all OFF
            {
                var image = depthTds[k].getElementsByTagName('img');
                if(image[0].src.indexOf('-un.png')<=0)
                    image[0].src =  image[0].src.replace('.gif', '-un.png');
                depthTds[k].onclick = function()
                {
                    //do nothing
                    
                }
                depthTds[k].style.cursor = 'default';
            }
            
            for(var i=0;i<depths.length;i++)
            {
                //enable depths - make em clickable
                var depth = document.getElementById('dep_' + depths[i]);
                 if(bandPreferences.DepthId==depths[i])
                    canSelect = true;
                var image = depth.getElementsByTagName('img');
                image[0].src =  image[0].src.replace('-un.png', '.gif');
                depth.style.cursor = 'pointer';
                depth.Id = depths[i];
                depth.setAttribute('selectable','1');
                depth.onclick = function()
                {
                    SelectDepth(this.Id, this);
                }            
            }
            
            if(canSelect)
            {   
                SelectDepth(bandPreferences.DepthId, document.getElementById('dep_' + bandPreferences.DepthId));  //All depths are ALWAYS available
            }
            else //select the first depth available to us!
            {
                SelectDepth(selectDepthId, document.getElementById('dep_' + selectDepthId));
            }
            
            //draw the circ. and diam        
            DrawCircDiam($("#ddlRingSize").val());
            
         },
         function(error)
         {
         });
    }
    else //ring size not selected
    {  
        CleanOrderInfo();
        bandPreferences.RingSizeAttributeId = -1; 
        bandPreferences.RingSizeName = '';    
        bandPreferences.RingSizeIndex = 0;
        UpdateBandSession(bandPreferences);
        
        //disable all widths and depths and shopping button
        
        $("[id*=dep_]").removeClass("diamond_control_select_bg_selected");
        $("[id*=wid_]").removeClass("diamond_control_select_bg_selected");
         
        //onclick - alert to select a ring size first
        var depthTds = document.getElementById('tblDepthsContainer').getElementsByTagName('td');
        var canSelect = false;
        for(var k=0;k<depthTds.length;k++) //switch them all OFF
        {
            var image = depthTds[k].getElementsByTagName('img');
            if(image[0].src.indexOf('-un.png')<=0)
                image[0].src =  image[0].src.replace('.gif', '-un.png');
            depthTds[k].onclick = function()
            {
                alert('To customise and price your ring, please select a ring size');  
            }
            depthTds[k].style.cursor = 'default';
        }
        
        //disable widths and alert on click
        var widthTds = document.getElementById('tblWidthsContainer').getElementsByTagName('td');
        var canSelect = false;
        for(var k=0;k<widthTds.length;k++) //switch them all OFF
        {
            var image = widthTds[k].getElementsByTagName('img');
            if(image[0].src.indexOf('-un.png')<=0)
                image[0].src =  image[0].src.replace('.png', '-un.png');
            widthTds[k].onclick = function()
            {
               alert('To customise and price your ring, please select a ring size');  
            }
            widthTds[k].style.cursor = 'default';            
        }
        
    }
}

function SelectDepth(depthId, el)
{
    //1. Update the current depth in the session
    if(bandPreferences.DepthId != depthId)
    {                
        //remove all the selected class from all the width
        $("[id*=dep_]").removeClass("diamond_control_select_bg_selected");
        $("[id*=dep_]").addClass("diamond_control_select_bg");
        
        $("[id="+ el.getAttribute('id') +"]").addClass("diamond_control_select_bg_selected");
        $("[id="+ el.getAttribute('id') +"]").removeClass("diamond_control_select_bg");
        
        bandPreferences.DepthId = depthId;
        UpdateBandSession(bandPreferences);
    }else
    {
        $("[id*=dep_]").removeClass("diamond_control_select_bg_selected");
        $("[id*=dep_]").addClass("diamond_control_select_bg");
        
        $("[id="+ el.getAttribute('id') +"]").addClass("diamond_control_select_bg_selected");
        $("[id="+ el.getAttribute('id') +"]").removeClass("diamond_control_select_bg");
    }
    
    DrawWidths();
}

//draw the circ. and diam
function DrawCircDiam(ringSizeId)
{    
    Website.WebServices.WebService.GetCircDiam(ringSizeId,
    function(success)
    {
        var CircDiam = eval('(' + success + ')');
        
        if (CircDiam.SingleObject != null )
        {           
            document.getElementById('lblCirc').innerHTML = CircDiam.SingleObject.Circ + ' mm';
            document.getElementById('lblDiam').innerHTML = CircDiam.SingleObject.Diam + ' mm';
        }
    },
    function(error)
    {
    });
}

function DrawWidths()
{
    var ddlRingSize= document.getElementById('ddlRingSize');
    Website.WebServices.WebService.GetWidthsForBand(ddlRingSize.options[ddlRingSize.selectedIndex].getAttribute('attribId'), bandPreferences.DepthId, GetCookie(), 
    function(success)
    {
        var widths = eval('(' + success + ')');
        var widthTds = document.getElementById('tblWidthsContainer').getElementsByTagName('td');
        var canSelect = false;
        var selectWidthId=widths[0]; //the first width we are going to select
        for(var k=0;k<widthTds.length;k++) //switch them all OFF
        {
            var image = widthTds[k].getElementsByTagName('img');
            if(image[0].src.indexOf('-un.png')<=0)
                image[0].src =  image[0].src.replace('.png', '-un.png');
            widthTds[k].onclick = function()
            {
                //do nothing
                
            }
            widthTds[k].style.cursor = 'default';
            
        }
        
        for(var i=0;i<widths.length;i++) //switch on the ones that are available
        {
            //enable widths - make em clickable
            var width = document.getElementById('wid_' + widths[i]);
            if(bandPreferences.WidthId==widths[i])
                canSelect = true;
            var image = width.getElementsByTagName('img');
            image[0].src =  image[0].src.replace('-un.png', '.png');
            width.style.cursor = 'pointer';
            width.Id = widths[i];
            width.setAttribute('selectable','1');
            width.onclick = function()
            {
                SelectWidth(this.Id, this);
                
            }            
        }
        
        //now we're either going to select the previously selected width, OR
        //we'll have to select the first available one!
        if(canSelect)
        {
            SelectWidth(bandPreferences.WidthId, document.getElementById('wid_' + bandPreferences.WidthId));
        }
        else //select the first width available to us!
        {
            SelectWidth(selectWidthId, document.getElementById('wid_' + selectWidthId));
        }
    },
    function(error)
    {
    });
}
function SelectWidth(widthId, el)
{
    //UpdateBandSession(bandPreferences);
     //1. Update the current depth in the session
    if(bandPreferences.WidthId!= widthId)
    {        
        //remove all the selected class from all the width
        $("[id*=wid_]").removeClass("diamond_control_select_bg_selected");
        $("[id*=wid_]").addClass("diamond_control_select_bg");
         
        $("[id="+ el.getAttribute('id') +"]").addClass("diamond_control_select_bg_selected");
        $("[id="+ el.getAttribute('id') +"]").removeClass("diamond_control_select_bg");
        
        bandPreferences.WidthId = widthId;
        UpdateBandSession(bandPreferences);  
    }else
    {
        $("[id*=wid_]").removeClass("diamond_control_select_bg_selected");
        $("[id*=wid_]").addClass("diamond_control_select_bg");
         
        $("[id="+ el.getAttribute('id') +"]").addClass("diamond_control_select_bg_selected");
        $("[id="+ el.getAttribute('id') +"]").removeClass("diamond_control_select_bg");
    }            
    //show always the tab that contains image gallery
    tabSwitch_2(1, 2, 'tab_', 'content_');  
   
}

//update the band preference in the session
function UpdateBandSession(bandPreferences)
{
    DisableAddToShoppingBag();
    Website.WebServices.WebService.UpdateBandPreference(bandPreferences, GetCookie(), 
         function(success)
         {  
            UpdateImages(itemPreferences.MetalId);     
            UpdateOrderInfo();
            //ring size not selected
            if (bandPreferences.RingSizeAttributeId == -1)
            {
                _canEnableButton = false;
                document.getElementById('ctl00_CenterContentPlaceHolder_ucOrderInfoControl_btnAddToShoppingBag').onclick = function()
                {
                    Website.WebServices.WebService.GetAlertMessage(GetCookie(),
                    function(result)
                    {
                        alert(result);
                    },
                    function(error)
                    {
                    });
                    
                }
            }else
            {
                _canEnableButton = true;
                //item desc
                UpdateItemDescription();      
            }
         },
         function(error)
         {           
         });
}

function addOptionCountryRingSize(selectBox, country)
{
    var optValue;    
    optValue = country.Id;   
        
    var optn = document.createElement('option');
    //uk
    //if (optValue == 826)
    //    optn.selected = true;
    
    if (optValue ==  userPreferences.CountryId)
    {
        optn.selected = true;
        _foundCountry = true;
    }
        
    optn.text = country.ShortName;
    optn.value = optValue;    
    selectBox.options.add(optn);
}

function addOptionRingSize(selectBox , ringsize)
{
    var optValue;
    optValue = ringsize.Id;   
    var optn = document.createElement('option');
    optn.setAttribute('attribId',ringsize.AttributeId);
    //if (ringsize.AttributeId ==  bandPreferences.RingSizeAttributeId && bandPreferences.RingSizeName)
    if (_ringSizeIndex== bandPreferences.RingSizeIndex)
    {
        optn.selected = true;               
    }
            
    optn.text = ringsize.Name;
    optn.value = optValue; 
    selectBox.options.add(optn);
    _ringSizeIndex++;
}

function AddPleaseSelect()
{
    removeAllOptions(document.aspnetForm.ddlRingSize);
    Website.WebServices.WebService.GetPleaseSelectText(GetCookie(),
    function(result)
    {
        var optn = document.createElement('option');
        optn.text = result;
        optn.value = '-1';    
        document.aspnetForm.ddlRingSize.options.add(optn);
        _ringSizeIndex++;
        
        var countryId = $("#ddlCountrySize").val();     
    
        Website.WebServices.WebService.GetRingSizesByCountry(countryId,
        function(success)
        {
            var ringsizes = eval('(' + success + ')');   
            
            
            for (i=0; i<ringsizes.ObjectCollection.length; i++) {
                addOptionRingSize(document.aspnetForm.ddlRingSize, ringsizes.ObjectCollection[i]);                
            } 
            //Draw width and depth / wedding band control
            DrawDepths();
        },
        function(error)
        {       
        });
    },
    function(error)
    {
    });
}

//clean dropdown
function removeAllOptions(selectbox)
{
    for(var i=selectbox.options.length-1;i>=0;i--)
    {
        selectbox.remove(i);
    }
}

//Called by the product script when the metal is changed
function BandMetalChanged()
{
    DrawDepths();
}

function CleanOrderInfo()
{
    document.getElementById('orderInfo_ItemName').innerHTML = '';
    document.getElementById('orderInfo_ItemPrice').innerHTML = '---------';
    document.getElementById('orderInfo_DiamondName').style.display = 'none';
    document.getElementById('orderInfo_DiamondPrice').style.display = 'none';
    document.getElementById('orderInfo_ExtrasName').innerHTML = '';
    document.getElementById('orderInfo_ExtrasPrice').innerHTML = '---------';
    document.getElementById('orderInfo_VatName').innerHTML = '';
    document.getElementById('orderInfo_VatPrice').innerHTML = '---------';
    document.getElementById('orderInfo_TotalPrice').innerHTML = '-------';
}