imagesDir = "icons/";

wysiwygWidth = 100;
wysiwygHeight = 200;

document.write('<link rel="stylesheet" type="text/css" href="styles.css">');

var BlockFormats = new Array();
  BlockFormats[0]  = "Address";
  BlockFormats[1]  = "Bulleted List";
  BlockFormats[2]  = "Definition";
	BlockFormats[3]  = "Definition Term";
	BlockFormats[4]  = "Directory List";
	BlockFormats[5]  = "Formatted";
	BlockFormats[6]  = "Heading 1";
	BlockFormats[7]  = "Heading 2";
	BlockFormats[8]  = "Heading 3";
	BlockFormats[9]  = "Heading 4";
	BlockFormats[10] = "Heading 5";
	BlockFormats[11] = "Heading 6";
	BlockFormats[12] = "Menu List";
	BlockFormats[13] = "Normal";
	BlockFormats[14] = "Numbered List";

var FontSizes = new Array();
  FontSizes[0]  = "1";
  FontSizes[1]  = "2";
  FontSizes[2]  = "3";
	FontSizes[3]  = "4";
	FontSizes[4]  = "5";
	FontSizes[5]  = "6";
	FontSizes[6]  = "7";

var buttonName = new Array();
  buttonName[0]  = "bold";
  buttonName[1]  = "italic";
  buttonName[2]  = "underline";
  buttonName[3]  = "strikethrough";
  buttonName[4]  = "seperator";
	buttonName[5]  = "subscript";
	buttonName[6]  = "superscript";
	buttonName[7]  = "seperator";
	buttonName[8]  = "justifyleft";
	buttonName[9]  = "justifycenter";
	buttonName[10] = "justifyright";
	buttonName[11] = "seperator";
	buttonName[12] = "unorderedlist";
	buttonName[13] = "orderedlist";
	buttonName[14] = "outdent";
	buttonName[15] = "indent";

var buttonName2 = new Array();
	buttonName2[0]  = "seperator";
	buttonName2[1]  = "cut";
	buttonName2[2]  = "copy";
	buttonName2[3]  = "paste";
	buttonName2[4]  = "seperator";
  buttonName2[5]  = "undo";
	buttonName2[6]  = "redo";
	
var ToolbarList = {
//Name              buttonID                 buttonTitle           buttonImage                            buttonImageRollover
  "bold":           ['Bold',                 'Tu&#269;n&eacute;',               imagesDir + 'bold.gif',               imagesDir + 'bold_on.gif'],
  "italic":         ['Italic',               'Kurz&iacute;va',             imagesDir + 'italics.gif',            imagesDir + 'italics_on.gif'],
  "underline":      ['Underline',            'Pod&#269;iarknut&eacute;',          imagesDir + 'underline.gif',          imagesDir + 'underline_on.gif'],
	"strikethrough":  ['Strikethrough',        'Pre&#269;iarknut&eacute;',      imagesDir + 'strikethrough.gif',      imagesDir + 'strikethrough_on.gif'],
	"seperator":      ['',                     '',                   imagesDir + 'seperator.gif',          imagesDir + 'seperator.gif'],
	"subscript":      ['Subscript',            'Doln&yacute; index',          imagesDir + 'subscript.gif',          imagesDir + 'subscript_on.gif'],
	"superscript":    ['Superscript',          'Horn&yacute; index',        imagesDir + 'superscript.gif',        imagesDir + 'superscript_on.gif'],
	"justifyleft":    ['Justifyleft',          'Zarovna&#357; do&#318;ava',        imagesDir + 'justify_left.gif',       imagesDir + 'justify_left_on.gif'],
	"justifycenter":  ['Justifycenter',        'Centrova&#357;',      imagesDir + 'justify_center.gif',     imagesDir + 'justify_center_on.gif'],
	"justifyright":   ['Justifyright',         'Zarovna&#357; doprava',       imagesDir + 'justify_right.gif',      imagesDir + 'justify_right_on.gif'],
	"unorderedlist":  ['InsertUnorderedList',  'Odr&aacute;&#382;ky',imagesDir + 'list_unordered.gif',     imagesDir + 'list_unordered_on.gif'],
	"orderedlist":    ['InsertOrderedList',    '&#268;&iacute;slovanie',  imagesDir + 'list_ordered.gif',       imagesDir + 'list_ordered_on.gif'],
	"outdent":        ['Outdent',              'Zv&auml;&#269;&scaron;i&#357; zar&aacute;&#382;ku',            imagesDir + 'indent_left.gif',        imagesDir + 'indent_left_on.gif'],
	"indent":         ['Indent',               'Zmen&scaron;i&#357; zar&aacute;&#382;ku',             imagesDir + 'indent_right.gif',       imagesDir + 'indent_right_on.gif'],
	"cut":            ['Cut',                  'Vystrihn&uacute;&#357;',                imagesDir + 'cut.gif',                imagesDir + 'cut_on.gif'],
	"copy":           ['Copy',                 'Kop&iacute;rova&#357;',               imagesDir + 'copy.gif',               imagesDir + 'copy_on.gif'],
  "paste":          ['Paste',                'Prilepi&#357;',              imagesDir + 'paste.gif',              imagesDir + 'paste_on.gif'],
	"forecolor":      ['selectcol',            'Farba p&iacute;sma',          imagesDir + 'forecolor.gif',          imagesDir + 'forecolor_on.gif'],
	"undo":           ['Undo',                 'Sp&auml;&#357;',               imagesDir + 'undo.gif',               imagesDir + 'undo_on.gif'],
	"redo":           ['Redo',                 'Znovu',               imagesDir + 'redo.gif',               imagesDir + 'redo_on.gif'],
	"selectsize":     ['SelectSize',           'Ve&#318;kos&#357; p&iacute;sma',         imagesDir + 'select_size.gif',        imagesDir + 'select_size_on.gif']
};

