var cpTimeoutControl = null;
// vytvori novy ColorPicker
// path - cesta k obrazkum
//
ColorPicker = function(width, height, style, prgImg, title)
{
	this.width = width;
	this.height = height;
	this.style = style;
	this.progressLoaded = false;
	this.painted = false;
	this.progressImg = new Image();
	this.progressImg.src = prgImg;
	this.title = title;
	this.imgError = false;
	if (this.progressImg.complete)
	{
	    this.progressLoaded = true;
		//d.writeln('progress already loaded');
	}
	else
	{
		//d.writeln('progress on event');
		this.progressImg.colorPicker = this;
		this.progressImg.onload = ColorPicker.progressOnLoadHandler;
	}
	this.layers = new Array();
	this.controls = new Array();
	this.imgs = new Array();
	this.imgSrcs = new Array();
	this.textInfos = new Array();
}

// prida vrstvu
ColorPicker.prototype.addLayer = function(layer)
{
	var i = this.layers.length;
	this.layers[i] = layer;
}

// prida ovladani skupiny vrstev
ColorPicker.prototype.addControl = function(ctl)
{
	var i = this.controls.length;
	this.controls[i] = ctl;
}

ColorPicker.prototype.loadImg = function(img, src)
{
	var i = this.imgs.length;
	this.imgs[i] = img;
	this.imgSrcs[i] = src;
	//d.writeln('loadImg('+src+')');

}

// nakresli ColorPicker do divu s danym id
ColorPicker.prototype.paint = function(id)
{
	var mainEl = document.getElementById(id);
	this.mainEl = mainEl;
	if (typeof(mainEl) == 'undefined')
	{
	    alert('ColorPicker Error: Given element does not exist (<div id="'+id+'">)!');
	    return;
	}

	var link = ColorPicker.createElement('link');
	link.rel = 'stylesheet';
	link.type = 'text/css';
	link.href = this.style;
	mainEl.appendChild(link);
	mainEl.style.width = this.width+'px';

	this.canvas = ColorPicker.createElement('div');
	this.canvas.className = 'cpCanvas';
	this.canvas.style.width = this.width+'px';
	this.canvas.style.height = this.height+'px';
	mainEl.appendChild(this.canvas);

	var pos = this.getCanvasPos();

	this.prgs = ColorPicker.createElement('div');
	var ps = this.prgs.style;
	ps.left = pos[0]+'px';
	ps.top = pos[1]+'px';
	ps.zIndex = 100;
	ps.position = 'absolute';
	ps.backgroundColor = 'transparent';
	ps.backgroundImage = 'url("'+this.progressImg.src+'")';
	ps.backgroundPosition = '65px 80px';
	ps.backgroundRepeat = 'no-repeat';
	ps.width = this.width+'px';
	ps.height = this.height+'px';
	mainEl.appendChild(this.prgs);
	this.textInfo = ColorPicker.createElement('div', mainEl);
	this.textInfo.className = 'textInfo';
    this.painted = true;
	if (this.progressLoaded)
	{
	    this.loadImages();
	}
}

ColorPicker.prototype.repaintTextInfo = function()
{
	var info = '';
	for (var i = 0; i < this.textInfos.length; i++)
	{
		info += ' / '+this.textInfos[i];
	}
	this.textInfo.innerHTML = ((typeof this.title == 'undefined')?"":this.title+": ")+info.substr(2);
}

ColorPicker.prototype.loadImages = function()
{
	this.loadingImages = this.imgs.length;
	for (var i = 0; i < this.imgs.length; i++)
	{
		this.imgs[i].src = this.imgSrcs[i];
	    if (this.imgs[i].complete)
	    {
			this.loadingImages--;
	    }
		else
		{
			this.imgs[i].colorPicker = this;
			this.imgs[i].onload = ColorPicker.imgOnLoadHandler;
			this.imgs[i].onerror = ColorPicker.imgOnErrorHandler;
		}
	}
	if (this.loadingImages <= 0)
	{
	    this.allImagesLoaded();
	}
}

// vraci souradnice leveho horniho rohu zadaneho elementu
ColorPicker.prototype.getCanvasPos = function()
{
	var curleft = curtop = 0;
	var obj = this.canvas;
	if (obj.offsetParent)
	{
		curleft = obj.offsetLeft;
		curtop = obj.offsetTop;
		while ((obj = obj.offsetParent) && (obj.id != 'mainArea'))
		{
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		}
	}
//	return [curleft,curtop];
	return [120,0];
}

