/*
 * colourPicker.js - a system to choose from predefined colours
 * using a fandeck metaphor.
 */
function PaintColour(name, serialNumber, rgbCode, catagory){
    var me = this;
    
    me.name = name;
    me.serialNumber = serialNumber;
    me.rgbCode = rgbCode;
    me.catagory = catagory;
	
	me.rgbAverage = parseInt(eval(StringHelpers.sprintf(
		'(%s)/3', 
		me.rgbCode.replace(',', '+'))));
	
	var colourClass;
	
	if (me.rgbAverage < 35) {
		colourClass = 'light';
	} else {
		colourClass = 'dark';
	}
    
    me.toHTML = function(){
        var html = config.getScriptedValue('colourPicker.templates.paintColour', {
            name: me.name,
            serialNumber: me.serialNumber,
            rgbCode: me.rgbCode,
            catagory: me.catagory,
			colourClass: colourClass
        })
        
        return html;
    }
    
}

function ColourChip(paintColour){

    var me = this;
    
    me.colours = new Array();
    var maxColoursPerChip = config.getIntegerValue('colourPicker.constants.maxColoursPerChip');
    
    me.addPaintColour = function(paintColour){
        me.colours.push(paintColour);
        return me.colours[me.colours.length - 1];
    }
    
    me.isFull = function(){
        return me.colours.length >= maxColoursPerChip;
    }
    
    me.toHTML = function(){
        var sb = new StringBuffer();
        for (var i = 0; i < me.colours.length; i++) {
            sb.append(me.colours[i].toHTML());
        }
        
        return config.getScriptedValue('colourPicker.templates.colourChip', 
			{
	            paintColours: sb.toString()
	        });
    }
}

function Fandeck (xmlFile, id){
    var me = this;
    
    me.chips = new Array();
    var lastChipNumber = 0;
    var req;
    
	
	me.xmlFile = xmlFile;
	me.id = id;
	me.node = null;
	me.isComplete = false;
	me.activeChip = 0;
    
    me.addColour = function(paintColour){
        var chip = me.chips[lastChipNumber]
        if (!chip || chip.isFull()) {
            chip = me.addChip();
        }
        chip.addPaintColour(paintColour);
        
    }
    
    me.addChip = function(){
		if (me.chips[0]) {
			lastChipNumber++;
		}
		
        me.chips.push(new ColourChip());
		
		
		return me.chips[me.chips.length -1 ];
    }
    
    
    function getColourDefinitionsRequestHandler(){
        if (!req) {
            return;
        }
        
        // only if req shows "complete"
        if (req.readyState == ReadyState.COMPLETED) {
            // only if "OK"
            //DebugHelpers.log(req.getAllResponseHeaders());
            
            if (req.status == HttpCode.OK || req.status == HttpCode.LOCAL_OK) {
                var xml = req.responseXML;
                
                var products = xml.getElementsByTagName('Product');
                var collectionNode = xml.getElementsByTagName('Collection')[0];
				me.collectionName = DOMHelpers.getAttributeValue(collectionNode, 'Name');
				
                for (var i = 0; i < products.length; i++) {
					
					
					
                    var productNode = products[i];
                    var colorNode = productNode.getElementsByTagName('Color')[0];
                    
                    var paintColour = new PaintColour(
						DOMHelpers.getAttributeValue(productNode, 'Name'), 
						DOMHelpers.getAttributeValue(productNode, 'Sku'), 
						DOMHelpers.getAttributeValue(colorNode, 'RGB'), 'test');
						
					me.addColour(paintColour);
                }
				
                me.isComplete = true;
                fandecks.render();
				
            } else {
				alert(StringHelpers.sprintf('-%s-: %s',
					me.xmlFile,  DebugHelpers.getProperties(req)));
			}
        }
        
    }
    
    me.toHTML = function(){
        var sb = new StringBuffer();
        for (var i = 0; i < me.chips.length; i++) {
            sb.append(me.chips[i].toHTML());
        }
        
        return config.getScriptedValue('colourPicker.templates.fanDeck', {
            colourChips: sb.toString()
			
        });
    }
	
	
    
    
   
	
    function init (){
		
        req = XMLHelpers.getXMLHttpRequest(
			me.xmlFile, 
			getColourDefinitionsRequestHandler)
        
    }
	
	init();
}

