/* 
  designer.js
  ===========
  depends on: openDom.js
  
  js object to allow browser based customization
    
*/
var myDom = new openDom();

function newImage(img)
{
  rt = new Image();
  rt.src = "/images/" + img.toString();
  return rt;	   
}

function design(id, no, pattern, rW, rH, pW, pH, t1X, t1Y, t2X, t2Y)
{  
  this.id = new String(id);
  this.designNo = new String(no);

  this.patternImage= newImage(pattern);
  this.realWidth = new Number(rW);  // in inches
  this.realHeight = new Number(rH); // in inches
  this.pxHeight = new Number(pH);   // in pixels
  this.pxWidth = new Number(pW);    // in pixels
  this.textMarginLeft = new Number(t1X); // in pixels
  this.textMarginTop = new Number(t1Y);  // in pixels
  this.textHeight = new Number(t2Y-t1Y); // in pixels
  this.textWidth = new Number(t2X-t1X);  // in pixels

  // conversions from/to pixel to real space / points 
  this.pointsToPixels = design_pointsToPixels;
  this.pixelsToPoints = design_pixelsToPoints;
  this.inchesToPixels = design_inchesToPixels; 
  this.pixelsToInches = design_pixelsToInches; 

}
function design_inchesToPixels(inches)
{
  // height or width work, for best res. get largest (ratios should be the same)
  var iMax=this.realWidth>this.realHeight?this.realWidth:this.realHeight;
  var pMax=this.pxWidth<this.pxHeight?this.pxWidth:this.pxHeight;
  var cv = new Number(pMax);
  cv *= inches; 
  cv /= iMax;
  return cv;
}
function design_pixelsToInches(pixels)
{
  // height or width work, for best res. get largest
  var iMax=this.realWidth>this.realHeight?this.realWidth:this.realHeight;
  var pMax=this.pxWidth<this.pxHeight?this.pxWidth:this.pxHeight;
  var cv = new Number(iMax);
  cv *= pixels;
  cv /= pMax;
  return cv;
}
function design_pointsToPixels(points)
{
  var cv = new Number(points);
  cv /= 72.0; // inches
  return this.inchesToPixels(cv);
}
function design_pixelsToPoints(pixels)
{
  var cv = new Number(this.pixelsToInches(pixels));  
  cv *= 72.0; // points per inch
  return cv;
}
function designColor(rgb,img,name)
{
  this.name = new String(name);
  this.rgb = new String(rgb);
  this.img = newImage(img);
}
function designFont( name, family )
{
  this.name = new String(name);
  this.family = new String(family);
}
function fontSize( pixels, points )
{
  this.points=Math.round(points);
  this.pixels=Math.round(pixels);
}
function designer(lines)
{
  this.extraParams = new Array();
  
  this.designs = new Array();
  this.currentDesign=null;
  this.currentBackground=null;
  this.currentColor=null;
  this.currentFont=null;
  this.currentFontSize = null; 
  
  this.backgrounds = new Array();
  this.fonts = new Array();
  this.colors = new Array();
  this.fontSizes = new Array();    
  this.linesText = new Number(lines);
  
  this.addParameter = designer_addParameter;
  
  this.addDesign = designer_addDesign;
  this.addBackground = designer_addBackground;
  this.addColor = designer_addColor;
  this.addFont = designer_addFont;
  this.addFontSize = designer_addFontSize;
  
  this.fontSizeChanged = designer_fontSizeChanged;
  this.textChanged = designer_textChanged; 
  this.fontChanged = designer_fontChanged;  
  this.backgroundChanged = designer_backgroundChanged;
  this.colorChanged = designer_colorChanged;
  this.sync = designer_sync;
     
  this.fontOptions = designer_fontOptions;  
  this.fontSizeOptions = designer_fontSizeOptions;  
  this.backgroundOptions = designer_backgroundOptions;
  this.colorOptions = designer_colorOptions;
  this.textOptions = designer_textOptions;
  this.designOptions = designer_designOptions;
  this.setDefaults = designer_setDefaults;
  this.setProof = designer_setProof;
}
function designer_addParameter( key, val )
{
  this.extraParams[key]=val;
}
function designer_sync()
{
  this.textChanged();
  this.fontChanged(myDom.getElementById("font"));
  this.fontSizeChanged(myDom.getElementById("fontsize"));
  this.backgroundChanged(myDom.getElementById("background"));
}

