function checkName() {
    element=document.getElementById('skin_name');
    if(element.value.length<5) {
        document.getElementById('skin_message').innerHTML = '<font color="red">Name needs to be at least 5 characters</font>';
        return false;
    } else {
        showProgress('Saving');

    }
    return true;
}

function radioClicked(element, value) {
//	div_element=document.getElementById(element);

//	div_element.innerHTML='<input id="'+element+'value" type="text" name="'+element+'" value="FFFFFF"/>';
	
   // document.getElementById('test').innerHTML='test est'+value ;
	var intvalue = parseInt(value, 16);

	updateColorBars(intvalue);
}
function openSkinEditorWindow(url) {
window.open(url,url,'width=950,height=600,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,copyhistory=no,resizable=yes');
}
function updateColorBars(value) {
    document.getElementById('red').value =   ((value&0xFF0000)>>16);
    document.getElementById('green').value = ((value&0x00FF00)>>8);
    document.getElementById('blue').value =  ((value&0x0000FF));
}

// HTML Slider Control

var down = false;

function makeSlider( name, range, dflt, base ) {

  var widths = new Array( range );
  var res = 256.0 / range;
  var start = 0;
  var id = '"' + name + '"';

  if ( arguments.length < 4 ) {
    base = 10;
    if ( arguments.length < 3 ) dflt = Math.round( range / 2, 0 );
  }
  


  document.write( "<map style='display:none' name='m" + name + "'>" );
  for ( var i = 1; i <= range; i++ ) {
    end = res * i;
    targ = Math.round( end, 0 );
    if ( targ > end ) targ = targ - 1;
    document.write( "<area shape='rect' coords='" + start.toString( 10 ) + ",1," + targ.toString( 10 ) +
                    ",22' href='javascript:void(0)'" );
    document.write( " onmouseover='return so(" + i.toString( 10 ) + ", " + id +
                    ")' onmousedown='return sb(" + i.toString( 10 ) +  ", " + id +
                    ")' onmouseup='return sb(0, " + id + ")' />" );
    widths[ i - 1 ] = targ - start;
    start = targ;
  }
  document.write( "</map><table class='slider'><tr><td>" );

  for ( var i = 1; i <= range; i++ ) {
    document.write( "<img class='pointer' height='5' width='" + widths[ i - 1 ].toString( 10 ) + 
                    "' src='images/skin/slider.gif' id='s" + name + i.toString( 10 ) + "' alt='" + name + " spacer'>" );
  }
  document.write( "<br /><img border=0 src='images/skin/"+name+"slide.gif' alt='" + name + " scale' usemap='#m" + name +
                  "' height='15' width='256' onmousemove='return false' />" );

  document.write( "<input type='text' size='3' readonly='readonly' name='" + name + "' id='" + name + 
                  "' value='" + dflt.toString( base ) + "' slider='" + range.toString( 10 ) +
                  "' radix='" + base.toString( 10 ) + "' /></td></tr></table>" );
 
 
  document.writeln(" ");


  return dflt;

}
function setSelectedColor(color) {
    for (i=0;i<document.colors.radio.length;i++) {
      if (document.colors.radio[i].checked) {
          element = document.colors.radio[i].value;
          value_element=document.getElementById(element+'value');

 		  var hex = '';
		  while(color.toString(16).length+hex.length < 6) {
		      hex=hex+'0';
		  }
		  hex = hex+''+color.toString(16);
          value_element.value=hex;
          setColor(element, value_element.value);
      }
    }
    updateColorBars(color);

}