var fandecks = new function () {
	
	var me = this;
	
	var xmlFilenames; 
	var node;
	me.item;
	me.currentColourNode;
	
	me.init = function () {
		
		xmlFilenames = config.getNormalizedValue('colourPicker.files.colourData').split(',');
		me.item = new Array(xmlFilenames.length);
		node = document.getElementById('colourPicker-fanDeck');
		
		for (var i=0; i<xmlFilenames.length; i++) {
			me.item[i] = new Fandeck(xmlFilenames[i].trim(), i)
			
		}
	}
	
	me.render = function() {
		var allComplete = false;
		
		for (var i=0; i<me.item.length; i++) {
			if (!me.item[i].isComplete) {
				return;
			}
		}
		
		var sb = new StringBuffer();
		
		
		for (var i = 0; i < me.item.length; i++) {
			sb.append(
				config.getScriptedValue(
					'colourPicker.templates.category',
					{
						fandeck: me.item[i].toHTML(),
						category: me.item[i].id,
						collectionName: me.item[i].collectionName,
						id: StringHelpers.sprintf("%d", i)
					}
				)
			);
		}
		
		node.innerHTML = sb.toString();
		
		for (var i=0; i<me.item.length; i++) {
			me.item[i].node = document.getElementById(
				StringHelpers.sprintf("colourPicker-category%d", i));
		}
		colourPicker.renderCategorySelectNode(xmlFilenames);
		me.currentColourNode = document.getElementById('colourPicker-currentColour')
		setEvents();
    }
	
	me.search = function () {
		
	}
	
	function setEvents() {
		var colours = CSSHelpers.getElementsByClassName(document,'colourPicker-paintColour');
		
		for (var i=0, colour; colour = colours[i++]; ) {
			EventHelpers.addEvent(colour, 'click', colourClickEvent);;
		}
	}
	
	function colourClickEvent(e) {
		var colourNode = EventHelpers.getEventTarget(e);

		while (!CSSHelpers.isMemberOfClass(colourNode, 'colourPicker-paintColour') &&
				colourNode.nodeName != 'BODY') {
					
			colourNode = colourNode.parentNode;
		}
		
		
		
		var id = CSSHelpers.getElementsByClassName(colourNode, 
			'colourPicker-paintColour-id')[0].innerHTML;
			
		var name = CSSHelpers.getElementsByClassName(colourNode, 
			'colourPicker-paintColour-name')[0].innerHTML;
		
			
		me.currentColourNode.style.backgroundColor = 
			colourNode.style.backgroundColor;
			
		me.currentColourNode.innerHTML =  name;
		
		if (CSSHelpers.isMemberOfClass(colourNode, 'dark')) {
			CSSHelpers.removeClass(me.currentColourNode, 'light');
			CSSHelpers.addClass(me.currentColourNode, 'dark');
		} else {
			CSSHelpers.addClass(me.currentColourNode, 'light');
			CSSHelpers.removeClass(me.currentColourNode, 'dark');
		}
	}
	
}

var colourPicker = new function () {
	var me = this;
	
	me.tabs = null;
	
	var leftNode, rightNode;
	var categoryContainerNode = null;
	var categorySelectNode = null;
	var fieldsetNodes = null;
	var visibleSwatchNumber = 0;
	me.inputField = 0;
	
	me.init = function () {
		if (EventHelpers.hasPageLoadHappened(arguments)) {
            return;
        }
		

		fandecks.init();
		
		initializeNodes();
		
	}
	
	me.renderCategorySelectNode = function (categories) {
		var optionsHTMLSb = new StringBuffer();
		
		for (var i=0; i<categories.length; i++) {
			optionsHTMLSb.append(config.getScriptedValue(
				'colourPicker.templates.categoryOptionNode',
				{
					option: fandecks.item[i].collectionName,
					id: StringHelpers.sprintf("%d", i)
				}
			))
		}
		
		categoryContainerNode.innerHTML = config.getScriptedValue(
			'colourPicker.templates.categorySelectNode',
			{
				options: optionsHTMLSb.toString()
			}
		)
		
		var selectTag = categoryContainerNode.getElementsByTagName('select')[0];

		displayActiveCategory(selectTag);
		EventHelpers.addEvent(selectTag, 'change', displayActiveCategoryEvent);
	}
	 
	function initializeNodes () {
		leftNode = document.getElementById('colourPicker-left');
		rightNode = document.getElementById('colourPicker-right');
		
		categoryContainerNode = document.getElementById('colourPicker-categoryContainer');
		
		
	}
	
	function displayActiveCategoryEvent(e) {
		var selectTag = EventHelpers.getEventTarget(e);
		
		displayActiveCategory(selectTag);
	}
	
	function displayActiveCategory(selectTag) {
		var selectValue = selectTag.value;
		
		var activeCategoryId = StringHelpers.sprintf('colourPicker-category%s', selectValue);
		
		for (var i=0; i<fandecks.item.length; i++) {
			var currentValue = StringHelpers.sprintf("%d", i);
			var fandeckNode = fandecks.item[i].node;
			if (currentValue == selectValue) {
				CSSHelpers.addClass(fandeckNode, 'colourPicker-currentCategory');
				var categoryWidth = 93;
				var colourChips = CSSHelpers.getElementsByClassName(fandeckNode, 'colourPicker-colourChip');
				var categoryNode = CSSHelpers.getElementsByClassName(fandeckNode, 'colourPicker-category')[0];
				CSSHelpers.setWidth(categoryNode, colourChips.length * (categoryWidth + 11));
				 
			} else {
				CSSHelpers.removeClass(fandeckNode, 'colourPicker-currentCategory');
			}
		}
			
	}
	
	
	
	
}
EventHelpers.addPageLoadEvent('colourPicker.init');