var oneSixtyPXImage;
var oneSixtyImageCounter;
var oneSixtySubmitResult = 0;

preload('160px/pixel_0','160px/pixel_0');
preload('160px/pixel_0','160px/pixel_1');

function OneSixtyPXImage(parentElement) {
  var self = this; // reference to this object (for event handling)
  this.preloaded = 0; // flag for preloading pixel images
  this.o = parentElement;
  this.o160 = document.getElementById('oneSixtyImage');
  this.form = document.createElement('div');
  this.randomTitle = document.getElementById('oneSixtyRndTitle');
  this.buttons = [];
  this.buttonPath = '160px/'; // form button path
  this.borderLow = '#333333';
  this.borderLowOver = '#cc3333';
  this.borderHigh = '#000000';
  this.borderHighOver = '#cc3333';
  this.counter = 0;
  this.index = 1;
  this.indexMax = oneSixtyImageCounter || 800;

  this.doClear = function() {
    for (var i=0; i<self.o160Data.length; i++) {
      if (self.o160Data[i].status) {
        self.o160Data[i].status = 0;
        self.o160Data[i].style.border = '1px solid '+self.borderLow;
        self.o160Data[i].src = 'image/160px/pixel_'+self.o160Data[i].status+'.gif';
      }
    }
  }

  this.doSubmit = function() {
    var tmp = '';
    var counter = 0;
    var queryString = '';
    var hasSomething = 0;
    for (var i=0; i<5; i++) {
      for (var j=0; j<32; j++) {
        tmp +=''+self.o160Data[counter].status;
        if (!hasSomething) {
          if (self.o160Data[counter].status) {
            hasSomething = 1;
          }
        }
        counter++;
      }
      queryString += (i?'|':'')+parseInt(tmp,2).toString(16);
      tmp = '';
    }
    if (!hasSomething) {
      alert('Click on the individual pixels to "draw" something.');
      return false;
    }
/*
    if (!self.nameInput.value || self.nameInput.value == 'Your name') {
      alert('Don\'t forget to enter your name.');
      self.nameInput.focus();
      return false;
    }
*/
    self.url = 'http://www.schillmania.com/interactive/160px/160_px_submit.php?imgData=' + queryString + '&imgAuthor=Anonymous'; // '&imgAuthor='+escape(self.nameInput.value);
    self.bSubmit.o.style.visibility = 'hidden';
    self.status.innerHTML = 'Submitting...';
    // self.nameInput.blur();
    loadJS(self.url,self.submitComplete);
    return false;
  }

  this.getRandomIndex = function() {
    this.index = parseInt(Math.random()*800);
  }

  this.mouseover = function() {
    // window.status = mObj.button?mObj.button:'no button';
    if (mObj.button) self.mousedown();
    this.style.border = '1px solid '+(this.status?self.borderHighOver:self.borderLowOver);
    if (isIE) event.cancelBubble = true;
  }

  this.mouseout = function() {
    this.style.border = '1px solid '+(this.status?self.borderHigh:self.borderLow);
  }

  this.mousedown = function() {
    this.onmousemove = self.mouseout;
    this.status = (!this.status?1:0);
    // self.o160Data[this.index] = this.status;
    this.src = 'image/160px/pixel_'+this.status+'.gif';
    this.style.border = '1px solid '+(this.status?self.borderHigh:self.borderLow);
  }

  this.onmouseup = function() {
    this.onmousemove = null;
  }

  this.o160Data = [];

  this.imageOnLoad = function() {
    this.onload = null;
    self.preloaded++;
    if (self.preloaded>=2) self.createForm();
  }

  this.refresh = function() {
    (this.o160?this:self).o160.src = 'http://www.schillmania.com/interactive/160px/preview.php?index='+self.index;
    this.randomTitle.innerHTML = '&nbsp;- #'+this.index;
  }

  this.submitComplete = function() {
    if (oneSixtySubmitResult) {
     self.status.innerHTML = 'Submit succeeded';
     self.viewSpecific(++self.indexMax);
     self.doClear();
    } else {
     self.status.innerHTML = 'Submit failed';
    }
    setTimeout("oneSixtyPXImage.bSubmit.o.style.visibility = 'visible';",1000);
    setTimeout("oneSixtyPXImage.status.innerHTML = '&nbsp;';",2000);
    setTimeout("oneSixtyPXImage.status.innerHTML = oneSixtyPXImage.status.defaultText;",3000);
  }

  this.viewPrevious = function() {
    if ((--self.index)<1) self.index = self.indexMax;
    self.refresh();
  }

  this.viewRandom = function() {
    self.getRandomIndex();
    self.refresh();
  }

  this.viewSpecific = function(i) {
    self.index = i;
    self.refresh();
  }

  this.viewNext = function() {
    if ((++self.index)>self.indexMax) self.index = 1;
    self.refresh();
  }

  this.createForm = function() {
    this.bPrev = new Button(this.buttonPath,'prev','View previous image',this.viewPrevious);
    this.bRand = new Button(this.buttonPath,'random','Get a random image',this.viewRandom);
    this.bNext = new Button(this.buttonPath,'next','View next image',this.viewNext);
    this.bPrev.o.style.marginRight = this.bRand.o.style.marginRight = '4px';

    this.title = document.createElement('p');
    this.titleContent = document.createElement('h3');
    this.titleContent.innerHTML = 'CREATE AN IMAGE';
    this.title.appendChild(this.titleContent);

    this.container = document.createElement('div');
    this.container.className = 'oneSixtyPixelFormContainer';

    for (this.row=0; this.row<5; this.row++) {
      this.tmpRow = document.createElement('div');
      for (this.col=0; this.col<32; this.col++) {
        this.tmp = document.createElement('img');
        this.tmp.index = this.counter;
        this.tmp.onmouseover = this.mouseover;
        this.tmp.onmouseout = this.mouseout;
        this.tmp.onmousedown = this.mousedown;
        this.tmp.onmouseup = this.onmouseup;
        this.tmp.src = 'image/160px/pixel_0.gif';
        this.tmp.status = 0;
        this.tmp.className = 'oneSixtyPixelFormElement';
        this.tmp.style.width = '2px';
        this.tmp.style.height = '2px';
        this.tmp.style.border = '1px solid #333333';
        this.o160Data[this.counter] = this.tmp;
        this.tmpRow.appendChild(this.tmp);
        this.counter++;
      }
      this.tmpRow.style.lineHeight = '4px';
      this.tmpRow.style.height = '4px';
      this.container.appendChild(this.tmpRow);
    }
    if (!isIE) {
      var tmp = document.createElement('div');
      tmp.style.height = '5px';
      this.container.appendChild(tmp);
    }

    this.bClear = new Button(this.buttonPath,'clear','Wipe the image area',this.doClear);
    this.bClear.o.style.marginRight = '4px';
    this.bSubmit = new Button(this.buttonPath,'submit','Submit the image',this.doSubmit);

    this.status = document.createElement('div');
    this.status.className = 'ltGrey';
    this.status.defaultText = 'Click on the pixels to draw.';
    this.status.innerHTML = this.status.defaultText;

/*
    this.inputForm = document.createElement('form');
    this.inputForm.className = 'color2';
    this.inputForm.style.backgroundImage = 'none';
    this.inputForm.onsubmit = this.doSubmit;

    this.nameInput = document.createElement('input');
    this.nameInput.id = 'oneSixtyUserName';
    this.nameInput.title = 'Your name (displayed along with the image)';
    this.nameInput.value = 'Your name';
    this.nameInput.onfocus = function() {if (this.value=='Your name' || this.value.indexOf('Submit')+1){this.value='';}}
*/
    this.o.appendChild(this.bPrev.o);
    this.o.appendChild(this.bRand.o);
    this.o.appendChild(this.bNext.o);

    this.o.appendChild(this.title);
    this.o.appendChild(this.container);

//    this.inputForm.appendChild(this.nameInput);
//    this.o.appendChild(this.inputForm);

    this.o.appendChild(this.bClear.o);
    this.o.appendChild(this.bSubmit.o);

    this.o.appendChild(this.status);

  }

  this.preImg = [document.createElement('img'),document.createElement('img')];
  this.preImg[0].style.display = this.preImg[1].style.display = 'none';
  this.preImg[0].onload = this.preImg[1].onload = this.imageOnLoad;
  this.preImg[0].src = 'image/160px/pixel_0.gif';
  this.preImg[1].src = 'image/160px/pixel_1.gif';

  document.body.appendChild(this.preImg[0]);
  document.body.appendChild(this.preImg[1]);

  this.viewSpecific(this.indexMax);
  if (this.o.reflow) this.o.reflow();
}