function sa1_show() {
  $(this).hide().siblings( ".selection-area" ).show('slow', function() { $(this).find("a.selected").each(function(){this.focus()}) });
}

function uselect_item_click( sa ) {	
  var sel_area = $(this).parents(".selection-area");
  $(this.select_obj).val( $(this.twin).val() );
  sel_area.find(".selected").removeClass( "selected" );
  $(this).addClass( "selected" );
  sel_area.hide('slow', function() {$(this).siblings(".sel-disp").html( $(this).find(".selected").html() ).fadeIn()});
  $(this.select_obj).change();
}

function uselect_init() {
  var tr = $("<tr></tr>").append( $("option",this).map( option_to_div ) );
  var sa_div = $("<div class='selection-area'></div>").append( $("<table></table").append( tr ) );
  $(this).hide().after(sa_div);
  var sel_disp = $("<a href='javascript:void(0)' class='opt_wrap'></a>");
  sel_disp.html( sa_div.find( ".selected" ).html() );
  sel_disp.addClass( "sel-disp" );
  sel_disp.click( sa1_show );
  sa_div.find( ".opt_wrap" ).each( function () {
    var sel_area = $(this).parents( ".selection-area" );
    if( sel_area.height() < $(this).height() + 35 ) // 35 is scroll bar height {shrug}
      sel_area.height( $(this).height() + 35 ); });
  sa_div.hide().after( sel_disp );
}

function option_to_div( index, elem ) {
  var new_opt = $("<div class='dyn_opt'></div>").attr( "style", $(this).attr( "style" ) );
  var new_div = $("<a href='javascript:void(0)' class='opt_wrap'></a>").append( new_opt );
  var new_td = $("<td></td>").append( new_div );
  $("<p>" + $(this).html() + "</p>").appendTo( new_div );
  if( $(this).is(":selected") )
    new_div.toggleClass( "selected" );
  new_div.get(0).twin = $(this).get(0);
  new_div.get(0).select_obj = $(this).parent().get(0);
  new_div.click( uselect_item_click );
  return( new_td.get(0) );
}

function ready_for_paper() {
  if($(this).val() != 'default') {
    $("#paper_step").show( 1000, function(){jQuery.scrollTo( $('#paper_step'), {speed:2500} );});
  }
}

function show_paper_preview() {
  var width_txt = $("#paper_width_txt").val();
  var height_txt = $("#paper_height_txt").val();
  var area = $("#paper_preview_area");
  var preview = $("#paper_preview");
  
  if( width_txt && width_txt != "" ) {
    width_txt = width_txt + $("#paper_width_unit").val();
    preview.html( "" ).css( "background", "none" );
  } else {
    preview.html( "" ).css( "background", "white" );
    return;
  }
  if( height_txt && height_txt != "" ) {
    height_txt = height_txt + $("#paper_height_unit").val();
    preview.html( "" ).css( "background", "none" );
  } else {
    preview.html( "" ).css( "background", "white" );
    return;
  }
  preview.css({ position:"relative", width:width_txt, height:height_txt });
  preview.width(preview.width()*0.04).height(preview.height()*0.04 );
  preview.css( "left", (area.width() - preview.width())*0.5+"px" );
  preview.css( "top", (area.height() - preview.height())*0.5+"px" );
  if( preview.width() > 20 && preview.height() > 20 ) {
    var div1 = $("<div></div>").css({background:"white",borderTop:"solid black 1px",borderLeft:"solid black 1px",
					position:"absolute",top:'0',left:'0',height:'16px',right:'16px'});
    preview.html( "<img src='dog_ear.png' style='position:absolute;height:16px;width:16px;top:0px;right:0px;' />" );
    preview.append( div1 );
    var div2 = $("<div></div>").css({background:"white",borderRight:"solid black 1px",borderLeft:"solid black 1px",borderBottom:"solid black 1px",
					position:"absolute",top:'16px',left:'0',bottom:'0',right:'0'});
    preview.append( div2 );
  } else {
    preview.html( "" ).css( "background", "white" );
  }
}

function bg_by_pt( pt ) {
  var i, len, ptlen, ptnslen, pmslen;
  var match_i = -1;
  var ptns;
  
  if( !pt || pt == "" )
    return( "none" );
  
  pt = $.trim(pt).toUpperCase().replace(/PMS/g,"PANTONE").replace(/([0-9 \t])C$/,"$1PC").replace(/([0-9] \t])U$/,"$1UP").replace(/(PRO|PROC|PROCESS)\.?[ \t]/,"PRO. ");
  orig_pt = pt;
  if( pt.substr(0,7) != "PANTONE" )
    pt = "PANTONE " + pt;
  ptns = pt.replace(/ /g,"");
  
  ptlen = pt.length;
  ptnslen = ptns.length;
  
  len = ptdb.length;
  for( i = 0; i < len; i++ ) {
    if( i in ptdb ) {
      if( ptdb[i].pan.substr( 0, ptlen ).toUpperCase() == pt ||
	  ptdb[i].pan.replace(/ /g,"").substr( 0, ptnslen ).toUpperCase() == ptns )
	match_i = i;
    }
  }

  if( match_i >= 0 )
    return( ptdb[match_i].rgb );
  else
    return( orig_pt );
}

