<?php
  $wizard_template_page = substr(__FILE__,-5,1);
  include ("wizard_common_top.php");

  if  (($_GET["install_oc"] !="")&&($_GET["oc_page_added"] !="")) {
    $_SESSION['install_oc'] = $_GET['install_oc']; //Set up the session variable for the instruction
    $_SESSION['oc_page_added'] = $_GET['oc_page_added']; //Set it up to install the page first time around
  }
?>
    <div id=template_filter_label>
      <span>Thumbnail Filter</span>
    </div>

  </header>
  <div id="wrapper" onclick="">
    <section id="select_template">
     <div class="center_frame">
        <h1>Select A Template</h1>
        <p>Click on any template.  Move the mouse to the right or left of the template and the 'Last' and 'Next' buttons will let you browse.</p>
        <p>You can narrow down the selection of templates by category by adjusting the 'Thumbnail Filter' buttons on the left hand side.</p>
        <p>  When you find a template you like, click the 'Select' button in the lower left hand corner.  Don't worry, you can always change your template later.</p>
        </div>
      <div id="info">

        <!--
        <h3 class="smartphone">This wizard is too wide for your mobile screen.<br>Please view on a tablet or PC.</h3>
        -->

        <div id="template_tn">
<?php

  include ("get_filter_data.php");

  $categoryArray = get_filter_data();
  $myString1 = "";
  $myString2 = "";
  $myString3 = "";

  foreach ($categoryArray as $key => $val) {
    $myString1 .= "\n" . str_pad("", 12) . "<input type='checkbox' \n";
    $myString1 .= str_pad("", 19) . "name='wizard_template_filter_";
    $myString1 .= $val['category'] . "' \n";
    $myString1 .= str_pad("", 21) . "id='" . $val['category'] . "_cb' \n";
    $myString1 .= str_pad("", 18) . "class='toggle' ";

    if (empty($wtf_array) || (isset($wtf_array['wizard_template_filter_' . $val['category']]) && $wtf_array['wizard_template_filter_' . $val['category']] === 'on') ) {
      $myString1 .= "\n" . str_pad("", 16) . "checked='checked' ";
    }
    $myString1 .= "/>\n";
 /*  $myString1 .= "       <div id='" . $val['category'] . "_div' class='category_div'>\n";    */
    $myString1 .= str_pad("", 12) . "<div id='category" . $key . "_div' class='SlideButton'>\n";
    $myString1 .= str_pad("", 14) . "<label for='" . $val['category'] . "_cb'>\n";
    $myString1 .= str_pad("", 16) . "<span>" . $val['category'] . "</span>\n";
    $myString1 .= str_pad("", 14) . "</label>\n";
    $myString1 .= str_pad("", 12) . "</div> <!-- END category" . $key . "_div -->\n";
/*    $myString1 .= "       </div>\n";           */
/*
    foreach ($val['subcategory'] as $key => $val) {
      $myString1 .= "       <div  id='" . $val . "_div' class='subcategory_div'>\n";
      $myString1 .= "         <div class='SlideButton'>\n";
      $myString1 .= "           <input checked='checked' name='toggle' id='" . $val . "_cb' class='toggle' type='checkbox' />\n";
      $myString1 .= "          <label for='" . $val . "_cb'>\n";
      $myString1 .= "           </label>\n";
      $myString1 .= "         </div>\n";
      $myString1 .= "         <span>" . $val . "</span>\n";
      $myString1 .= "         </div>\n";

    }  */
  }

  echo $myString1;

  include ("get_template_data.php");

  if ($cPanel_user_ID === 'ebconten') {
    $templateArray = get_template_data(false);
  } else {
    $templateArray = get_template_data(true);
  }

  $myString1 = "";
  $myString2 = "";
  $myString3 = "";
  $myString4 = "";
  $myCSS1 = "";
  $myCSS2 = "";
  $myCSS3 = "";
  $myCSS4 = "";
  $myCSS5 = "";
  $myTc = count($templateArray);
  $myLast = $templateArray[intval($myTc-1)]['ID'];
  $js = array("","","","","","","");
  
  $doc_root = $_SERVER['DOCUMENT_ROOT'];
