window.onload = function() {
    comparison = new ProductComparison();
}

function ProductComparison() {
    this.container = document.getElementById("products");
    this.compareBox = document.getElementById("product_comparison_body");
    if (this.compareBox) {
        this.footer = document.getElementById("compare_footer");
        this.removeText = document.getElementById("removeText").value;
        this.compareList = new Array();
        this.images = {};
        this.initProducts();
    }
}

ProductComparison.prototype = {
    initProducts: function() {
        var allDivs = this.container.getElementsByTagName("div");
        for (var i=0; i<allDivs.length; i++) {
        
            switch (allDivs[i].className) {
                case "new_product_box_head":
                    this.setLink(allDivs[i]);
                    break;
                case "new_product_box_body":
                    this.extractImage(allDivs[i]);
                    break;
            }             
        }
    },
    
    setLink: function(elem) {
        var catNo = elem.getAttribute("rel");
        var headerDiv = elem.getElementsByTagName("div")[1]
        var self = this;
        
        elem.onmouseover = function() {
            headerDiv.style.cursor = "pointer";
            headerDiv.style.display = "block";
        }
        elem.onmouseout = function() {
            headerDiv.style.display = "none";
        }
        elem.onclick  = function() {
            self.addToCompareList(catNo);
        }
    },
    
    extractImage: function(elem) {
        var catNo = elem.getAttribute("rel");     
        var s = elem.getElementsByTagName("a")[1].getAttribute("style")
        var image = elem.getElementsByTagName("img")[0].cloneNode(true);
        
        if (s) {
            if (typeof s == 'string') {
                image.setAttribute("style", s);
                image.style.margin = "0";
            } else if (typeof s == 'object') {
               if (s.cssText) image.style.cssText = s.cssText.replace(/PADDING/g, "MARGIN");
            }   
        }  
        this.images[catNo] = image;
    },
    
    removeFromCompareList: function(catNo) {
      
        var node = document.getElementById("cmp_"+catNo);
        this.compareBox.removeChild(node);
        this.compareList.remove(catNo);
        
        document.getElementById("compare_indicator_"+catNo).style.display = "none";
        this.footer.style.display = (this.compareList.length > 1) ? "block" : "none";
  
        if (!this.compareList.length) {
            document.getElementById("comparison_footer").style.display = "none";
            this.compareBox.style.display = "block";
        }
      
    },
    
    addToCompareList: function(catNo) {
        if (!this.compareList.isIn(catNo) && this.compareList.length < 3) {
            this.compareList.push(catNo);
            
            var self = this;
                       
            document.getElementById("compare_indicator_"+catNo).style.display = "block";
            document.getElementById("comparison_footer").style.display = "block";
            this.compareBox.style.display = "block";
          
            
            this.footer.style.display = (this.compareList.length > 1) ? "block" : "none";
                        
            if (this.compareBox.hasChildNodes()) {
                this.compareBox.removeChild(this.compareBox.lastChild);
            }
            
            var div = document.createElement("div");
            div.className = "new_product_box_compare";
            div.id = "cmp_"+catNo;
            
            
            var headline = document.createElement("div");
            headline.className = "new_product_box_body_headline";
            var myText = document.createTextNode(catNo);
            headline.appendChild(myText);
            
			var inputfield = document.createElement("input");
            inputfield.id = 'catNo'+ this.compareList.length;
            inputfield.name = 'catNo'+ this.compareList.length;
            inputfield.setAttribute('type',  'hidden');
            inputfield.setAttribute('value', catNo);
			
            var remove = document.createElement("div");
            remove.className = "new_product_box_compare_remove";
            
            remove.onmouseover = function() {
                this.style.cursor = "pointer";
            }
             
            remove.onclick = function() {
                self.removeFromCompareList(catNo);
            }         
            
            remove.innerHTML = this.removeText;
            
            
            div.appendChild(headline);
			div.appendChild(inputfield);
            div.appendChild(remove);
            div.appendChild(this.images[catNo]);
            
            this.compareBox.appendChild(div)
            
                        
            var clear = document.createElement("div");
            clear.className = "boxclear";
            this.compareBox.appendChild(clear)
            
        }
    }   
}

Array.prototype.isIn = function(elem) {
    for (var i=0; i<this.length; i++) {
        if (this[i] == elem) return true;
    }
    return false;
}

Array.prototype.remove = function(elem) {
    for (var i=0; i<this.length; i++) {
        if (this[i] == elem) this.splice(i,1);
    }
}