var ways_to_say_4cp = ["FULL","FULL COLOR","PROCESS","PRO","PRO.","PROC","PROC.","4CP","4 CP","FOUR COLOR PROCESS","FOUR COL PRO","FOUR COL. PRO.","4 COL PRO"];

function show_color_preview() {
  var area = $("#color_preview_area");
  var preview;
  var colors = $(this).val().split(",");
  var i, len;
  var total_width = 0;
  
  if( $(this).is(".front_side") ) {
    preview = $("#front_color_preview");
    if( !preview.length ) {
      preview = $("<div id='front_color_preview'></div>");
      area.prepend( preview );
    }
  } else {
    preview = $("#back_color_preview");
    if( !preview.length ) {
      preview = $("<div id='back_color_preview'></div>");
      area.append( preview );
    }
  }
  preview.html("");
  len = colors.length;
  for( i = 0; i < len; i++ ) {
    if( i in colors && colors[i] != "" ) {
      if( $.inArray( $.trim(colors[i]).toUpperCase(), ways_to_say_4cp ) >= 0 )
	chip = $("<div class='color_chip'></div>").css("background","url('rainbow.jpg') 100% 100%");
      else
	chip = $("<div class='color_chip'></div>").css("background-color",bg_by_pt(colors[i]) );
      preview.append( chip );
      total_width += chip.width();
    }
  }
  preview.width( total_width );
}


function select_closest_pan( ) {
  var rgb_txt, red, green, blue, r, g, b, delta;
  var i, len;
  var delta, min_delta = 0xffffff, min_delta_i = 0;
  
  rgb_txt = $(this).val();
  red = Number("0x"+rgb_txt.substr(1,2));
  green = Number("0x"+rgb_txt.substr(3,2));
  blue = Number("0x"+rgb_txt.substr(5,2));
  len = ptdb.length;
  for( i = 0; i < len; i++ ) {
    r = Number("0x"+ptdb[i].rgb.substr(1,2));
    g = Number("0x"+ptdb[i].rgb.substr(3,2));
    b = Number("0x"+ptdb[i].rgb.substr(5,2));
    
    delta = Math.abs(r - red) + Math.abs(g - green) + Math.abs(b - blue);
    if( delta < min_delta ) {
      min_delta = delta;
      min_delta_i = i;
    }
  }
  r = Number("0x"+ptdb[min_delta_i].rgb.substr(1,2));
  g = Number("0x"+ptdb[min_delta_i].rgb.substr(3,2));
  b = Number("0x"+ptdb[min_delta_i].rgb.substr(5,2));
  $("#pan_color_sel").val( ptdb[min_delta_i].pan );
}

function add_color(fld,sel) {
  fld.val( fld.val() + (fld.val().length > 0 ? ", ":"") + sel.val().replace(/PANTONE/,"PMS").replace(/ PC$/,"C").replace(/ UP$/,"U") );
  fld.change();
}

function display_color_in_chooser() {
  var fld = $("#colpck_txt");
  fld.val( bg_by_pt($(this).val()) );
  fld.keyup();
}

function color_dlg_add_btn( txt, sel ) {
  add_color( $("#colors_"+txt+"_txt"), sel );
  $(this).parent().parent().dialogClose();
}

function color_dlg_full_color( txt ) {
  var fld = $("#colors_"+txt+"_txt");
  fld.val( fld.val() + (fld.val().length > 0 ? ", ":"") + "full" );
  fld.change();
  $(this).parent().parent().dialogClose();
}

