function $(id){return document.getElementById(id);}

function nav(){


}


var ajax = { 

    postRequest: function(url, vars, values, handler) {
        var params = this.paras(vars,values);
        xmlhttp = this.getxmlhttpObj();
        url = url+"?"+this.paras(vars,values);
        xmlhttp.open("POST", url, true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.setRequestHeader("Content-length", params.length);
        xmlhttp.setRequestHeader("Connection", "close");   
        _this = this;
        _handler = handler.bind(this);
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var data = xmlhttp.responseText;
                    if(data != null)                   
                    
                    _handler(data);
                    
            }
        }

        xmlhttp.send(params);    
     },
 
    getRequest: function(url, vars, values, handler) {
        xmlhttp = this.getxmlhttpObj();
        url = url+"?"+this.paras(vars,values);
        xmlhttp.open("GET", url,true);
        
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var data = xmlhttp.responseText;
                    if(data != null) 
                    handler(data);
            }
        }
        
        xmlhttp.send(null);
    },

    paras: function(vars, values) {
    var par = vars[0]+"="+values[0];
    for(i=1;i<vars.length;i++)  {
          par += "&"+vars[i]+"="+values[i];
    }
    return par;
    },

    getxmlhttpObj: function (){
    return (window.XMLHttpRequest) ? new XMLHttpRequest() : ((window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : null);

    }

}


function getstyle(elem, prop) {
		if(document.defaultView){
			return document.defaultView.getComputedStyle(elem, null).getPropertyValue(prop);
		}
		else if(elem.currentStyle){
			var prop = prop.replace(/-(\w)/gi, function($0,$1) {
				return $1.toUpperCase();
			});
			return elem.currentStyle[prop];
		}
		else return null;
	}
	
Function.prototype.bind = function(obj) {	
    var _method = this;
    return function() {
        return _method.apply(obj, arguments);
    };    
} 	



