{% extends "marketplace/base.html" %}

{% block title %} {{ business }} -{% endblock %}

{% block loadtags %}initTabs();{% endblock %}

{% block javascript %}
<style type="text/css">
  h3 { margin:0; margin-top:1em;}
  h4 { padding:0; margin:0; margin-bottom:1em;}
  p { padding-bottom:10px;}
  .tabContent { overflow:auto; }
  li {list-style:none; margin-left:0px;}
  li.last { font-weight:bold; margin-bottom:3px; }
  ul.info { float:right; padding:1em 1em 0 1em; margin-left:10px;text-align:left; width:28%; }
  ul.hours { float:right; text-align:left; width:28%; padding-left:0; padding:10px; background:white; border:1px solid #555; margin-left:1em;}
  ul.hours ul { padding:0; text-align:left;}
  ul.features li { padding:0;}
  ul.features { margin:0.5em 0 0 1em; padding:0;text-align:left; width:25%; float:left; padding-top:1em; font-size:larger;}
  ul.features p {  }
</style>



<!--Begin javascript tabs code-->
<script type="text/javascript">
    //<![CDATA[

    var tabLinks = new Array();
    var contentDivs = new Array();

    function initTabs() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }

      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

    function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

    //]]>
    </script>
<!--End jquery code-->
{% endblock %}

