//var colorDataSet = ["red", "green", "yellow", "blue"];
//var storageDataSet = ["16GB", "32GB", "64GB"];
var currentColorDataValue = '';
var currentStorageDataValue ='';
var selectedColor_inside="";
var selectedStorage="";
var phoneData="";
var storageDataSet = [];
var devicePhoneData;
//window.addEventListener('load', plotColorAndStorageComponents);
 
function plotColorAndStorageComponents(){
//plotColorComponent(colorDataSet);
//plotStorageComponent(storageDataSet);
}

function plotStorageComponent(storageData, selectedColorData){
	storageDataSet = [];
	var storageCodeElement = document.getElementById("storageCompConatiner");
	var storageComponentInnerHtmlObj = "";
	storageCodeElement.innerHTML = "";
	for(gg in storageData){
		if(storageData[gg].name == selectedColorData){
			for( ff in storageData[gg]){
				//console.log("Memories:"+typeof(storageData[gg][ff]));
				if(typeof(storageData[gg][ff]) == 'object'){
					for( hh in storageData[gg][ff]){
					//console.log("Memories Name:"+(storageData[gg][ff][hh]).name);
						storageDataSet.push((storageData[gg][ff][hh]).name);
					}
				}
			}
		}
	}
	
	storageDataSet.sort(naturalCompare);
	
	for(var f=0; f<storageDataSet.length; f++){
		//var colorCodeName = getColorCode(colorData[e]);
		storageComponentInnerHtmlObj +='<li> <div id="radio__capacity__box'+f+'" class="radio__capacity__box" onclick="setSelectedStorage(event);">';
		storageComponentInnerHtmlObj +='<input type="radio" value="storagecode'+f+'" name="optionStorage" id="radio-storage'+f+'">';
		//colorComponentInnerHtmlObj +='<label class="'+colorCodeName+'" for="radio-color'+e+'" tabindex="0">'+colorData[e]+'</label>';
		storageComponentInnerHtmlObj +='<label for="radio-storage'+f+'"  tabindex="0"><div class="txtfleft text--telenor to-center">'+storageDataSet[f]+'</div></label>';
		storageComponentInnerHtmlObj +='<span class="icon icon-check icon-align-black is-inactive"></span>';
		storageComponentInnerHtmlObj +='</div></li>';
	//console.log('HHH : '+colorData[e]);
	}
	//console.log('HHH : '+storageCodeElement.innerHTML);
	storageCodeElement.innerHTML += (storageComponentInnerHtmlObj);
	setSelectedStorage(document.getElementById('radio__capacity__box0'), "true");
	//fillCalculator(devicePhoneData,selectedColor_inside, selectedStorage);
}
window.plotColorComponent = function(colorData, phoneAllData){
var colorCodeElement = document.getElementById("colorCompConatiner");
var colorComponentInnerHtmlObj = "";
phoneData = colorData;
devicePhoneData = phoneAllData;

var colorCodeData = [];
for (coldata in phoneAllData.colors){
		colorCodeData.push(coldata.toString());
}

for(var e=0; e<colorData.length; e++){
	var colorCodeName = getColorCode((colorData[e].name).toLowerCase());
	$('#colorCompConatiner').children().detach();
	colorComponentInnerHtmlObj +='<li> <div class="radio__color__box">';
	colorComponentInnerHtmlObj +='<input type="radio" onclick="setSelectedColor(this);" value="colorcode'+e+'" name="optionColor" id="radio-color'+e+'">';
	colorComponentInnerHtmlObj +='<label class="'+colorCodeName+'" for="radio-color'+e+'" color-id="'+colorCodeData[e]+'" tabindex="0">'+colorData[e].name+'</label>';
	if(colorCodeName == "radio-color__white")
		colorComponentInnerHtmlObj +='<span class="icon icon-check icon-align-black is-inactive"></span>';
	else if(colorCodeName == "")
		colorComponentInnerHtmlObj +='<span class="icon icon-check icon-align-black is-inactive"></span>';
	else
		colorComponentInnerHtmlObj +='<span class="icon icon-check icon-align-white is-inactive"></span>';
		
		
	colorComponentInnerHtmlObj +='</div></li>';
	//console.log('HHH : '+colorData[e]);
}
//console.log('HHH : '+planCodeElement.innerHTML);
colorCodeElement.innerHTML += (colorComponentInnerHtmlObj);
setSelectedColor(document.getElementById('radio-color0'), "true");
//updateSelection(planCodeElement, planCodePreviousValue, planCodeFormBean);

}
$('body').on('click','.icon-check',function(){
	$(this).parent().find('input[type=radio]').click();
});
function setSelectedStorage(myRadio, isThisFirstTime){
var ele;
if(myRadio.type=="click"){
	ele = myRadio.currentTarget;
}else{
	ele = myRadio;
}


if(isThisFirstTime != "true"){
		removeClass(currentStorageDataValue.getElementsByTagName('span')[0], "is-active");
		addClass(currentStorageDataValue.getElementsByTagName('span')[0], "is-inactive");
		removeClass(ele.getElementsByTagName('span')[0], "is-inactive");
		
		removeClass(currentStorageDataValue.getElementsByClassName('txtfleft')[0], "is-active");
		addClass(currentStorageDataValue.getElementsByClassName('txtfleft')[0], "to-center");
		removeClass(ele.getElementsByClassName('txtfleft')[0], "to-center");
		
		removeClass(currentStorageDataValue.getElementsByClassName('txtfleft')[0], "text--bold");
		//addClass(currentStorageDataValue.getElementsByClassName('txtfleft')[0], "text--bold");
		//removeClass(ele.getElementsByClassName('txtfleft')[0], "text--bold");
		
		
	}else{
		removeClass(ele.getElementsByTagName('span')[0], "is-inactive");
		removeClass(ele.getElementsByClassName('txtfleft')[0], "to-center");
		//removeClass(ele.getElementsByClassName('txtfleft')[0], "text--bold");
		
	}
	addClass(ele.getElementsByTagName('span')[0], "is-active");
	addClass(ele.getElementsByClassName('txtfleft')[0], "text--bold");
	currentStorageDataValue = ele;
	selectedStorage = currentStorageDataValue.getElementsByTagName('label')[0].getElementsByClassName('txtfleft')[0].innerHTML;
	fillCalculator(devicePhoneData,selectedColor_inside, selectedStorage);
}
function setSelectedColor(myRadio, isThisFirstTime){

	var ele = myRadio.parentNode;
	
	if(isThisFirstTime != "true"){
		removeClass(currentColorDataValue.getElementsByTagName('span')[0], "is-active");
		addClass(currentColorDataValue.getElementsByTagName('span')[0], "is-inactive");
		removeClass(ele.getElementsByTagName('span')[0], "is-inactive");
	}else{
		removeClass(ele.getElementsByTagName('span')[0], "is-inactive");
	}
	addClass(ele.getElementsByTagName('span')[0], "is-active");
	currentColorDataValue = ele;
	//console.log("Label : "+myRadio.parentNode.getElementsByTagName('label')[0].innerHTML);
	var selectedColorStr  = myRadio.parentNode.getElementsByTagName('label')[0].innerHTML;
	//selectedColor_inside  
	selectedColor_inside   = myRadio.parentNode.getElementsByTagName('label')[0].getAttribute('color-id');
	plotStorageComponent(phoneData, selectedColorStr);
	//changeDeviceColor('CHARCOAL_BLACK');
	$('#selectedDeviceColor').html('<strong>Color: </strong>'+selectedColorStr);
	changeDeviceColor(selectedColor_inside);
}