function validateinput(){

var start_colour = $("start_color").value.trim().replace("#","");
var myArray = start_colour.match(/^([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/g)

if ( myArray == null) {
$("alertstart").innerHTML = "* invalid color";
return false;
}

var end_colour = $("end_color").value.trim().replace("#","");
var myArray = end_colour.match(/^([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/g)

if ( myArray == null) {
$("alertend").innerHTML = "* invalid color";

return false;
}


var height =  $("height").value.trim();
if (isNaN(height)) {
$("alertheight").innerHTML = "* number ";
return false;
}
else if(height>600) {
$("alertheight").innerHTML = " < 600px ";


return false;
}

return true;
}

function getstyle(elem, prop) {
		if(document.defaultView)
		{
			return document.defaultView.getComputedStyle(elem, null).getPropertyValue(prop);
		}
		else if(elem.currentStyle)
		{
			var prop = prop.replace(/-(\w)/gi, function($0,$1)
			{
				//return $0.charAt($0.length - 1).toUpperCase();
				return $1.toUpperCase();
			});
			return elem.currentStyle[prop];
		}
		else return null;
	}

function addheights(){

var url = "grad_start.php";

$("status").style.display = "block";
var p =1;

ajax.getRequest(url,["p"],[p], display);

 function display(aa) {

       $("status").style.display = "none";
      var hs = eval(aa);
     for (i=0;i<hs.length;i++) {
         if (hs[i]!=0) {
          var tsga = document.createElement("a");
          tsga.href = "javascript:nav()";
          var txt = document.createTextNode(hs[i]+" ");
          addEvent(tsga,"click",loadimage);

          tsga.appendChild(txt);
          $("navheight").appendChild(tsga);
         }
       
       }
      
 }      
       
}


var ldheight, imgst,imged, hsall;
function loadimage(e){

e = (e) ? e : ((window.event) ? window.event : "");

var o = getTargetElement(e);

loadimgs(parseInt(o.innerHTML));

}

function more(){

 imgst = imged;
 if (imged+24<hsall.length) {
 imged = imged+24;
 }
 else
 {
 
 imged = hsall.length;
  $("more").style.display ="none";
 }
 
 for (i=imgst;i<imged;i++) {
 
           var div = document.createElement('div');
           div.style.width = "40px";
           div.style.height = ldheight+"px";
           div.style.backgroundImage = "url(image/"+hsall[i]+".gif)";
           
           div.style.backgroundRepeat = "repeat-x";
           addEvent(div,"click",detailimage);
           $("imgs").appendChild(div);
   }

}


function loadimgs(height){

var url = "grad_load.php";

//$("status").style.display = "block";
ldheight = height;
ajax.getRequest(url,["height"],[height], display);

 function display(aa) {

       $("status").style.display = "none"; 
      
       var hs = eval(aa);
     
       hsall = hs;
       if (hs.length>24) {
         imgst =0;
         imged = 24;
        $("more").style.display ="block";
       }else{
        imgst =0;
        imged = hs.length;
        $("more").style.display ="none";
       }
       
       
       $("imgs").innerHTML = "";
       for (i=imgst;i<imged;i++) {
           var div = document.createElement('div');
           div.style.width = "40px";
           div.style.height = height+"px";
          
           div.style.backgroundImage = "url(image/"+hs[i]+".gif)";
           div.style.backgroundRepeat = "repeat-x";
           addEvent(div,"click",detailimage);
           $("imgs").appendChild(div);
       }
       
 }    
 
}


 function detail(e){

 e = (e) ? e : ((window.event) ? window.event : "");
 var o = getTargetElement(e);
 var url = getstyle(o,"background-image");
var re = new RegExp("\/([\\w\\d]+)\\.gif", "");

var myArray = re.exec(url);
var nm = myArray[1];
var cl = parsename(nm);

 var div = document.createElement("div");
        div.style.width ="96%";
        div.style.margin = "0 auto";
        div.style.backgroundImage ="none";
        div.style.backgroundImage = "url(image/"+nm+".gif)";
        div.style.backgroundRepeat = "repeat-x";
        div.style.height = cl[2]+"px";
         if ($("demo").childNodes.length!=0) {
          $("demo").firstChild.style.height = "40px";
          $("demo").firstChild.style.width = "40px";
       
          $("recent").appendChild($("demo").firstChild);
         addEvent($("recent").lastChild,"click",detailimage)
         
        }
     
        $("demo").appendChild(div);
        
        var div = document.createElement("div");
        div.style.height = cl[2]+"px";
        div.appendChild(adddis(cl[0]));
        div.appendChild(adddis(cl[1]));
        
        var taga = document.createElement("a");
         taga.href = "image/"+nm+".gif";
         var txt = document.createTextNode(" download");
         taga.appendChild(txt);
         
         div.appendChild(taga);
        
        $("dis").innerHTML ="";
        $("dis").appendChild(div);
  
 }

 function detailimage(e){

 e = (e) ? e : ((window.event) ? window.event : "");
 var o = getTargetElement(e);
 var url = getstyle(o,"background-image");
var re = new RegExp("\/([\\w\\d]+)\\.gif", "");

var myArray = re.exec(url);
var nm = myArray[1];
var cl = parsename(nm);

 var div = document.createElement("div");
        div.style.width ="96%";
        div.style.margin = "0 auto";
        div.style.backgroundImage ="none";
        div.style.backgroundImage = "url(image/"+nm+".gif)";
        div.style.backgroundRepeat = "repeat-x";
        div.style.height = cl[2]+"px";
         if ($("demo").childNodes.length!=0) {
          $("demo").firstChild.style.height = "40px";
          $("demo").firstChild.style.width = "40px";
       
          $("recent").appendChild($("demo").firstChild);
         addEvent($("recent").lastChild,"click",detail)
         
        }
     
        $("demo").appendChild(div);
        
        var div = document.createElement("div");
        div.style.height = cl[2]+"px";
        div.appendChild(adddis(cl[0]));
        div.appendChild(adddis(cl[1]));
        
         var taga = document.createElement("a");
         
         taga.href = "image/"+nm+".gif";
         var txt = document.createTextNode(" download");
         taga.appendChild(txt);
         
         div.appendChild(taga);
        
        
        $("dis").innerHTML ="";
        $("dis").appendChild(div);
  
 }

function parsename(nm){
var re = [];
var a = nm.substring(1,7);
re.push(a);
var b = nm.substring(8,14);
re.push(b);
var h =nm.match(/\d+$/);
re.push(h[0]);
return re;
}

function getimg(){
var ary2 =[];
var vali = validateinput();
if (vali==false) {
return;
}

$("alertstart").innerHTML ="";
$("alertend").innerHTML = "";
$("alertheight").innerHTML ="";

var start_colour = $("start_color").value.trim().replace("#","");
var end_colour = $("end_color").value.trim().replace("#","");
var height =  $("height").value.trim();
var width =  1;

$("status").style.display = "block";
ajax.getRequest("grad.php",["start_colour","end_colour","height","width"], [start_colour,end_colour,height,width], display);

 function display(a) {
      
       $("status").style.display = "none";  
       
        var div = document.createElement("div");
        div.style.width ="96%";
        div.style.margin = "0 auto";
        div.style.backgroundImage ="none";
        div.style.backgroundImage = "url(image/"+a+")";
        
        div.style.backgroundRepeat = "repeat-x";
        
        div.style.height = height+"px";
        
         if ($("demo").childNodes.length!=0) {
          $("demo").firstChild.style.height = "40px";
          $("demo").firstChild.style.width = "40px";
       
          $("recent").appendChild($("demo").firstChild);
          addEvent($("recent").lastChild,"click",detail)
         
        }
     
        $("demo").appendChild(div);
        
         var div = document.createElement("div");
         div.style.height = height+"px";
         div.appendChild(adddis(start_colour));
         div.appendChild(adddis(end_colour));
         
         var taga = document.createElement("a");
         taga.href = "image/"+a;
         var txt = document.createTextNode(" download");
         taga.appendChild(txt);
         
         div.appendChild(taga);
 
         $("dis").innerHTML ="";
         $("dis").appendChild(div);
 }      
       
}

function clearall(){
$("demo").innerHTML ="";
$("recent").innerHTML ="";
$("dis").innerHTML ="";

}

function adddis(color){
 var div_st = document.createElement("span");
 div_st.style.color = "#"+color;
 div_st.style.fontWeight = "bold";
 var txt = document.createTextNode("#"+color+"  ");
 div_st.appendChild(txt);
  return div_st;
}

function getTargetElement(e) {
   return (e.target) ? ((e.target.nodeType == 3) ? e.target.parentNode : e.target) : e.srcElement;
}

function addEvent ( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj["e"+type+fn] = fn;
    obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
    obj.attachEvent( "on"+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}
	
function removeEvent ( obj, type, fn ) {
      if ( obj.detachEvent ) {
        obj.detachEvent( "on"+type, obj[type+fn] );
		    obj[type+fn] = null;
      } else
        obj.removeEventListener( type, fn, false );
}

String.prototype.trim = function() {
    return this.replace(/^\s*|\s*$/, "");
}

function socialbkmk() {
var u = location.href;
var t = document.title;
location.href = 'http://www.pagecolumn.com/social_bookmark2.htm?pgcoluu='+u+'&pgcoltt='+t;
}