// provede se, kdyz se nacetly vsechny obrazky (mel by zmizet progresik)
ColorPicker.prototype.allImagesLoaded = function()
{
	var pos = this.getCanvasPos();
	// nakreslim obrazky pro jednotlivy vrstvy
	for (var i = 0; i < this.layers.length; i++)
	{
		this.layers[i].paint(pos, i);
	}
	var tableDiv = ColorPicker.createElement('div');
	tableDiv.className = 'cpButtonsTblDiv';
	tableDiv.align = 'center';
	this.mainEl.appendChild(tableDiv);
	var table = ColorPicker.createElement('table');
	table.className = 'cpButtonsTbl';
	var tb = ColorPicker.createElement('tbody');
	table.appendChild(tb);
	var tr = ColorPicker.createElement('tr');
	tb.appendChild(tr);
	// nakreslim tlacitka pro jednotlivy vrstvy
	for (var i = 0; i < this.controls.length; i++)
	{
		var td = ColorPicker.createElement('td');
		this.controls[i].paint(td);
	    tr.appendChild(td);
	}
	
	for (var i=0; i<this.controls.length; i++)
    {
        var c = this.controls[i];
		for (var j=0; j<c.cols.length; j++)
	    {
			if (!c.allowedColor(j))
			{
				c.setInactive(j);
			}
		}
    }

    tableDiv.appendChild(table);
	this.repaintTextInfo();
	this.prgs.style.visibility = 'hidden';
}

ColorPicker.progressOnLoadHandler = function()
{
	//d.writeln('loaded progress');
	var cp = this.colorPicker;
	cp.progressLoaded = true;
	if (cp.painted)
	{
	    cp.loadImages();
	}
	this.onload = null;
	return true;
}


// zpracuje nacteni obrazku
ColorPicker.imgOnLoadHandler = function(e)
{
	var cp = this.colorPicker;
	if (cp.imgError)
	{
	    return;
	}
	cp.loadingImages--;
	//d.writeln('img loaded ('+cp.loadingImages+')');
	if ((cp.loadingImages == 0) && cp.painted)
	{
	    cp.allImagesLoaded();
	}
	return true;
}

// zpracuje nacteni obrazku
ColorPicker.imgOnErrorHandler = function(e)
{
	var cp = this.colorPicker;
	if (cp.imgError)
	{
	    return;
	}
	cp.imgError = true;
	var pos = cp.getCanvasPos();

	cp.errorLayer = ColorPicker.createElement('div');
	var ps = cp.errorLayer.style;
	cp.errorLayer.className = 'cpError';
	ps.left = pos[0]+'px';
	ps.top = pos[1]+'px';
	ps.zIndex = 101;
	ps.position = 'absolute';
	ps.backgroundColor = 'transparent';
	ps.width = cp.width+'px';
	ps.height = cp.height+'px';
	cp.mainEl.appendChild(cp.errorLayer);
	cp.errorLayer.innerHTML = 'ERROR: Couldn\'t load images!';
}

//////////////////////////////////////////////////////////////////////////////
// ColorPickerLayer - vrstva vysledneho obrazku menici barvu                //
//////////////////////////////////////////////////////////////////////////////

ColorPickerLayer = function(colorPicker, id, path, imgExt)
{
	this.colorPicker = colorPicker;
	colorPicker.addLayer(this);
	this.id = id;
	this.path = path;
	this.imgExt = imgExt;
	
	this.imgs = new Array();
	this.adjacent = new Array();
}

// prida vrstve barvu (obrazek)
ColorPickerLayer.prototype.addColor = function(id)
{
	var imgs = this.imgs;
	var i = imgs.length;
	if (id == '')
	{
	    imgs[i] = null;
		return;
	}
	imgs[i] = new Image();
	imgs[i].colorPickerLayer = this;
	imgs[i].colorPicker = this.colorPicker;
	this.colorPicker.loadImg(imgs[i], this.path + this.id + '_' + id + '.' + this.imgExt);
}

ColorPickerLayer.prototype.nextTo = function(layer)
{
	this.adjacent[this.adjacent.length] = layer;
	layer.adjacent[layer.adjacent.length] = this;
}