function designer_addFontSize( pixels, points ) 
{
  var fz = new fontSize( pixels, points );
  this.fontSizes[fz.points.toString()]=fz;
  if( this.currentFontSize==null) this.currentFontSize = fz;
}
function designer_addDesign(id, no,pattern,rW,rH,pW,pH,t1X,t1Y,t2X,t2Y)
{
  var dsgn = new design(id, no,pattern,rW,rH,pW,pH,t1X,t1Y,t2X,t2Y);
  this.designs[id]=dsgn;
  if(this.currentDesign==null) this.currentDesign = dsgn;
}
function designer_addBackground(rgb,img,name)
{
  var bckgrnd = new designColor(rgb,img,name);
  this.backgrounds[name]=bckgrnd;
  if(this.currentBackground==null) this.currentBackground=bckgrnd;
}
function designer_addColor(rgb,img,name)
{
  var clr = new designColor(rgb,img,name);
  this.colors[name]=clr;
  if(this.currentColor==null) this.currentColor=clr;
}
function designer_addFont(name, family)
{
  var fnt = new designFont( name, family );
  this.fonts[name]=fnt;
  if(this.currentFont==null) this.currentFont=fnt;
}

function designer_fontSizeChanged(ctrl)
{
  if(ctrl)
  {
    var value=ctrl.value;
    this.currentFontSize = this.fontSizes[value];
    myDom.getElementById( "designtextbox" ).style.fontSize=this.currentFontSize.pixels.toString()+"px";
  }  
}
function designer_backgroundChanged(ctrl)
{
  if(ctrl)
  {
    var value=ctrl.value;
    var bgImage="url("+this.backgrounds[value].img.src+")";
    myDom.getElementById( "designbackground" ).style.backgroundImage=bgImage;
  }  
}
function designer_colorChanged(ctrl)
{
  if(ctrl)
  {
    var value=ctrl.value;
    this.currentColor = this.colors[value];  
    myDom.getElementById( "designtextbox" ).style.color="#"+this.currentColor.rgb.toString();
  }
}
function designer_fontChanged(ctrl)
{
  if(ctrl)
  {
    var value=ctrl.value;
    var family=this.fonts[value].family;
    myDom.getElementById( "designtextbox" ).style.fontFamily=family;
  }  
}
function designer_textChanged()
{
  var newText = new String("");
  for( var i=1; i<=this.linesText; i++)
  {
    var lineId = "line" + i.toString();
    var ctrl = myDom.getElementById(lineId)
    if(ctrl)
    {
      var test = ctrl.value;
      if ( test.length ) newText += test + "<br \>\n";      
    }
  }
  var tbox = myDom.getElementById("designtextbox");
  if( tbox )
  {
    tbox.innerHTML = newText;
  }
}
function designer_textOptions()
{
  for( var i=1; i<= this.linesText; i++ )
  {
    document.write("<div class='label'>Line " +i.toString() + "</div>");
    document.write("<input id='line" + i.toString() + "' type='text' maxlength='50' name='line" + 
                  i.toString() + "' onkeyup='myDesigner.textChanged()' size='15' ");
    if( i==1 )  document.write("value='' ");
    document.write("/><br class='all' />");
  } 
}
function designer_fontOptions()
{
  document.write("<div class='label'>Font</div>");
  document.write("<select id='font' onchange='myDesigner.fontChanged(this)' name='font'>");
  for( var i in this.fonts )
  {
    document.write("<option value='" +i + "'>" + i + "</option>" );
  }
  document.write("</select></div>"); 
}
function designer_fontSizeOptions()
{
  document.write("<div class='label'>Font Size</div>");
  document.write("<select id='fontsize' onchange='myDesigner.fontSizeChanged(this)' name='fontsize'>");
  for( var i in this.fontSizes )
  {
    document.write("<option value='" +i + "'>" + i + " pt</option>" );
  }
  document.write("</select></div>");
}

