//TODO: Ændre koden til cross browser getElementBy.. (måske prototypejs?)
//TODO: Tilføj til print, mulighed for at give et "allerede udført" valg forløb
//TODO: Ændre HMTML i forhold til CSS


//TODO: NPE finish size and color selection
var selectedSize = false;
var selectedColor = false;

Array.prototype.find = function(element) {
	for (var keys in this) {
		if (this[keys] == element) {
			return keys;
			break;
		}
	}
	return -1;
};

String.prototype.ucfirst = function() {
	// Splits the string into two parts. One part being the first letter, second being the rest of the word.
	var parts = this.match(/(\w)(.*)/);

	// Put it back together but uppercase the first letter and lowercase the rest of thw word.
	return parts[1].toUpperCase() + parts[2];
};

String.prototype.ucwords = function() {
	// Split the string into words if string contains multiple words.
	var x = this.split(/\s*/g);
	for(var i = 0; i < x.length; i++) {
		// Upper case each words
		x[i] = x[i].ucfirst();
	}

	// Rejoin the string and return.
	return x.join(' ');
};

String.prototype.strtolower = function() {
	return this.toLowerCase();
};

String.prototype.strtoupper = function() {
	return this.toUpperCase();
};



Array.prototype.print = function(option, defaultValue, optionLabel1, optionLabel2, showStock, renderPopups) {
	var i, j, key, value, stock;
	var result = '';

	defaultValue = (typeof(defaultValue) != 'undefined') ? defaultValue : new Array('NoSelected', 'NoSelected');

	for (i = 1; i < option.length; i++) {

		if (i == 1) {
			key   = new Array();
			value = new Array();
            stock = new Array();

			for (j = 1; j < this.length; j++) {
				if(this[j][1][i] != undefined && key.find(this[j][1][i - 1]) == -1) {
					key[key.length]     = this[j][1][i - 1];
					value[value.length] = (this[j][2] != undefined && this[j][2][i - 1] != undefined ? this[j][2][i - 1] : this[j][1][i - 1]);

                    if (showStock)
                        stock[stock.length] = this[j][2][this[j][2].length-1];
				}
			}

			// Fjernet
			// + option[i][1].strtolower().ucfirst()
			result += '<div class="' + option[i][0]+'" '+ (renderPopups?'style="display:none;"':'') +'><label>' + optionLabel1 + '</label><select id="' + this[0] + '_' + option[i][0] + '" name="' + this[0] + '_' + option[i][0]  + '" onchange="' + this[0] + '.changeVariation(\'' + option[i][0] + '\', ' + option[0] + ', new Array(\'' + defaultValue[0] + '\', \'' + defaultValue[1] + '\')'+((showStock)?',true':',null')+((renderPopups)?',true':'')+');">';
			result += '<option value="NoSelected">Vælg ' + option[i][1].strtolower() + '</option>';

			for(j = 0; j < key.length; j++) {
                if (showStock){
                    result += '<option value="' + key[j].replace('"', '%22') + '"' + (key.length == 1 || (typeof(defaultValue) != 'undefined' && defaultValue[0] == key[j]) ? ' selected' : '') + '>' + value[j] + stockMessages[(stock[j]>0)?'in':'out']['text'].replace("%%stk%%",stock[j]+'')+'</option>';
                }else{
                    result += '<option value="' + key[j].replace('"', '%22') + '"' + (key.length == 1 || (typeof(defaultValue) != 'undefined' && defaultValue[0] == key[j]) ? ' selected' : '') + '>' + value[j] + '</option>';
                }
			}

            result += '</select></div>';

            if (renderPopups){
                result += '<div class="filters varsize">';
                result += '<div class="filter"><a id="buttonSize" class="selected" href="javascript:void(0)"><span>Vælg ' + option[i][1].strtolower() + '</span></a><div id="sizePopDiv" onmouseout="resetPopDiv(this.id);"><ul id="sizeUl">';
                result += '<li id="size_NoSelected" style="display:none;"><a href="javascript:void(0)">Vælg ' + option[i][1].strtolower() + '</a></li>';

                for(j = 0; j < key.length; j++) {
                    if (showStock){
                        result += '<li onclick="triggerSizeChange(\''+this[0] + '_' + option[i][0]+'\', \''+key[j].replace('"', '%22')+'\');" id="size_' + key[j].replace('"', '%22').replace(' ','-') + '" class="'+(key.length == 1 || (typeof(defaultValue) != 'undefined' && defaultValue[0] == key[j]) ? ' selectedVar' : '')+'"><a href="javascript:void(0)">'+ value[j] + stockMessages[(stock[j]>0)?'in':'out']['html'].replace("%%stk%%",stock[j]+'')+'</a></li>';
                    }else{
                        result += '<li onclick="triggerSizeChange(\''+this[0] + '_' + option[i][0]+'\',\''+key[j].replace('"', '%22')+'\');" id="size_' + key[j].replace('"', '%22').replace(' ','-') + '" class="'+(key.length == 1 || (typeof(defaultValue) != 'undefined' && defaultValue[0] == key[j]) ? ' selectedVar' : '')+'"><a href="javascript:void(0)">'+ value[j] +'</a></li>';
                    }
                }

                result += '</ul></div></div>';
                result += '</div>';
            }

		} else {
			// option[i][1].strtolower().ucfirst() = størrelse eller farve eller ...
			result += '<div class="' +option[i][0] +'" '+ (renderPopups?'style="display:none;"':'') +' id="holder_' + this[0] + '_'+option[i][0] +'"><label>' + optionLabel2 + '</label><select disabled id="' + this[0] + '_' + option[i][0] + '" name="' + this[0] + '_' + option[i][0] + '" onchange="' + this[0] + '.changeVariation(\'' + option[i][0] + '\', ' + option[0] + ', new Array(\'' + defaultValue[0] + '\', \'' + defaultValue[1] + '\')'+((showStock)?',true':',null')+((renderPopups)?',true':'')+');">';
			result += '<option value="NoSelected">Vælg ' + option[i][1].strtolower() + '</option>';
            result += '</select></div>';


            if (renderPopups){
                result += '<div id="holder_alt_' + this[0] + '_'+option[i][0] +'" class="filters varcolor">';
                result += '<div class="filter disabled"><a id="buttonColor" class="selected" href="javascript:void(0)"><span>Vælg ' + option[i][1].strtolower() + '</span></a><div id="colorPopDiv" onmouseout="resetPopDiv(this.id);"><ul id="colorUl">';
                result += '<li id="color_NoSelected" style="display:none;"><a href="javascript:void(0)">Vælg ' + option[i][1].strtolower() + '</a></li>';
                result += '</ul></div></div>';
                result += '</div>';
            }

		}
	}

	return result;
};