// print_r ($templateArray);
  foreach ($templateArray as $key => $val) {

    // build image links
	$myTn = TEMPLATE_IMAGE_FOLDER . "tn/" . $val['page_image_tn'];
    $myFs = TEMPLATE_IMAGE_FOLDER . "fs/" . $val['page_image'];
	$myLaptopTn = TEMPLATE_IMAGE_FOLDER . "tn/" . $val['laptop_page_image_tn'];
    $myLaptopFs = TEMPLATE_IMAGE_FOLDER . "fs/" . $val['laptop_page_image'];
	$myTabletTn = TEMPLATE_IMAGE_FOLDER . "tn/" . $val['tablet_page_image_tn'];
    $myTabletFs = TEMPLATE_IMAGE_FOLDER . "fs/" . $val['tablet_page_image'];
	$myPhoneTn = TEMPLATE_IMAGE_FOLDER . "tn/" . $val['phone_page_image_tn'];
    $myPhoneFs = TEMPLATE_IMAGE_FOLDER . "fs/" . $val['phone_page_image'];

    $myID = $val['ID'];

    // build css_class strings
    $myCategories = implode("_c_tn|", $val['type']) . "_c_tn|";
    $myCategories = str_replace("|"," ",str_replace(" ","_",$myCategories));
    $mySubCategories = implode("_s_tn|", $val['category']) . "_s_tn|";
    $mySubCategories = str_replace("|"," ",str_replace(" ","_",$mySubCategories));
    $myMedia = "";
    foreach ($val['media'] as $mKey => $mVal) {
      if ($mVal) $myMedia .= $mKey . "_m_tn ";
    }
    if ($myTc == intval($key+1)) {
      $myNext = $myFirst;
    } else {
      $myNext = $templateArray[intval($key+1)]['ID'];
    }

    // format template created date string
    $myDate = (substr($val['created'],0,2)=="00"?"unknown":date('M j, Y',strtotime($val['created'])));

    // build :checked CSS string for thumbnail-to-lightbox selection
    //   add commas to each of three tag groups to be inserted into page
    if ($key != 0 ) {
      $myCSS1 .= ",\n";
      $myCSS2 .= ",\n";
      $myCSS3 .= ",\n";
      $myCSS4 .= ",\n";
    } else {
      $myFirst = $val['ID'];
    }

    // get thumbnail size
    /* list($myTnX, $myTnY) = getimagesize(HOME_PATH.$myTn); */
    // not needed - right now

    // build ***Thumbnail label***
    $myString1 .= "\n" . str_pad("", 12) . "<label for='image_tn";
    $myString1 .= $myID . "' \n";
    $myString1 .= str_pad("", 12) . "onclick=setActiveTemplate('".image_tn;
    $myString1 .= $myID . "') \n";
    $myString1 .= str_pad("", 17) . "class='";
    $myString1 .= $myCategories;
    /* $myString1 .= $myCategories . $mySubCategories . $myMedia; */
    $myString1 .= "label_tn_placeholder'>\n";
    $myString1 .= str_pad("", 14) . "<span class=''>\n";

	if (file_exists($doc_root . $myTn) && !is_dir($doc_root . $myTn))	{
		$myString1 .= str_pad("", 16) . "<img src='" . $myTn . "' \n";
		$myString1 .= str_pad("", 21) . "alt='Template Thumbnail ";
		$myString1 .= $myID . "' />\n";
	}
	if (file_exists($doc_root . $myLaptopTn) && !is_dir($doc_root . $myLaptopTn))	{
		$myString1 .= str_pad("", 16) . "<img src='" . $myLaptopTn . "' \n";
		$myString1 .= str_pad("", 21) . "alt='Template Thumbnail ";
		$myString1 .= $myID . "' />\n";
	}
	if (file_exists($doc_root . $myTabletTn) && !is_dir($doc_root . $myTabletTn))	{
		$myString1 .= str_pad("", 16) . "<img src='" . $myTabletTn . "' \n";
		$myString1 .= str_pad("", 21) . "alt='Template Thumbnail ";
		$myString1 .= $myID . "' />\n";
	}
	if (file_exists($doc_root . $myPhoneTn) && !is_dir($doc_root . $myPhoneTn))	{
		$myString1 .= str_pad("", 16) . "<img src='" . $myPhoneTn . "' \n";
		$myString1 .= str_pad("", 21) . "alt='Template Thumbnail ";
		$myString1 .= $myID . "' />\n";
	}
    $myString1 .= str_pad("", 14) . "</span>\n";
    $myString1 .= str_pad("", 12) . "</label> <!-- END image_tn". $myID . "-->\n";

    // build ***Thumbnail Checkbox***
    $myString2 .= "\n" . str_pad("", 10) . "<input type='radio' \n";
    $myString2 .= str_pad("", 16) . "value='" . $myID . "' \n";
    $myString2 .= str_pad("", 17) . "name='wizard_template_ID' \n";
    $myString2 .= str_pad("", 19) . "id='image_tn";
    $myString2 .= $myID . "' \n";
    $myString2 .= str_pad("", 16) . "class='image_tn' />\n";

    // build ***Lightbox Image***
    $myString3 .= "\n" . str_pad("", 12) . "<div class='wrapper wrap";
    $myString3 .= $myID . "'> \n";
    $myString3 .= str_pad("", 14) . "<div class='frame'>\n";
    $myString3 .= str_pad("", 16) . "<div class='lb_back_button'>\n";
    $myString3 .= str_pad("", 18) . "<label for='image_tn" . $myLast . "' \n";
    $myString3 .= str_pad("", 12) . "onclick=setActiveTemplate('image_tn" . $myLast . "') \n";
    $myString3 .= str_pad("", 26) . "id='label_back_button_" . $myID . "' \n";
    $myString3 .= str_pad("", 23) . "class='label_back_button'>\n";
    /*    $myString3 .= str_pad("", 20) . "<img src='images/last.png' \n";      */
    /*    $myString3 .= str_pad("", 25) . "alt='' />\n";                    */
    /* the above code allows for a image for the LAST button, instead of stylized TEXT (below) */
    $myString3 .= str_pad("", 20) . "<span>LAST</span>\n";
    $myString3 .= str_pad("", 18) . "</label>\n";
    $myString3 .= str_pad("", 16) . "</div> <!-- END lb_back_button -->\n";
    $myString3 .= str_pad("", 16) . "<div class='lb_forward_button'>\n";
    $myString3 .= str_pad("", 18) . "<label for='image_tn" . $myNext . "' \n";
    $myString3 .= str_pad("", 12) . "onclick=setActiveTemplate('image_tn" . $myNext . "') \n";
    $myString3 .= str_pad("", 26) . "id='label_forward_button_" . $myID . "' \n";
    $myString3 .= str_pad("", 23) . "class='label_forward_button'>\n";
    /*    $myString3 .= str_pad("", 20) . "<img src='images/next.png' \n";  */
    /*    $myString3 .= str_pad("", 25) . "alt='' />\n";                */
    /* the above code allows for a image for the NEXT button, instead of stylized TEXT (below) */
    $myString3 .= str_pad("", 20) . "<span>NEXT</span>\n";
    $myString3 .= str_pad("", 18) . "</label>\n";
    $myString3 .= str_pad("", 16) . "</div> <!-- END lb_forward_button -->\n";
    $myString3 .= str_pad("", 16) . "<div class='limiter'>\n";
	if (file_exists($doc_root . $myFs) && !is_dir($doc_root . $myFs))	{
		$myString3 .= str_pad("", 18) . "<img class='fullsize' \n";
		$myString3 .= str_pad("", 25) . "src='" . $myFs . "' \n";
		$myString3 .= str_pad("", 25) . "alt='' />\n";
	}
	if (file_exists($doc_root . $myLaptopFs) && !is_dir($doc_root . $myLaptopFs))	{
		$myString3 .= str_pad("", 18) . "<img class='fullsize' \n";
		$myString3 .= str_pad("", 25) . "src='" . $myLaptopFs . "' \n";
		$myString3 .= str_pad("", 25) . "alt='' />\n";
	}
	if (file_exists($doc_root . $myTabletFs) && !is_dir($doc_root . $myTabletFs))	{
		$myString3 .= str_pad("", 18) . "<img class='fullsize' \n";
		$myString3 .= str_pad("", 25) . "src='" . $myTabletFs . "' \n";
		$myString3 .= str_pad("", 25) . "alt='' />\n";
	}
	if (file_exists($doc_root . $myPhoneFs) && !is_dir($doc_root . $myPhoneFs))	{
		$myString3 .= str_pad("", 18) . "<img class='fullsize' \n";
		$myString3 .= str_pad("", 25) . "src='" . $myPhoneFs . "' \n";
		$myString3 .= str_pad("", 25) . "alt='' />\n";
	}
    $myString3 .= str_pad("", 16) . "</div> <!-- END limiter -->\n";
    $myString3 .= str_pad("", 16) . "<div class='caption'>\n";
    $myString3 .= str_pad("", 16) . "<label for='goto_page_2' style='cursor:pointer;'> \n";
    $myString3 .= str_pad("", 18) . "<img class='select' src='images/select.png' alt='Select' />\n";
//    $myString3 .= str_pad("", 25) . "<img src='images/select.png' alt='Select' />"\n";
    $myString3 .= str_pad("", 16) . "</label>\n";   
    $myString3 .= str_pad("", 18) . "<h6>" . $val['name'] . "\n";
    $myString3 .= str_pad("", 20) . "<span class='template_price'>\n";
    $myString3 .= str_pad("", 22) . " - Price:";
    $myString3 .= (LOCAL_MODE || $val['price'] == 0?" FREE":" $" . $val['price']) ."\n";
    $myString3 .= str_pad("", 20) . "</span>\n";
    $myString3 .= str_pad("", 20) . "<span class='template_id'>\n";
    $myString3 .= str_pad("", 22) . "Template ";
    // disabled the x of y (e.g. 3/14) display ...
    // since would be difficult to recalculate as categories were selected/deselected
    //    $myString3 .= intval($key + 1) . "/" . $myTc . "</span></h6>\n";
    //instead we'll display the Template ID and the template created date ... kewl, eh?
    $myString3 .= "ID:" . $myID . "\n";
    $myString3 .= str_pad("", 22) . "<span class='template_created'>\n";
    $myString3 .= str_pad("", 24) . "(" . $myDate . ")\n";
    $myString3 .= str_pad("", 22) . "</span>\n";
    $myString3 .= str_pad("", 20) . "</span>\n";
    $myString3 .= str_pad("", 18) . "</h6>\n";
    $myString3 .= str_pad("", 18) . "<p>" . $val['description'] . "\n";
    $myString3 .= str_pad("", 20) . "<br />Hover over image for 'last/next' buttons or \n";
    $myString3 .= str_pad("", 20) . "click the SELECT button to the right to \n";
    $myString3 .= str_pad("", 20) . "choose your template.</p>\n";
    $myString3 .= str_pad("", 16) . "</div> <!-- END caption -->\n";
    $myString3 .= str_pad("", 16) . "<label  \n";
    //for='goto_page_1'
    $myString3 .= str_pad("", 21) . "class='close' onclick='deSelect();'>\n";
    $myString3 .= str_pad("", 18) . "<img src='images/close.png' alt='Close' />\n";
    $myString3 .= str_pad("", 16) . "</label>\n";
    $myString3 .= str_pad("", 14) . "</div> <!-- END frame -->\n";
    $myString3 .= str_pad("", 12) . "</div> <!-- END wrapper wrap";
    $myString3 .= $myID . " --> \n";

    // build ***Thumbnail SELECTED***
    $myString4 .= str_pad("", 10) . "<div class='image_tn_selected' \n";
    $myString4 .= str_pad("", 18) . "id='image_tn_selected". $myID . "'>\n";
    $myString4 .= str_pad("", 12) . "<span>\n";
	if (file_exists($doc_root . $myTn) && !is_dir($doc_root . $myTn))	{
		$myString4 .= str_pad("", 14) . "<img src='" . $myTn . "' \n";
		$myString4 .= str_pad("", 19) . "alt='Template Thumbnail ";
		$myString4 .= $myID . "' />\n";
	}
	if (file_exists($doc_root . $myLaptopTn) && !is_dir($doc_root . $myLaptopTn))	{
		$myString4 .= str_pad("", 14) . "<img src='" . $myLaptopTn . "' \n";
		$myString4 .= str_pad("", 19) . "alt='Template Thumbnail ";
		$myString4 .= $myID . "' />\n";
	}
	if (file_exists($doc_root . $myTabletTn) && !is_dir($doc_root . $myTabletTn))	{
		$myString4 .= str_pad("", 14) . "<img src='" . $myTabletTn . "' \n";
		$myString4 .= str_pad("", 19) . "alt='Template Thumbnail ";
		$myString4 .= $myID . "' />\n";
	}
	if (file_exists($doc_root . $myPhoneTn) && !is_dir($doc_root . $myPhoneTn))	{
		$myString4 .= str_pad("", 14) . "<img src='" . $myPhoneTn . "' \n";
		$myString4 .= str_pad("", 19) . "alt='Template Thumbnail ";
		$myString4 .= $myID . "' />\n";
	}	
    $myString4 .= str_pad("", 12) . "</span>\n";
    $myString4 .= str_pad("", 10) . "</div> <!-- END image_tn_selected". $myID . "-->\n";


    // build :checked CSS string for thumbnail-to-lightbox selection
    //   add unique selectors to each of three tag groups to be inserted into page
    $myCSS1  .= str_pad("", 12) . "#image_tn" . $myID . ":checked ~ #lightbox";
    $myCSS2  .= str_pad("", 12) . "#image_tn" . $myID . ":checked ~ #lightbox .wrap" . $myID;
    $myCSS3  .= str_pad("", 12) . "#image_tn" . $myID . ":checked ~ #lightbox .wrap" . $myID . " .frame";

    //build :checked CSS string for thumbnail selected (to be displayed in left header)
    $myCSS4  .= str_pad("", 12) . "#image_tn" . $myID . ":checked ~ #image_tn_selected". $myID;

    // build javascript arrays to allow LABEL:FOR reassignment when
    // CATEGORIES (types) are selected/deselected by the user
    // currently it is set for three categories ...
    // meaning, binarially (e.g. 111), there are seven combination ...
    // well, technically eight, but we don't need an update to links
    // if the page is empty?!?!
    // if you add more categories, this  section could get ugly!
    // a fourth category would require another 4 'case' sections
    // a fifth another 8 'case' sections, etc.
    // not an elegant solution ... but VERY FAST!
    $js_tagger = [false,false,false,false,false,false,false];
    foreach ($categoryArray as $cKey => $cVal) {
      if (stripos($myCategories,$cVal['category']) !== false) {
        switch ($cKey) {
          case 0: // binary 001
            $js_tagger[0] = true; // AND with 001
            $js_tagger[2] = true; // AND with 011
            $js_tagger[4] = true; // AND with 101
            $js_tagger[6] = true; // AND with 111
            break;
          case 1: // binary 010
            $js_tagger[1] = true; // AND with 010
            $js_tagger[2] = true; // AND with 011
            $js_tagger[5] = true; // AND with 110
            $js_tagger[6] = true; // AND with 111
            break;
          case 2: // binary 100
            $js_tagger[3] = true; // AND with 100
            $js_tagger[4] = true; // AND with 101
            $js_tagger[5] = true; // AND with 110
            $js_tagger[6] = true; // AND with 111
        }
      }
    }
    foreach ($js_tagger as $jKey => $jVal) {
      if ($jVal) {
        $js[$jKey] .= $myID . ",";
      }

    }
    $myLast = $myID;
  }

  echo $myString1;
  if (DEVELOPMENT) {
    // added next two lines to fill page with thumbnails (abeit duplicates)
    echo $myString1;
    echo $myString1;
  }

  echo "\n          </div> <!-- END template_tn -->\n\n";
  echo "          <div id='label_end'></div>\n";

  echo $myString2;
  // added next two lines to fill page with thumbnails (abeit duplicates)
  echo $myString2;
  echo $myString2;
  echo "\n          <input type='submit'\n";
  echo "                 name='submit'\n";
  echo "                   id='goto_page_2'\n";
  echo "                class='image_tn hidden'\n";
  echo "                value='submit'\n";
  echo "           formaction='wizard_step_2.php' />\n\n";

  echo "          <div id='lightbox'>\n";

  echo $myString3;

  echo "\n          </div> <!-- END lightbox -->\n\n";

  echo $myString4;

    // build :checked CSS string for thumbnail-to-lightbox selection
    //   insert to each of three tag groups into page
    // this adds the required dynamic CSS to the page
  echo "\n          <style>\n";
  echo $myCSS1 . " {left:0;}\n\n";
  echo $myCSS2 . " {z-index:100;}\n\n";
  echo $myCSS3 . " {opacity:1; z-index:100;}\n\n";
  echo $myCSS4 . " {opacity:1; z-index:100; background: url('images/wizard_header_background_solid.png') repeat-y;}\n\n";
  if (LOCAL_MODE) echo ".template_price {display:none;}\n";
  echo "          </style>\n\n";

  echo "<script type='text/javascript' language='JavaScript'>\n";

  // the next twenty line are javascript to update the lightbox LABEL:for when filtering is in use
  // it was this or an JSON query for each user change of the thumbnail filters
  // this was far easier and MUCH FASTER
  $js_string = "var js_template_ID = [";
  /*
 print "<pre style=\"text-align:center;\">";
print_r($js);
print "</pre>";
*/
  for ($i = 0; $i < count($js); $i++) {
    $js_string .= " [" . rtrim($js[$i], ",") . "],";
  }
  $js_string = "  " . rtrim($js_string, ",") ."];\n";
  echo $js_string;

  $js_string="";
  foreach ($categoryArray as $key => $val) {
    echo "  document.getElementById('" . $val['category'] . "_cb').onclick = updateButtonIDs;\n";
    $js_string .= "    if(document.getElementById('" . $val['category'];
    $js_string .= "_cb').checked) cb_status += " . pow(2,$key) . ";\n";
  }

  echo "\n  function updateButtonIDs() {\n";
  echo "    var cb_status = 0;\n";
  echo $js_string;
  echo "    var imax = js_template_ID[cb_status-1].length - 1;\n\n";
  echo "    for (i=0; i<imax+1; i++) {\n";
  echo "        var new_back_ID = 'image_tn' + (i==0 ? js_template_ID[cb_status-1][imax] : js_template_ID[cb_status-1][i-1]);\n";
  echo "        var new_next_ID = 'image_tn' + (i==imax ? js_template_ID[cb_status-1][0] : js_template_ID[cb_status-1][i+1]);\n";
  echo "        var bLabel = 'label_back_button_' + js_template_ID[cb_status-1][i];\n";
  echo "        var nLabel = 'label_forward_button_' + js_template_ID[cb_status-1][i];\n";

  echo "        document.getElementById(bLabel).htmlFor = new_back_ID;\n";
  echo "        document.getElementById(nLabel).htmlFor = new_next_ID;\n";
  echo "    }\n";
  echo "  }\n";

  echo "</script>\n\n";


?>


      </div> <!-- END info -->
      <div class="nav_btn_box">
        <label id="next_btn" class="float_r disabled" >
          <img class="nav_btn" src="/wizard/images/blue_next_btn.png" alt="next_button">
        </label>
      </div>
        
    </section> <!-- END select_template -->

<?php
include ("wizard_common_bottom.php")
?>