{% block content %}
  <td colspan="2" align="left" valign="top" bgcolor="99CCFF" width="565">
                    
  <div class="business">
    {% load convert_tags %}
    {% if business.logo %}
    <h3 class="logo" style="border:1px solid #555; ">{% thumbnail business.logo.url "550" %}</h3>
    {% else %}
      <h3>{{business}}</h3>
    {% endif %}
    {% if business.url %}
      <h4><a href="{{business.url}}" target="_blank" class="website">{{business.url|cut:"http://"|cut:"/"}}</a></h4>
    {% endif %}
    <h4 class="tagline">{{business.brief}}</h4>
  </div>

  <div class="businesstabs" align="center">
      <ul id="tabs">
        <li><a href="#info">Information</a></li>
        <li><a href="#location">Location</a></li>
      </ul>

    <div class="tabContent" id="about">
     <ul class="info" >
	{% if business.po_box %}<li>P.O.Box {{business.po_box}}</li>{% endif %}
	{% if business.point %}<li>{{business.point.address}}<br>{{business.point.town}}&nbsp;{{business.point.zipcode }}</li>{% endif %}
	{% if business.phone %}<li><em>{{business.phone_title}}</em> {{business.phone}}</li>{% endif %}
	{% if business.phone_2%}<li><em>{{business.phone_2_title}}</em> {{business.phone_2}}</li>{% endif %}
	{% if business.phone_3 %}<li><em>{{business.phone_3_title}}</em> {{business.phone_3}}</li>{% endif %}
	{% if business.mobile_phone %}<li><em>Mobile phone</em> {{business.mobile_phone}}</li>{% endif %}
	{% if business.fax %}<li><em>Fax</em> {{business.fax}}</li>{% endif %}
	{% if business.email %}<li><em>Email</em> {{business.email}}</li>{% endif %}
     </ul>
     {% if business.payment_accepted_set.all %}
     <ul class="payment_list"> 
       {% for payment in business.payment_accepted_set.all %}
	<li><img src="{{payment.icon}}" alt="{{payment}}" title="{{payment}}"></li> 
       {% endfor %}    
     </ul> 
     {% endif %}

     {% if hours %}
        <ul class="hours"> 
	{% for h in hours %}
        <li class="on last">{% if h.title %}{{h.title}}{%else%}Business{%endif%} hours</li>
          <ul style="display:block;"> 
            <li> 
              <table class="place_hours"> 
                <tr> 	
                  <th class="day">Monday</th> 
		  {% if h.mon_open %}
                    <td class="open_time">{{h.mon_open|time:"f a"}}</td>
		    {% if h.mon_close %}<td class="close_time">{{h.mon_close|time:"f a"}}</td>{% endif%}
	 	  {% else %}{% if h.mon_by_appt %}
		    <td class="by_appt">By Appointment</td>
		  {% else %}
		    <td class="closed">Closed</td>
	  	  {% endif %}
	  	  {% endif %}
                </tr> 
		<tr>
                  <th class="day">Tuesday</th> 
		  {% if h.tue_open %}
                    <td class="open_time">{{h.tue_open|time:"f a"}}</td>
		    {% if h.tue_close %}<td class="close_time">{{h.tue_close|time:"f a"}}</td>{% endif%}
	 	  {% else %}{% if h.tue_by_appt %}
		    <td class="by_appt">By Appointment</td>
		  {% else %}
		    <td class="closed">Closed</td>
	  	  {% endif %}
	  	  {% endif %}
		</tr>
		<tr>
                  <th class="day">Wednesday</th> 
		  {% if h.wed_open %}
                    <td class="open_time">{{h.wed_open|time:"f a"}}</td>
		    {% if h.wed_close %}<td class="close_time">{{h.wed_close|time:"f a"}}</td>{% endif%}
	 	  {% else %}{% if h.wed_by_appt %}
		    <td class="by_appt">By Appointment</td>
		  {% else %}
		    <td class="closed">Closed</td>
	  	  {% endif %}
	  	  {% endif %}
		</tr>
		<tr>
                  <th class="day">Thursday</th> 
		  {% if h.thu_open %}
                    <td class="open_time">{{h.thu_open|time:"f a"}}</td>
		    {% if h.thu_close %}<td class="close_time">{{h.thu_close|time:"f a"}}</td>{% endif%}
	 	  {% else %}{% if h.thu_by_appt %}
		    <td class="by_appt">By Appointment</td>
		  {% else %}
		    <td class="closed">Closed</td>
	  	  {% endif %}
	  	  {% endif %}
		</tr>
		<tr>
                  <th class="day">Friday</th> 
		  {% if h.fri_open %}
                    <td class="open_time">{{h.fri_open|time:"f a"}}</td>
		    {% if h.fri_close %}<td class="close_time">{{h.fri_close|time:"f a"}}</td>{% endif%}
	 	  {% else %}{% if h.fri_by_appt %}
		    <td class="by_appt">By Appointment</td>
		  {% else %}
		    <td class="closed">Closed</td>
	  	  {% endif %}
	  	  {% endif %}
		</tr>
		<tr>
                  <th class="day">Saturday</th> 
		  {% if h.sat_open %}
                    <td class="open_time">{{h.sat_open|time:"f a"}}</td>
		    {% if h.sat_close %}<td class="close_time">{{h.sat_close|time:"f a"}}</td>{% endif%}
	 	  {% else %}{% if h.sat_by_appt %}
		    <td class="by_appt">By Appointment</td>
		  {% else %}
		    <td class="closed">Closed</td>
	  	  {% endif %}
	  	  {% endif %}
		</tr>
		<tr>
                  <th class="day">Sunday</th> 
		  {% if h.sun_open %}
                    <td class="open_time">{{h.sun_open|time:"f a"}}</td>
		    {% if h.sun_close %}<td class="close_time">{{h.sun_close|time:"f a"}}</td>{% endif%}
	 	  {% else %}{% if h.sun_by_appt %}
		    <td class="by_appt">By Appointment</td>
		  {% else %}
		    <td class="closed">Closed</td>
	  	  {% endif %}
	  	  {% endif %}

		</tr>
		{% if h.additional %}
		<tr><p>{{h.additional}}</p></tr>
		{% endif %}
              </table> 
            </li> 
          </ul> 
        </li> 
	{% endfor %}
      </ul>
	{% else %}
	<p>No hours available</p> 
	{% endif %}

      <ul class="features">
        <li class="on last">Featuring</li> 

      {% for f in business.features.all %}
 	    <li>{{f}}</li>
	  {% endfor %}
      </ul>
    </div>


    <div class="tabContent" id="location">
      <div>
        <p>Directions adn a map should go here.</p>
      </div>
    </div>

  
  <div class="writeup" align="left">
  <div style="float:right; width:250px; padding-left:25px">  
  <h4 style="padding-top:0px; margin-top:0px"><br>
  {% if business.businessphoto_set.all %}
  {% for photo in business.businessphoto_set.all %}
    {% thumbnail photo.photo "250" %}<br>
    {{photo.caption}} &nbsp;
  {% endfor %}
  {% endif %}
  <br></h4></div>

  <div class="writeup_copy">
  {% load markup typogrify %}
  {{business.description|typogrify|markdown}}
  <p><span class="writeup_copy"><a class="return" href="{% url mk-index %}">Return to 
Business 
Directory</a></span> </p>
  <hr size="1"></div>
</div>
 </div></td>
{% endblock %}