Array.prototype.changeVariation = function(changedVariation, option, defaultValue, showStock, renderPopups) {
	var i, j, variation = this, newVariation, nextVariation, nextKey, nextValue, nextStock;

	for(i = 1; i < option.length; i++) {
		newVariation = new Array(variation[0]);
        try {
                var nextSelectBox = document.getElementById(this[0] + '_' + option[i + 1][0]);
                nextSelectBox.disabled = true;
                var header = document.getElementsByClassName(nextSelectBox.parentNode.className + '_variance_header')[0];
                header.className = nextSelectBox.parentNode.className + '_variance_header' + ' disabled';
        } catch (err) {}

		// Lig alle de variationer i et array, hvor den stadig passer..
		for(j = 1; j < variation.length; j++) {
            if (variation[j][1][i - 1].replace('"', '%22') == document.getElementById(this[0] + '_' + option[i][0]).value) {
                nextSelectBox.disabled = false;

                try {
                    var header = document.getElementsByClassName(nextSelectBox.parentNode.className + '_variance_header')[0];
                    header.className = nextSelectBox.parentNode.className + '_variance_header';
                } catch (err) {}

                //NPE added color and size;
                selectedSize = variation[j][1][0];
                selectedColor = variation[j][1][1];

				newVariation[newVariation.length] = variation[j];
			}
		}
		variation = newVariation;

		if (changedVariation == option[i][0]) {
			break;
		}
	}

    if (renderPopups){
        if (changedVariation=='size' && selectedSize){
            jQuery('#sizeUl').find('li').removeClass('selectedVar');
            jQuery('#buttonColor').parent().removeClass('disabled');
            jQuery('#size_'+selectedSize.replace('"', '%22').replace(' ','-')).addClass('selectedVar');
            jQuery('#buttonSize').html('<span>'+sizeText[selectedSize.substring(1)]+'</span>')
        }

        if (changedVariation=='color' && selectedColor){
            jQuery('#colorUl').find('li').removeClass('selectedVar');
            jQuery('#color_'+selectedColor.replace('"', '%22').replace(' ','-')).addClass('selectedVar');
            jQuery('#buttonColor').html('<span>'+colorText[selectedColor.substring(1)]+'</span>')
        }
    }

	if (document.getElementById(this[0] + '_' + option[i][0]).value == '') {
		if (option[i + 1] != undefined) {
			document.getElementById(this[0] + '_' + option[i + 1][0]).options.length = 1;
//			document.getElementById(this[0] + '_' + option[i + 1][0]).disabled = true;
		}
	} else {

		// Opret alle options i den næste liste..
		if(option.length - 1 > i) {
			nextVariation = document.getElementById(this[0] + '_' + option[i + 1][0]);

			nextKey   = new Array();
			nextValue = new Array();
            nextStock = new Array();

			nextVariation.options.length = 1;
			for (j = 1; j < variation.length; j++) {
				if (variation[j][1][i] != undefined && nextKey.find(variation[j][1][i]) == -1) {
					nextKey[nextKey.length]     = variation[j][1][i];
					nextValue[nextValue.length] = (variation[j][2] != undefined && variation[j][2][i] != undefined ? variation[j][2][i] : variation[j][1][i]);

                    if (showStock)
                        nextStock[nextStock.length] = variation[j][2][variation[j][2].length-2];
				}
			}

            if (renderPopups){
                var ulNode = document.getElementById("colorUl");
                ulNode.innerHTML='<li id="color_NoSelected" style="display:none;">Vælg ' + option[i+1][1].strtolower() + '</li>';
            }

			for (j = 0; j < nextKey.length; j++) {

                if (showStock){
                    nextVariation.options[nextVariation.options.length] = new Option(nextValue[j] + stockMessages[(nextStock[j]>0)?'in':'out']['text'].replace("%%stk%%",nextStock[j]+''), nextKey[j]);
                }else{
                    nextVariation.options[nextVariation.options.length] = new Option(nextValue[j], nextKey[j]);
                }

                if (typeof(defaultValue) != 'undefined' && nextKey[j] == defaultValue[1]) {
					nextVariation.options[nextVariation.options.length-1].selected = true;
				}

                if (renderPopups){
                    if (showStock){
                        ulNode.innerHTML += '<li onclick="triggerColorChange(\''+this[0] + '_' + option[i + 1][0]+'\', \''+nextKey[j].replace('"', '%22')+'\');" id="color_' + nextKey[j].replace('"', '%22').replace(' ','-') + '" class="'+(nextKey.length == 1 || (typeof(defaultValue) != 'undefined' && defaultValue[1] == nextKey[j]) ? ' selectedVar' : '')+'"><a href="javascript:void(0)">'+ nextValue[j] + stockMessages[(nextStock[j]>0)?'in':'out']['html'].replace("%%stk%%",nextStock[j]+'')+'</a></li>';
                    }else{
                        ulNode.innerHTML += '<li onclick="triggerColorChange(\''+this[0] + '_' + option[i + 1][0]+'\', \''+nextKey[j].replace('"', '%22')+'\');" id="color_' + nextKey[j].replace('"', '%22').replace(' ','-') + '" class="'+(nextKey.length == 1 || (typeof(defaultValue) != 'undefined' && defaultValue[1] == nextKey[j]) ? ' selectedVar' : '')+'"><a href="javascript:void(0)">'+ nextValue[j] +'</a></li>';
                    }
                }
			}

			if (nextKey.length == 1) {
				nextVariation.options[1].selected = true;

                if (renderPopups){
                    triggerColorChange(this[0] + '_' + option[i + 1][0], nextKey[0].replace('"', '%22'));
                }
			}

//            document.getElementById(this[0] + '_' + option[i + 1][0]).disabled = false;
		}
	}


	for (j = i + 2; j < option.length; j++) {
		document.getElementById(this[0] + '_' + option[j][0]).options.length = 1;
		document.getElementById(this[0] + '_' + option[j][0]).disabled = true;
	}
	try {
    if(selectedSize)
    {
        size_images = document.getElementsByAttribute('npksize', selectedSize, '','document');
        var elSize = size_images[0];

    }
    if(selectedColor)
    {

        color_images = document.getElementsByAttribute('npkcolor', selectedColor, '','document');
        var elColor = color_images[0];
    }
    //NPE see if any images has both size and color
	} catch (err) {
	}

    var bigimgsrc = false;
    var smallimgsrc = false;
    var smallimgelement = false;
    var smallimgelementid = false;

    //NPE TODO tage højde for både billede med farve og størrelse
    //if(elSize && elColor)
    if (elSize)
    {
        bigimgsrc = elSize.href;
        smallimgsrc = elSize.rev;
        smallimgelement = elSize;
        smallimgelementid = elSize.id;
    }
    if (elColor)
    {
        bigimgsrc = elColor.href;
        smallimgsrc = elColor.rev;
        smallimgelement = elColor;
        smallimgelementid = elColor.id;
    }

    if(smallimgelement)
    {

        //ved ikke hvorfor, men det virker ikke i IE ellers
        dummy = $(smallimgelementid);


        tagname = smallimgelement.tagName;
        if(tagname == 'IMG')
        {
        //It it an image with functions
        if(smallimgelement.hasAttribute('onmouseover'))
        {
            smallimgelement.onmouseover();
        }
        else if(smallimgelement.hasAttribute('onclick'))
        {
            smallimgelement.onclick();
        }
        }
        else if (tagname == 'A')
        {

        //Magic Zoom
        bigimglink = $('big-img');
        if (bigimglink)
        {
            bigimglink.href = bigimgsrc;
            npkbigimg = document.getElementsByAttribute('npkbigimg', 'true', 'img','document');
            bigimg = npkbigimg[0];

            if(bigimg)
            {
                is_ie = 0;
                bigimg.src = smallimgsrc;
                agent = navigator.userAgent;
                if (agent.indexOf('MSIE') != -1) //Zoom in IE
                {
                    is_ie = 1;
                }
                //else

                if (is_ie == 0)
                {
                    if(bigimg.hasAttribute('href'))
                        bigimg.href = bigimgsrc;

                    div_after_big_imgs = bigimglink.getElementsByClassName('MagicZoomBigImageCont');
                    if (div_after_big_imgs)
                        div_after_big_img = div_after_big_imgs[0];
                    if (div_after_big_img) {
                        hidden_div = div_after_big_img.down('div');
                        if (hidden_div) {
                            zoom_image = hidden_div.down();
                            if(zoom_image) {
                                zoom_image.src = bigimgsrc;
                            }
                        }
                    }

                } else {
                    div_after_big_imgs = getElementsByClassName('MagicZoomBigImageCont', 'div', '');
                    if (div_after_big_imgs)
                        div_after_big_img = div_after_big_imgs[0];
                    if (div_after_big_img) {
                        hidden_div = div_after_big_img.childNodes[1];
                        if (hidden_div) {
                            zoom_image = hidden_div.firstChild;
                            if(zoom_image) {
                                zoom_image.src = bigimgsrc;
                            }
                        }
                    }
                }

            }

        }
        }
    }
};