if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement){
  HTMLElement.prototype.insertAdjacentElement = function
  (where,parsedNode)
	{
	  switch (where){
		case 'beforeBegin':
			this.parentNode.insertBefore(parsedNode,this)
			break;
		case 'afterBegin':
			this.insertBefore(parsedNode,this.firstChild);
			break;
		case 'beforeEnd':
			this.appendChild(parsedNode);
			break;
		case 'afterEnd':
			if (this.nextSibling) 
      this.parentNode.insertBefore(parsedNode,this.nextSibling);
			else this.parentNode.appendChild(parsedNode);
			break;
		}
	}

	HTMLElement.prototype.insertAdjacentHTML = function
  (where,htmlStr)
	{
		var r = this.ownerDocument.createRange();
		r.setStartBefore(this);
		var parsedHTML = r.createContextualFragment(htmlStr);
		this.insertAdjacentElement(where,parsedHTML)
	}


	HTMLElement.prototype.insertAdjacentText = function
  (where,txtStr)
	{
		var parsedText = document.createTextNode(txtStr)
		this.insertAdjacentElement(where,parsedText)
	}
};

var globID;

function generate_wysiwyg(textareaID) {
 
	document.getElementById(textareaID).style.display = 'none'; 
	var n = textareaID;
	globID=n;
	toolbarWidth = parseFloat(wysiwygWidth) ;

  var toolbar;
  toolbar =  '<table cellpadding="0" cellspacing="0" border="0" class="toolbar" style="width:' + toolbarWidth + '%;"><tr>';

	toolbar += '<td style="width: 90px;"><span id="FontSizes'  + n + '"></span></td>';
	  toolbar += '<td style="width: 60px;"><span id="FontColors"></span></td>';
  
	for (var i = 0; i <= buttonName.length;) { 
    if (buttonName[i]) {
	    var buttonObj            = ToolbarList[buttonName[i]];
		  var buttonID             = buttonObj[0];
	    var buttonTitle          = buttonObj[1];
      var buttonImage          = buttonObj[2];
		  var buttonImageRollover  = buttonObj[3];
	    
			if (buttonName[i] == "seperator") {
		    toolbar += '<td style="width: 12px;" align="center"><img src="' +buttonImage+ '" border=0 unselectable="on" width="2" height="18" hspace="2"></td>';
			}
	    else {
		    toolbar += '<td style="width: 22px;"><img src="' +buttonImage+ '" border=0 unselectable="on" title="' +buttonTitle+ '" id="' +buttonID+ '" class="button" onClick="formatText(this.id,\'' + n + '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' + buttonImageRollover + '\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' + buttonImage + '\';" unselectable="on" width="20" height="20"></td>';
	    }
    }
    i++;
  }
  
 for (var j = 0; j <= buttonName2.length;) {
    if (buttonName2[j]) {
	    var buttonObj            = ToolbarList[buttonName2[j]];
		  var buttonID             = buttonObj[0];
	    var buttonTitle          = buttonObj[1];
      var buttonImage          = buttonObj[2];
		  var buttonImageRollover  = buttonObj[3];
	  
		  if (buttonName2[j] == "seperator") {
		    toolbar += '<td style="width: 12px;" align="center"><img src="' +buttonImage+ '" border=0 unselectable="on" width="2" height="18" hspace="2"></td>';
			}
	    else {
		    toolbar += '<td style="width: 22px;"><img src="' +buttonImage+ '" border=0 unselectable="on" title="' +buttonTitle+ '" id="' +buttonID+ '" class="button" onClick="formatText(this.id,\'' + n + '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' +buttonImageRollover+ '\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' + buttonImage + '\';" unselectable="on" width="20" height="20"></td>';
	    }
    }
    j++;
  }
  toolbar += '<td style="width:100%"></td><td style="padding-right:10px;" valign="middle"><a href="http://www.tvorbastranok.com" class="odkaz">tvorbastranok.com</a><td></tr></table>';  

	
	var iframe = '<table cellpadding="0" cellspacing="0" border="0" style="width:' + wysiwygWidth + '%; height:' + wysiwygHeight + 'px; border: 1px solid #CCCCCC; margin:0px; padding:0px;"><tr><td valign="top">'
  + '<iframe frameborder="0" style="margin:0px; padding:0px;" id="wysiwyg' + n + '"></iframe>'
  + '</td></tr></table>';
  
    	

  document.getElementById(n).insertAdjacentHTML("afterEnd", toolbar + iframe);

	outputFontSizes(n); 
	hideFontSizes(n);
	
	outputColors(); 
	hideColors();

  document.getElementById("wysiwyg" + n).style.height = wysiwygHeight + "px";
  document.getElementById("wysiwyg" + n).style.width = wysiwygWidth + "%";
	
  var content = document.getElementById(n).value;

	var doc = document.getElementById("wysiwyg" + n).contentWindow.document;

  doc.open();
  doc.write(content);
  doc.close();

  doc.body.contentEditable = true;
  doc.designMode = "on";
  document.getElementById("wysiwyg" + n).contentWindow.document.execCommand('styleWithCSS', false, null);
}