// nakresli obrazek na pozici danou polem [x,y] do hloubky zIndex
ColorPickerLayer.prototype.paint = function(pos, zIndex)
{
	this.img = ColorPicker.createElement('img');
	this.img.className = 'cpLayer';
	this.img.src = this.imgs[0].src;
	this.img.colorPicker = this.colorPicker;
	this.img.style.zIndex = zIndex;
	this.img.style.position = 'absolute';
	this.repaint(pos);
	this.colorPicker.canvas.appendChild(this.img);
}

// preposune vrstvu pri zmene velikosti okna (zatim nevyuzito)
ColorPickerLayer.prototype.repaint = function(pos)
{
	this.img.style.left = (pos[0]-120)+'px';
	this.img.style.top = pos[1]+'px';
}

// nastavi vrstve barvu (obrazek) podle zadaneho cisla (index)
ColorPickerLayer.prototype.setColor = function(idx)
{
    this.img.src = this.imgs[idx].src;
}

//////////////////////////////////////////////////////////////////////////////
// ColorPickerControl - ovladani jedne skupiny vrstev                       //
//////////////////////////////////////////////////////////////////////////////

ColorPickerControl = function(colorPicker, title, path, prefix, imgExt, defaultIndex)
{
	this.id = colorPicker.controls.length;
	this.colorPicker = colorPicker;
	colorPicker.addControl(this);
	this.title = title;
	this.path = path;
	this.prefix = prefix;
	this.imgExt = imgExt;
	this.defaultIndex = defaultIndex;
	this.selected = defaultIndex;

	this.btns = new Array();
	this.cols = new Array();
	this.titles = new Array();
	this.layers = new Array();
}

// prida barvu
ColorPickerControl.prototype.addColor = function(id, title)
{
	var i = this.titles.length;
	this.titles[i] = title;
	this.cols[i] = id;
	if (id == '')
	{
		el = ColorPicker.createElement('div');
		el.className = 'cpBtnDummy';
		this.btns[i] = el;

	}
	else
	{
		el = ColorPicker.createElement('div');
		el.className = 'cpBtn';
		el.colorPickerControl = this;
		el.colorPicker = this.ColorPicker;
		el.colIdx = i;
		el.onclick = ColorPickerControl.onClickHandler;
		var img = ColorPicker.createElement('img', el);
		img.colorPickerControl = this;
		img.src = this.path + this.prefix + '_' + id + '.' + this.imgExt;
		img.alt = title;
		img.colIdx = i;
		img.onmouseover = ColorPickerControl.onMouseOverHandler;
		this.btns[i] = el;
	}
}

// pridam ovladacimu prvku ovladanou vrstvu
ColorPickerControl.prototype.addLayer = function(layer)
{
	var i = this.layers.length;
	this.layers[i] = layer;
	layer.cpControl = this;
	for (var j = 0; j < this.cols.length; j++)
	{
    	layer.addColor(this.cols[j]);
    }
}

// nasklada tlacitka pro jednotlive barvy vrstvy do zadaneho elementu
ColorPickerControl.prototype.paint = function(el)
{
// 	var titleElem = ColorPicker.createElement('div');
// 	titleElem.className = 'btnsTitle';
// 	titleElem.innerHTML = this.title;
// 	el.appendChild(titleElem);
	for (var i = 0; i < this.btns.length; i++)
	{
	    el.appendChild(this.btns[i]);
	}
	for (var i = 0; i < this.layers.length; i++)
	{
	    this.layers[i].setColor(this.defaultIndex);
	}
	this.setSelected(this.defaultIndex);
	this.colorPicker.textInfos[this.id] = this.titles[this.defaultIndex];
}

ColorPickerControl.prototype.setActive = function(i)
{
	if (this.cols[i] != '')
	{
		ColorPicker.removeClass(this.btns[i], 'cpInactive');
		ColorPicker.removeClass(this.btns[i], 'cpSelected');
	}
}

ColorPickerControl.prototype.setInactive = function(i)
{
	if (this.cols[i] != '')
	{
		ColorPicker.addClass(this.btns[i], 'cpInactive');
	}
}

ColorPickerControl.prototype.setSelected = function(i)
{
	if (this.cols[i] != '')
	{
		ColorPicker.addClass(this.btns[i], 'cpSelected');
	}
}