document.getElementsByAttribute = function(attribute, value, tagName, parentElement) {
    var children = ($(parentElement) || document.body).getElementsByTagName((tagName || '*'));
    return $A(children).inject([], function(elements, child) {
        var attributeValue = child.getAttribute(attribute);
        if(attributeValue != null) {
            if(!value || attributeValue == value) {
                elements.push(child);
            }
        }
        return elements;
    });
}

getElementsByClassName = function (className, tag, elm) {
    tag = tag || "*";
    elm = elm || document;
    var classes = className.split(" "),
        classesToCheck = [],
        elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
        current,
        returnElements = [],
        match;
    for(var k=0, kl=classes.length; k<kl; k+=1){
        classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
    }
    for(var l=0, ll=elements.length; l<ll; l+=1){
        current = elements[l];
        match = false;
        for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
            match = classesToCheck[m].test(current.className);
            if (!match) {
                break;
            }
        }
        if (match) {
            returnElements.push(current);
        }
    }
    return returnElements;
};


function triggerSizeChange(id, val){
    jQuery('#sizePopDiv').hide();
    jQuery('#'+id).val(val);
    jQuery('#'+id).trigger('onchange');
}


function triggerColorChange(id, val){
    jQuery('#colorPopDiv').hide();
    jQuery('#'+id).val(val);
    jQuery('#'+id).trigger('onchange');
}

function resetPopDiv(id){
    jQuery('#'+id).removeAttr('style');
}