function formatText(id, n, selected) {

   document.getElementById("wysiwyg" + n).contentWindow.focus();
	  if (id == "FontSize") {
      document.getElementById("wysiwyg" + n).contentWindow.document.execCommand("FontSize", false, selected);
	  }

    else if (id == 'ForeColor' ) {
		document.getElementById("wysiwyg" + n).contentWindow.document.execCommand("ForeColor", false, selected);
    }
	  else {
      document.getElementById("wysiwyg" + n).contentWindow.document.execCommand(id, false, null);
		}
};

	

function outputFontSizes(n) {

  var FontSizeObj        = ToolbarList['selectsize'];
  var FontSize           = FontSizeObj[2];
  var FontSizeOn         = FontSizeObj[3];

	FontSizes.sort();
	var FontSizesDropDown = new Array;
	FontSizesDropDown[n] = '<table border="0" cellpadding="0" cellspacing="0"><tr><td style="width:80px; padding-left:10px" onMouseOver="document.getElementById(\'selectSize' + n + '\').src=\'' + FontSizeOn + '\';" onMouseOut="document.getElementById(\'selectSize' + n + '\').src=\'' + FontSize + '\';"><img src="' + FontSize + '" id="selectSize' + n + '" width="70" height="20" onClick="showFontSizes(\'' + n + '\');" unselectable="on">';
  FontSizesDropDown[n] += '<span id="Sizes' + n + '" class="dropdown" style="width: 270px;">';

	for (var i = 0; i <= FontSizes.length;) {
	  if (FontSizes[i]) {
      FontSizesDropDown[n] += '<button type="button" onClick="formatText(\'FontSize\',\'' + n + '\',\'' + FontSizes[i] + '\')\;hideFontSizes(\'' + n + '\');" onMouseOver="this.className=\'mouseOver\'" onMouseOut="this.className=\'mouseOut\'" class="mouseOut" style="width: 250px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td align="left" style="font-family: arial, verdana, helvetica;"><font size="' + FontSizes[i] + '">ve&#318;kos&#357; ' + FontSizes[i] + '</font></td></tr></table></button>';	
    }	  
	  i++;
  }
	FontSizesDropDown[n] += '</span></td></tr></table>';
	document.getElementById('FontSizes' + n).insertAdjacentHTML("afterBegin", FontSizesDropDown[n]);
};