function show_add_color() {
  var dlg = $("<div id='colpck_dlg' class='flora'></div>").attr("title","Choose Color");
  $(this).blur();
  var colpck = $("<div id='colpck'></div>");
  var colpck_txt = $("<input type='text' id='colpck_txt' value='#000000' style='width:195px' />");
  var span_for_ie = $("<span class='ie_is_useless'></span>");
  var div = $("<div style='width:50%;float:left'></div>");
  var pms_select = $("<select id='pan_color_sel' size='10' style='width:180px;height:190px'></select>");
  var offsets = $("#color_step").offset();
  var i, len;
  
  if( $(this).is(".front_side") )
    dlg.dialog({ width: 450, height: 300, draggable: true, position:'center',
		 buttons: { 'Full Color': function() {color_dlg_full_color("front")},
		     'Add': function() { color_dlg_add_btn.call(this,"front",pms_select); } } });
  else
    dlg.dialog({ width: 450, height: 300, draggable: true, position:'center',
		 buttons: { 'Full Color': function() {color_dlg_full_color("back")},
		     'Add': function() { color_dlg_add_btn.call(this,"back",pms_select); } } });
  dlg.append( div );
  div.append( span_for_ie );
  span_for_ie.append( colpck_txt );
  div.append( colpck );
  colpck.farbtastic("#colpck_txt");
  div = $("<div style='width:50%;float:right;'></div>");
  dlg.append( div );
  div.append( pms_select );

  len = ptdb.length;
  for( i = 0; i < len; i++ )
    pms_select.append( "<option style='background:"+ptdb[i].rgb+"'>"+ptdb[i].pan+"</option>" );
  pms_select.val( "PANTONE Black PC" );
  colpck_txt.change( select_closest_pan );
  pms_select.change( display_color_in_chooser );
  dlg.parents(".ui-dialog").css( "top", offsets.top - 100 );
}

function color_selection_init() {
  $(this).siblings("input:button").show().click( show_add_color );
  show_color_preview.call(this);
}


var fp_step = 0;

function step_set_visibility() {
  if( fp_step > 0 && $("#general_step").is(":hidden") )
    $("#general_step").show();
  if( fp_step > 1 && $("#paper_step").is(":hidden") )
    $("#paper_step").show();
  if( fp_step > 2 ) {
    $("#more_btn").hide();
    $("#submit_btn").val("Submit");
    if( $("#color_step").is(":hidden") )
      $("#color_step").show();
  }
  if( fp_step < 3 && $("#color_step").is(":visible") )
    $("#color_step").hide();
  if( fp_step < 2 && $("#paper_step").is(":visible") )
    $("#paper_step").hide();
  if( fp_step < 1 ) {
    $("#more_btn").val( "Specify Job" );
    $("#submit_btn").val( "Contact Instead" );
    if( $("#general_step").is(":visible") )
      $("#general_step").hide();
  }
  if( fp_step > 0 && fp_step < 3 ) { // 3 is max right now
    $("#more_btn").val( "More Specific" );
    $("#submit_btn").val( "Submit As Is" );
  }
}

function more_handler() {
  fp_step++;
  
  step_set_visibility();
}
function comment_handler() {
  $("#comment_area").show();
}
function submit_handler() {
  var ctn = $("#contact_name"), cto = $("#organization"), ctd = $("#contact_data");
  
  if( !((ctn.val() && ctn.val() != "") && (ctd.val() && ctd.val() != "")) ) {
    var msg = $("#message_area");
    msg.html( "<p>Please enter a contact name and a contact method to continue.</p>" );
    msg.css( "background-color", "rgb(255,0,0)" ).show();
    msg.animate( {backgroundColor:'rgb(240,210,160)'}, 2000 );
    return( false );
  }
  
  return( true );
}

function step_init() {
  var form = $("form");
  var jbn = $("#job_name"), qts = $("#quantities"), jts = $("#job_type_sel");
  var pwt = $("#paper_width_txt"), pht = $("#paper_height_txt"), pnp = $("#num_paper");
  var cft = $("#colors_front_txt"), cbt = $("#colors_back_txt");
  var com = $("#comment_txt");
  var step_min = 0;
  
  $("#more_btn").show().click( more_handler );
  $("#comment_btn").show().click( comment_handler );
  $("#zform").submit( submit_handler );

  // determine state on partial reload
  if( (cft.val() && cft.val() != "") || (cbt.val() && cbt.val() != "") ) {
    step_min = 3;
  } else if( (pwt.val() && pwt.val() != "") || (pht.val() && pht.val() != "") ) {
    step_min = 2;
  } else if( (jbn.val() && jbn.val() != "") || (qts.val() && qts.val() != "") || jts.val() != "default" ) {
    step_min = 1;
  } else {
    step_min = 0;
  }
  if( fp_step < step_min )
    fp_step = step_min;
  
  if( com.val() && com.val() != "" )
    comment_handler();
  
  step_set_visibility();
}

function step_change() {
  
}

function fp_init() {
  $("#comment_area").hide();
  $("#job_type_sel").each( uselect_init );
  $("#paper_width_txt, #paper_height_txt").change( show_paper_preview ).each( show_paper_preview );
  $("#colors_front_txt, #colors_back_txt").change( show_color_preview );
  $("#colors_front_txt, #colors_back_txt").each( color_selection_init );
  step_init();
}


// When the page is ready
$(document).ready( fp_init );