function setColor(key, color) {
  var tds = document.getElementById("skin_data").getElementsByTagName( "td" );

  for(var i=0; i<tds.length;i++) {
    if(tds[i].id == key || tds[i].id == 'color_view') {
        tds[i].bgColor = '#'+color;
    }
  
  }
  var fonts = document.getElementById("skin_view").getElementsByTagName( "font" );
    
  for(var i=0; i<fonts.length;i++) {
    if(fonts[i].id == key) {
        fonts[i].color = '#'+color;
    }
  
  }
}
function createColorPicker() {
	document.writeln(" ");
	document.write("<table border='0' cellspacing='0' cellpadding='0'><tr>");
	var r = 0;
	var g = 0;
	var b = 0;
	var printed = 0;
	var value;
	for(r=0;r<=0xFF;) {
			if(printed != 0) {
				document.writeln("</tr><tr>");
			}		
		for(g=0;g<=0xFF;) {
			
			for(b=0;b<=0xFF;) {

				value = (r<<16);
				value+=(g<<8);
				value+=b;
				var hex = '';
				while(value.toString(16).length+hex.length < 6) {
					hex=hex+'0';
				}
				hex = hex+''+value.toString(16);
				document.write("<td onclick='return setSelectedColor("+value+")' bgcolor='#"+hex+"' width='7' height='7'></td>");
				printed++;
				
				if((b+(0xF*4) > 0xFF)) {
					b+=(0xF);
				} else {
				    b+=(0xF*4);
				}
			}
			if((g+(0xF*4) > 0xFF)) {
				g+=(0xF);
			} else {
			    g+=(0xF*4);
			}
		}
		if((r+(0xF*4) > 0xFF)) {
			r+=(0xF);
		} else {
		    r+=(0xF*4);
		}
		
		
	}
	document.write('</tr><tr>');
	for(var color = 0; color <= 0xFF;) {
		value = (color<<16);
		value+=(color<<8);
		value+=color;
		var hex = '';
		while(value.toString(16).length+hex.length < 6) {
			hex=hex+'0';
		}
		hex = hex+''+value.toString(16);
		document.write("<td colspan='3' onclick='return setSelectedColor("+value+")' bgcolor='#"+hex+"' width='7' height='7'></td>");
		
		if((color+(0x7*4) > 0xFF)) {
			color+=(0x7);
		} else {
		    color+=(0x7*4);
		}
	}
	document.writeln("</tr>");
	document.write("</table>");

}
function rstsldrs() {

  var sliders = document.getElementsByTagName( "input" );
  for ( var i = 0; i < sliders.length; ++i ) {
    if ( sliders[ i ].attributes.slider ) {
      var base = parseInt( sliders[ i ].attributes.radix.value, 10 );
      down = true;
      so( parseInt( sliders[ i ].defaultValue, base ), sliders[ i ].id );
      down = false;
    }
  }
  return true;

}
function getPointer( id, val ) {

  var obj = document.getElementById( "s" + id + val.toString( 10 ) );
  if ( document.body && document.body.style ) obj = obj.style;
  
  return obj;

}

function so( pos, id ) {
    var slider = document.getElementById( id );
    var base = parseInt( slider.attributes.radix.value, 10 );
    var ptr = getPointer( id, parseInt( slider.value, base ) );
    ptr.visibility = 'hidden';
  if ( down ) {


    slider.value = pos.toString( base );
    ptr = getPointer( id, pos );
    ptr.visibility = 'inherit';


    var idSt = id;

    for (i=0;i<document.colors.radio.length;i++) {
      if (document.colors.radio[i].checked) {
          element = document.colors.radio[i].value;
          value_element=document.getElementById(element+'value');
          var currentValue = parseInt(value_element.value,16);
          var newValue = pos.toString(base);
          newValue = newValue&0x0000FF;
          var setValue;
          if(id == 'red') {
            setValue = (currentValue&0x00FFFF)+(newValue<<16);
          } else if(id == 'green') {
            setValue = (currentValue&0xFF00FF)+(newValue<<8);
          } else if(id == 'blue') {
            setValue = (currentValue&0xFFFF00)+(newValue);
          }
          
          value_element.value=setValue.toString(16);
          while(value_element.value.length < 6) {
              value_element.value='0'+value_element.value;
          }
          setColor(element, value_element.value);
//          document.getElementById('color_view').bgColor = '#'+value_element.value;
      }
    }

  }
  return false;

}

function sb( pos, id ) {

  down = pos > 0;
  return so( pos, id );

}


function winstatus(){
  window.status="" ;return true;
} 
if (document.layers) 
   document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT); 

document.onmouseover=winstatus; 
document.onmouseout=winstatus; 
var info = null; 

function showInfo(url, e){ 
   info = document.getElementById('pictureview'); 
   if( url && info.style.visibility == 'hidden' ){ 
             info.style.left       = 0+'px'; 
             info.style.top        = 0+'px'; 
             info.style.visibility = 'visible'; 
             info.innerHTML        = '<img src="'+url+'">'; 
   } 
} 
function closeInfo(){
   if( info )
     info.style.visibility = 'hidden';
} 