var imgObj = {
	'GOLD' : '/cs/site_template/digi/images/iphone6s/iPhone6s_Gold.png',
	'SILVER' : '/cs/site_template/digi/images/iphone6s/iPhone6s_Silver.png',
	'SPACE_GREY' : '/cs/site_template/digi/images/iphone6s/iPhone6s_Gray.png',
	'RoseGOLD' : '/cs/site_template/digi/images/iphone6s/iPhone6s_RoseGold.png'
}

function changeDeviceColor(deviceColorCode){
var deviceimgURL = imgObj[deviceColorCode];

var imgDataWrapper = document.getElementsByClassName('image-wrapper');

imgDataWrapper.innerHTML="";
var imgInnerHTML = '<span data-alt="The worlds most hyped smart phone." data-picture="">';
imgInnerHTML += '<span data-src="'+deviceimgURL+'"></span>';
imgInnerHTML += '<span data-media="(min-width: 450px)" data-src="'+deviceimgURL+'"></span>';
imgInnerHTML += '<span data-media="(min-width: 600px)" data-src="'+deviceimgURL+'">';
imgInnerHTML += '<img alt="The worlds most hyped smart phone." src="'+deviceimgURL+'"></span>';
imgInnerHTML += '<noscript><img src="'+deviceimgURL+'"/></noscript></span>';

imgDataWrapper[0].innerHTML = imgInnerHTML;
}