ColorPickerControl.prototype.allowedColor = function(idx)
{
    for (var i=0; i<this.layers.length; i++)
    {
        var l = this.layers[i];
		for (var j=0; j<l.adjacent.length; j++)
		{
		    var l2c = l.adjacent[j].cpControl;
		    if ((l2c != this) && (l2c.selected == idx))
		    {
		        return false;
		    }
		}
    }
	return true;
}

// nastavi vrstve barvu (obrazek) podle cisla tlacitka (el)
ColorPickerControl.prototype.colorClicked = function(idx)
{
	var oldIdx = this.selected;
	if (!this.allowedColor(idx))
	{
	    return true;
	}

    this.setActive(this.selected);
	this.setSelected(idx);
    for (var i=0; i < this.layers.length; i++)
    {
        this.layers[i].setColor(idx);
    }

	this.colorPicker.textInfos[this.id] = this.titles[idx];
	this.selected = idx;
	this.colorPicker.repaintTextInfo();

	// aktivuju resp. deaktivuju starou resp. novou vybranou barvu u ostatnich ovladacich prvku
	for (var i=0; i<this.colorPicker.controls.length; i++)
    {
        var c = this.colorPicker.controls[i];
        if (c.id != this.id)
        {
            if (c.allowedColor(oldIdx))
            {
				c.setActive(oldIdx);
            }
            if (!c.allowedColor(idx))
            {
				c.setInactive(idx);
			}
        }
    }
}

ColorPickerControl.timeIsUp = function(colIdx, cnt)
{
	var el = cpTimeoutControl;
	if (cnt % 2 != 0)
	{
		for (var i=0; i < el.layers.length; i++)
	    {
	        el.layers[i].setColor(el.selected);
	    }
	}
	else
	{
		for (var i=0; i < el.layers.length; i++)
	    {
	        el.layers[i].setColor(colIdx);
	    }
	}
	cnt--;
	if (cnt > 0)
	{
		setTimeout("ColorPickerControl.timeIsUp("+colIdx+","+cnt+")",150);
	}
	else
	{
	    cpTimeoutControl = null;
	}
}

// zpracuje kliknuti na barvu
ColorPickerControl.onClickHandler = function()
{
	var el = this;
	el.colorPickerControl.colorClicked(el.colIdx);
	return true;
}


// zpracuje najeti mysi nad tlacitko
ColorPickerControl.onMouseOverHandler = function()
{
	if (cpTimeoutControl != null)
	    return;
	var el = this;
    for (var i=0; i<el.colorPickerControl.colorPicker.controls.length; i++)
    {
        if (el.colorPickerControl.colorPicker.controls[i].selected == el.colIdx)
        {
			return true;
        }
    }

	for (var i=0; i < el.colorPickerControl.layers.length; i++)
    {
        el.colorPickerControl.layers[i].setColor(el.colIdx);
    }
	cpTimeoutControl = el.colorPickerControl;
	setTimeout("ColorPickerControl.timeIsUp("+el.colIdx+",3)",150);
	return true;
}

//////////////////////////////////////////////////////////////////////////////
// pomocne blbinky                                                          //
//////////////////////////////////////////////////////////////////////////////

/// detect a special case of "web browser"
ColorPicker.is_ie = ( /msie/i.test(navigator.userAgent) &&
		   !/opera/i.test(navigator.userAgent) );

ColorPicker.createElement = function(type, parent) {
	var el = null;
	if (document.createElementNS) {
		// use the XHTML namespace; IE won't normally get here unless
		// _they_ "fix" the DOM2 implementation.
		el = document.createElementNS("http://www.w3.org/1999/xhtml", type);
	} else {
		el = document.createElement(type);
	}
	if (typeof parent != "undefined") {
		parent.appendChild(el);
	}
	return el;
};

ColorPicker.removeClass = function(el, className) {
	if (!(el && el.className)) {
		return;
	}
	var cls = el.className.split(" ");
	var ar = new Array();
	for (var i = cls.length; i > 0;) {
		if (cls[--i] != className) {
			ar[ar.length] = cls[i];
		}
	}
	el.className = ar.join(" ");
};

ColorPicker.addClass = function(el, className) {
	ColorPicker.removeClass(el, className);
	el.className += " " + className;
};