function hideFontSizes(n) {
  document.getElementById('Sizes' + n).style.display = 'none'; 
};

function showFontSizes(n) { 
  if (document.getElementById('Sizes' + n).style.display == 'block') {
    document.getElementById('Sizes' + n).style.display = 'none';
	}
  else {
    document.getElementById('Sizes' + n).style.display = 'block'; 

    document.getElementById('Sizes' + n).style.position = 'absolute';		
  }
};

function _dec_to_rgb(value) {
  var hex_string = "";
  for (var hexpair = 0; hexpair < 3; hexpair++) {
    var myByte = value & 0xFF;            
    value >>= 8;                          
    var nybble2 = myByte & 0x0F;   
    var nybble1 = (myByte >> 4) & 0x0F;
    hex_string += nybble1.toString(16); 
    hex_string += nybble2.toString(16);
  }
  return hex_string.toUpperCase();
};

function viewSource(n) {

  var getDocument = document.getElementById("wysiwyg" + n).contentWindow.document;
  retval=getDocument.body.innerHTML;

  return retval;
};

function zapis()
{
	var browserName = navigator.appName;
  if (browserName == "Microsoft Internet Explorer") {
	var tempvar=viewSource('testik1');  
	document.getElementById('testik1').value=tempvar;
	}
	else
	{
		var tempstr="S touto aplikáciou môžete pracovat iba v Microsoft Explorer";
		alert(tempstr);
	}
 

}


function hideColors() {
  document.getElementById('Colors').style.display = 'none'; 
};

function showColors() { 
  if (document.getElementById('Colors').style.display == 'block') {
    document.getElementById('Colors').style.display = 'none';
	}
  else {
    document.getElementById('Colors').style.display = 'block'; 
    document.getElementById('Colors').style.position = 'absolute';		
  }
};

function previewColor(color) {
	document.getElementById('PreviewColor').style.backgroundColor = color;
};

function selectcolr(color) {
	formatText('ForeColor',globID,color);
	hideColors();
};

function outputColors()
{
	
  var ColorObj        = ToolbarList['forecolor'];
  var Color           = ColorObj[2];
  var ColorOn         = ColorObj[3];
	
	ddl = '<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td style="width:60px;" onMouseOver=\"document.getElementById(\'selectcol\').src=\'' + ColorOn + '\'\"';
	  
ddl +=' onMouseOut=\"document.getElementById(\'selectcol\').src=\'' + Color + '\'\">';
ddl += '<img src=\"' + Color + '\" id=\"selectcol\" width=\"50\" height=\"20\" onClick=\"showColors();\" unselectable=\"on\" /><br />';
    ddl += '<div id="Colors" class="color" >';
	
	ddl += '<button type="button" class="b1" onClick="selectcolr(\'#000000\')"></button>';
	ddl += '<button type="button" class="b2" onClick="selectcolr(\'#666666\')"></button>';
	ddl += '<button type="button" class="b3" onClick="selectcolr(\'#999999\')"></button>';
	ddl += '<button type="button" class="b4" onClick="selectcolr(\'#CCCCCC\')"></button>';
	ddl += '<button type="button" class="b5" onClick="selectcolr(\'#FFFFFF\')"></button>';

	
	ddl += '<button type="button" class="r1" onClick="selectcolr(\'#FF0000\')"></button>';
	ddl += '<button type="button" class="r3" onClick="selectcolr(\'#FF3366\')"></button>';
	ddl += '<button type="button" class="r2" onClick="selectcolr(\'#FF6600\')"></button>';
		
	ddl += '<button type="button" class="f" onClick="selectcolr(\'#FF00FF\')"></button>';

	ddl += '<button type="button" class="m1" onClick="selectcolr(\'#00FFFF\')"></button>';
	ddl += '<button type="button" class="m3" onClick="selectcolr(\'#3399FF\')"></button>';
	ddl += '<button type="button" class="m4" onClick="selectcolr(\'#0000FF\')"></button>';
	
	ddl += '<button type="button" class="z1" onClick="selectcolr(\'#00FF00\')"></button>';
	ddl += '<button type="button" class="z2" onClick="selectcolr(\'#009900\')"></button>';
	ddl += '<button type="button" class="y1" onClick="selectcolr(\'#FFFF00\')"></button>';


	ddl += '</div></td></tr></table>';
	document.getElementById('FontColors').insertAdjacentHTML("afterBegin", ddl);

};