function designer_backgroundOptions()
{
  document.write("<div class='label'>Background</div>");
  document.write("<select id='background' onchange='myDesigner.backgroundChanged(this)' name='background'>");
  for( var i in this.backgrounds )
  {
    document.write("<option value='" + i + "'>" + i + "</option>" );
  }
  document.write("</select></div>"); 
}
function designer_colorOptions()
{
  document.write("<div class='label'>Text Color</div>");
  document.write("<select id='textcolor' onchange='myDesigner.colorChanged(this)' name='textcolor'>");
  for( var i in this.colors )
  {
    document.write("<option value='" + i + "'>" + i + "</option>" );
  }
  document.write("</select></div>"); 
}
function designer_designOptions()
{
  document.write("<input type='hidden' name='id' value='" + this.currentDesign.id + "'>" );
  for( var key in this.extraParams )
  {    
    document.write("<input type='hidden' name='" + key +"' value='" + this.extraParams[key] + "'>" );  
  }  
}
function designer_setDefaults()
{  
  // figure fontSize between 4inches (72x4) inch+ and 1/2 the text height    
  var fontSize = new Number( 288 );   
  var nowSize = fontSize;
  for( var i=5; this.currentDesign.pointsToPixels(nowSize) < (this.currentDesign.textHeight/2); i++)
  {  
    this.addFontSize(this.currentDesign.pointsToPixels(nowSize),nowSize);
    nowSize = fontSize * i/4;
  }  
  myDom.setStylesheetStyle("#designbackground","backgroundImage","url("+this.currentBackground.img.src+")");
  myDom.setStylesheetStyle("#designpattern","backgroundImage","url("+this.currentDesign.patternImage.src+")");
  myDom.setStylesheetStyle("#designpattern","width",this.currentDesign.pxWidth.toString()+"px");
  myDom.setStylesheetStyle("#designpattern","height",this.currentDesign.pxHeight.toString()+"px");
  myDom.setStylesheetStyle("#designtextregion","margin",this.currentDesign.textMarginTop.toString()+"px 0px 0px "+this.currentDesign.textMarginLeft.toString()+"px");
  myDom.setStylesheetStyle("#designtextregion","height",this.currentDesign.textHeight.toString()+"px");
  myDom.setStylesheetStyle("#designtextregion","width",this.currentDesign.textWidth.toString()+"px");
  myDom.setStylesheetStyle("#designtextbox","fontFamily",this.currentFont.family);
  myDom.setStylesheetStyle("#designtextbox","color","#"+this.currentColor.rgb.toString());
  myDom.setStylesheetStyle("#designtextbox","fontSize",this.currentFontSize.pixels+"px");
}
function designer_setProof( selectedFontSize )
{ 
  this.addFontSize(this.currentDesign.pointsToPixels(selectedFontSize),selectedFontSize);

  myDom.setStylesheetStyle("#designbackground","backgroundImage","url("+this.currentBackground.img.src+")");
  myDom.setStylesheetStyle("#designpattern","backgroundImage","url("+this.currentDesign.patternImage.src+")");
  myDom.setStylesheetStyle("#designpattern","width",this.currentDesign.pxWidth.toString()+"px");
  myDom.setStylesheetStyle("#designpattern","height",this.currentDesign.pxHeight.toString()+"px");
  myDom.setStylesheetStyle("#designtextregion","margin",this.currentDesign.textMarginTop.toString()+"px 0px 0px "+this.currentDesign.textMarginLeft.toString()+"px");
  myDom.setStylesheetStyle("#designtextregion","height",this.currentDesign.textHeight.toString()+"px");
  myDom.setStylesheetStyle("#designtextregion","width",this.currentDesign.textWidth.toString()+"px");
  myDom.setStylesheetStyle("#designtextbox","fontFamily",this.currentFont.family);
  myDom.setStylesheetStyle("#designtextbox","color","#"+this.currentColor.rgb.toString());
  myDom.setStylesheetStyle("#designtextbox","fontSize",this.currentFontSize.pixels+"px");
}