function openSkinLoader() {
    closeIconUpload();
    closeHelp();
    closeSaveSkin();
    var skinloader = document.getElementById('skinloader'); 
    if(skinloader) {
    	skinloader.style.visibility = 'visible';
	}
}
function closeSkinLoader() {

	var skinLoader = document.getElementById('skinloader');
	if(skinLoader) {
	   skinLoader.style.visibility = 'hidden';
	}
}
function openIconUpload(e) {
	closeHelp();
	closeSkinLoader();
	closeSaveSkin();
    var iconupload = document.getElementById('iconupload'); 
	if(iconupload) {
	    iconupload.style.visibility = 'visible';
	}
}
function closeIconUpload() {

	var iconupload = document.getElementById('iconupload');
	if(iconupload) {
	    iconupload.style.visibility = 'hidden';
	}
	
}
function openSaveSkin(e) {
	closeHelp();
	closeSkinLoader();
	closeIconUpload();
    var saveForm = document.getElementById('saveForm'); 
	if(saveForm) {
	    saveForm.style.visibility = 'visible';
	}
}
function closeSaveSkin() {

	var saveForm = document.getElementById('saveForm');
	if(saveForm) {
	    saveForm.style.visibility = 'hidden';
	}
	
}
function openHelp() {
	closeIconUpload();
	closeSkinLoader();
	closeSaveSkin();
    var help = document.getElementById('help'); 
	if(help) {
        help.style.visibility = 'visible';
	}
}
function closeHelp() {
    var help = document.getElementById('help');
    if(help) {
        help.style.visibility = 'hidden';
	}
}
function showProgress(text) {
	
 	var winW = 200;
	var winH = 100;
	var winX = (window.innerWidth - winW) / 2;
    var winY = (window.innerHeight - winH) / 2;
    
	element= document.getElementById('uploading');
	element.style.visibility = 'visible';
	element.style.left = winX+'px';
	element.style.top = winY+'px';
	element.innerHTML = '<font size="5" color="white"><b>'+text+'</b></font>';
}
function showLogin(e) {
    var login = document.getElementById('loginForm'); 
	if(login) {
		login.style.visibility = 'visible';
		login.style.left=(e.pageX ? pageXOffset + e.clientX -250 : document.body.scrollLeft + e.x -250)+'px';
		login.style.top=30+'px'
	}
}
function closeLogin() {
    var login = document.getElementById('loginForm'); 
	if(login) {
		login.style.visibility = 'hidden';
	}

}
function closeError() {
    var error = document.getElementById('error'); 
	if(error) {
		error.style.visibility = 'hidden';
	}

}
function publicSkinSelected(data) {
    document.getElementById('skinControlLoad').disabled = false;
    document.getElementById('skinControlLoad').className = '';
    
    skins = document.getElementById('privateSkin');
	if(skins) {
	    var i = 0;
		while(i < skins.options.length) {
			skins.options[i].selected = false;	
			i++;
		}
	}
	
	if(data) {
		document.getElementById('skinControlActivate').disabled = false;
		document.getElementById('skinControlActivate').className = '';
		document.getElementById('skinControlDelete').disabled = true;
		document.getElementById('skinControlDelete').className = 'inactive';

	}
	image = document.getElementById('preview');
	if(image) {
		skins = document.getElementById('publicSkin');
		var imageId;
		if(skins) {
			var i = 0;
			while(i < skins.options.length) {
				if(skins.options[i].selected) {
					imageId = skins.options[i].value;
				}	
				i++;
			}
		}
			
		image.src = 'image?id=2304&skin='+imageId;
	}
}
function privateSkinSelected(data) {
    document.getElementById('skinControlLoad').disabled = false;
    document.getElementById('skinControlLoad').className = '';
    
    skins = document.getElementById('publicSkin');
	if(skins) {
	    var i = 0;
		while(i < skins.options.length) {
			skins.options[i].selected = false;	
			i++;
		}
	}
    
	if(data) {
		document.getElementById('skinControlDelete').disabled = false;
		document.getElementById('skinControlDelete').className = '';
		document.getElementById('skinControlActivate').disabled = false;
		document.getElementById('skinControlActivate').className='';
		

	}
	image = document.getElementById('preview');
	if(image) {
		skins = document.getElementById('privateSkin');
		var imageId;
		if(skins) {
	 		var i = 0;
			while(i < skins.options.length) {
				if(skins.options[i].selected) {
					imageId = skins.options[i].value;
				}	
				i++;
			}
		}
			
		image.src = 'image?id=2304&skin='+imageId;
	}
}
function changeButton(buttonid, added, imageid) {
	if(buttonid && added && imageid) {
	
	    document.getElementById(buttonid).src='image?id='+imageid+'&added='+added;
	}
	

}