function getColorCode(colorString){
var colorStr = '';
switch(colorString) {

	case 'white pearl':
	case 'white':
		colorStr ='radio-color__white';
		break;
	case 'black sapphire':	
	case 'black':
        colorStr ='radio-color__black';
        break;
    case 'red':
        colorStr ='radio-color__red';
        break;
    case 'green':
         colorStr ='radio-color__green';
        break;
	case 'yellow':
         colorStr ='radio-color__yellow';
        break;
	case 'blue':
         colorStr ='radio-color__blue';
        break;
	case 'gray':
	case 'grey':
	case 'space grey':
	case 'charcoal black':
         colorStr ='radio-color__grey';
        break;
	case 'frost white':
	case 'silver':
         colorStr ='radio-color__silver';
        break;
	case 'bronze gold':
	case 'gold platinum':
	case 'gold':
         colorStr ='radio-color__gold';
        break;
	case 'rose':
	case 'rose gold':
         colorStr ='radio-color__rosegold';
        break;    
}
return colorStr;
}

function addClass(element, classToAdd) {
    var currentClassValue = element.className;
     
    if (currentClassValue.indexOf(classToAdd) == -1) {
        if ((currentClassValue == null) || (currentClassValue === "")) {
            element.className = classToAdd;
        } else {
            element.className += " " + classToAdd;
        }
    }
}
     
function removeClass(element, classToRemove) {
    var currentClassValue = element.className;
     
    // removing a class value when there is more than one class value present
    // and the class you want to remove is not the first one
    if (currentClassValue.indexOf(" " + classToRemove) != -1) {
        element.className = element.className.replace(" " + classToRemove, "");
        return;
    }
     
    // removing the first class value when there is more than one class
    // value present
    if (currentClassValue.indexOf(classToRemove + " ") != -1) {
        element.className = element.className.replace(classToRemove + " ", "");
        return;
    }
     
    // removing the first class value when there is only one class value
    // present
    if (currentClassValue.indexOf(classToRemove) != -1) {
        element.className = element.className.replace(classToRemove, "");
        return;
    }
}

function naturalCompare(a, b) {
    var ax = [], bx = [];

    a.replace(/(\d+)|(\D+)/g, function(_, $1, $2) { ax.push([$1 || Infinity, $2 || ""]) });
    b.replace(/(\d+)|(\D+)/g, function(_, $1, $2) { bx.push([$1 || Infinity, $2 || ""]) });
    
    while(ax.length && bx.length) {
        var an = ax.shift();
        var bn = bx.shift();
        var nn = (an[0] - bn[0]) || an[1].localeCompare(bn[1]);
        if(nn) return nn;
    }

    return ax.length - bx.length;
}