#!/usr/bin/env ruby
      
# Copyright (c) 2009 Cory Ondrejka. All rights reserved.
# See License.txt for licensing details.

require "#{File.dirname(__FILE__)}/../testing_file_support"

describe BalsamiqControlParser do
  it "properly handles verticaltabbar" do
    data = <<-EOF
    <mockup version="1.0" skin="sketch">
      <controls>
        <control controlID="58" controlTypeID="com.balsamiq.mockups::VerticalTabBar" x="57" y="32" w="-1" h="-1" zOrder="0" locked="false" isInGroup="-1">
          <controlProperties>
            <text>First%20Tab%0ASecond%20Tab%0AThird%20Tab%0AFourth%20Tab</text>
          </controlProperties>
        </control>
        <control controlID="59" controlTypeID="com.balsamiq.mockups::VerticalTabBar" x="320" y="47" w="275" h="289" zOrder="1" locked="false" isInGroup="-1">
          <controlProperties>
            <text>First%20Tab%0ASecond%20Tab%0AThird%20Tab%0AFourth%20Tab%0AFifth%0AFoo%0ABar</text>
            <position>right</position>
          </controlProperties>
        </control>
      </controls>
    </mockup>
    EOF
    html = <<-EOF
    <?xml version="1.0" encoding="UTF-8"?>
    <!-- Generated by Balsamiq Exporter -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" type="text/css" href="reset.css" />
          <link rel="stylesheet" type="text/css" href="verticaltabbar.css" />
        <title>Balsamiq</title>
        <script type="text/javascript">
        </script>
      </head>

      <body>
        <div class="VerticalTabBar" id="VerticalTabBar58"
              style="position: absolute; left: 162px; top: 32px; height: 194px; width: 95px; z-index: 0;">
          <div style="position: absolute; left: -105px; top: 0px; height: 100%; width: 100px; z-index: 0;
                      outline: none; background-color: transparent;">
          <div class="VerticalTabBar" id="VerticalTabBar58tab"
                style="position: absolute; left: 0px; top: 25px; width: 100px; z-index: 0;
                font-size:10pt; outline: none; background-color: transparent;">
            <div class="VerticalTabBar" id="VerticalTabBar58tab_0"
                style="float: left; height: 20px; width: 100%; outline: none; padding-right:3px; background-color: transparent;">
              <div class="balsamiq_shadow"
                style="position: relative; top: 3px; left: 3px; z-index: 0;
                       font-size:10pt; height: 17px; outline: 2px solid #010101; background-color:#010101;">
                <p style="padding-left:10px;padding-right:10px;">First Tab</p>
              </div>
              <div class="balsamiq_button"
                style = "position: relative; z-index: 1;
                   font-size:10pt; top: -20px; height: 17px;">
                <a href=""><p style="padding-left:10px;padding-right:10px;">First Tab</p></a>
              </div>
            </div>
            <div class="VerticalTabBar" id="VerticalTabBar58tab_1"
                style="float: left; height: 20px; width: 100%; outline: none; padding-right:3px; background-color: transparent;">
              <div class="balsamiq_shadow"
                style="position: relative; top: 3px; left: 3px; z-index: 0;
                       font-size:10pt; height: 17px; outline: 2px solid #010101; background-color:#010101;">
                <p style="padding-left:10px;padding-right:10px;">Second Tab</p>
              </div>
              <div class="balsamiq_button"
                style = "position: relative; z-index: 1;
                   font-size:10pt; top: -20px; height: 17px;">
                <a href=""><p style="padding-left:10px;padding-right:10px;">Second Tab</p></a>
              </div>
            </div>
            <div class="VerticalTabBar" id="VerticalTabBar58tab_2"
                style="float: left; height: 20px; width: 100%; outline: none; padding-right:3px; background-color: transparent;">
              <div class="balsamiq_shadow"
                style="position: relative; top: 3px; left: 3px; z-index: 0;
                       font-size:10pt; height: 17px; outline: 2px solid #010101; background-color:#010101;">
                <p style="padding-left:10px;padding-right:10px;">Third Tab</p>
              </div>
              <div class="balsamiq_button"
                style = "position: relative; z-index: 1;
                   font-size:10pt; top: -20px; height: 17px;">
                <a href=""><p style="padding-left:10px;padding-right:10px;">Third Tab</p></a>
              </div>
            </div>
            <div class="VerticalTabBar" id="VerticalTabBar58tab_3"
                style="float: left; height: 20px; width: 100%; outline: none; padding-right:3px; background-color: transparent;">
              <div class="balsamiq_shadow"
                style="position: relative; top: 3px; left: 3px; z-index: 0;
                       font-size:10pt; height: 17px; outline: 2px solid #010101; background-color:#010101;">
                <p style="padding-left:10px;padding-right:10px;">Fourth Tab</p>
              </div>
              <div class="balsamiq_button"
                style = "position: relative; z-index: 1;
                   font-size:10pt; top: -20px; height: 17px;">
                <a href=""><p style="padding-left:10px;padding-right:10px;">Fourth Tab</p></a>
              </div>
            </div>
          </div>
    </div></div>    <div class="VerticalTabBar" id="VerticalTabBar59"
              style="position: absolute; left: 320px; top: 47px; height: 289px; width: 170px; z-index: 1;">
          <div style="position: absolute; left: 173px; top: 0px; height: 100%; width: 100px; z-index: 1;
                      outline: none; background-color: transparent;">
          <div class="VerticalTabBar" id="VerticalTabBar59tab"
                style="position: absolute; left: 0px; top: 25px; width: 100px; z-index: 1;
                font-size:10pt; outline: none; background-color: transparent;">
            <div class="VerticalTabBar" id="VerticalTabBar59tab_0"
                style="float: left; height: 20px; width: 100%; outline: none; padding-right:3px; background-color: transparent;">
              <div class="balsamiq_shadow"
                style="position: relative; top: 3px; left: 3px; z-index: 1;
                       font-size:10pt; height: 17px; outline: 2px solid #010101; background-color:#010101;">
                <p style="padding-left:10px;padding-right:10px;">First Tab</p>
              </div>
              <div class="balsamiq_button"
                style = "position: relative; z-index: 2;
                   font-size:10pt; top: -20px; height: 17px;">
                <a href=""><p style="padding-left:10px;padding-right:10px;">First Tab</p></a>
              </div>
            </div>
            <div class="VerticalTabBar" id="VerticalTabBar59tab_1"
                style="float: left; height: 20px; width: 100%; outline: none; padding-right:3px; background-color: transparent;">
              <div class="balsamiq_shadow"
                style="position: relative; top: 3px; left: 3px; z-index: 1;
                       font-size:10pt; height: 17px; outline: 2px solid #010101; background-color:#010101;">
                <p style="padding-left:10px;padding-right:10px;">Second Tab</p>
              </div>
              <div class="balsamiq_button"
                style = "position: relative; z-index: 2;
                   font-size:10pt; top: -20px; height: 17px;">
                <a href=""><p style="padding-left:10px;padding-right:10px;">Second Tab</p></a>
              </div>
            </div>
            <div class="VerticalTabBar" id="VerticalTabBar59tab_2"
                style="float: left; height: 20px; width: 100%; outline: none; padding-right:3px; background-color: transparent;">
              <div class="balsamiq_shadow"
                style="position: relative; top: 3px; left: 3px; z-index: 1;
                       font-size:10pt; height: 17px; outline: 2px solid #010101; background-color:#010101;">
                <p style="padding-left:10px;padding-right:10px;">Third Tab</p>
              </div>
              <div class="balsamiq_button"
                style = "position: relative; z-index: 2;
                   font-size:10pt; top: -20px; height: 17px;">
                <a href=""><p style="padding-left:10px;padding-right:10px;">Third Tab</p></a>
              </div>
            </div>
            <div class="VerticalTabBar" id="VerticalTabBar59tab_3"
                style="float: left; height: 20px; width: 100%; outline: none; padding-right:3px; background-color: transparent;">
              <div class="balsamiq_shadow"
                style="position: relative; top: 3px; left: 3px; z-index: 1;
                       font-size:10pt; height: 17px; outline: 2px solid #010101; background-color:#010101;">
                <p style="padding-left:10px;padding-right:10px;">Fourth Tab</p>
              </div>
              <div class="balsamiq_button"
                style = "position: relative; z-index: 2;
                   font-size:10pt; top: -20px; height: 17px;">
                <a href=""><p style="padding-left:10px;padding-right:10px;">Fourth Tab</p></a>
              </div>
            </div>
            <div class="VerticalTabBar" id="VerticalTabBar59tab_4"
                style="float: left; height: 20px; width: 100%; outline: none; padding-right:3px; background-color: transparent;">
              <div class="balsamiq_shadow"
                style="position: relative; top: 3px; left: 3px; z-index: 1;
                       font-size:10pt; height: 17px; outline: 2px solid #010101; background-color:#010101;">
                <p style="padding-left:10px;padding-right:10px;">Fifth</p>
              </div>
              <div class="balsamiq_button"
                style = "position: relative; z-index: 2;
                   font-size:10pt; top: -20px; height: 17px;">
                <a href=""><p style="padding-left:10px;padding-right:10px;">Fifth</p></a>
              </div>
            </div>
            <div class="VerticalTabBar" id="VerticalTabBar59tab_5"
                style="float: left; height: 20px; width: 100%; outline: none; padding-right:3px; background-color: transparent;">
              <div class="balsamiq_shadow"
                style="position: relative; top: 3px; left: 3px; z-index: 1;
                       font-size:10pt; height: 17px; outline: 2px solid #010101; background-color:#010101;">
                <p style="padding-left:10px;padding-right:10px;">Foo</p>
              </div>
              <div class="balsamiq_button"
                style = "position: relative; z-index: 2;
                   font-size:10pt; top: -20px; height: 17px;">
                <a href=""><p style="padding-left:10px;padding-right:10px;">Foo</p></a>
              </div>
            </div>
            <div class="VerticalTabBar" id="VerticalTabBar59tab_6"
                style="float: left; height: 20px; width: 100%; outline: none; padding-right:3px; background-color: transparent;">
              <div class="balsamiq_shadow"
                style="position: relative; top: 3px; left: 3px; z-index: 1;
                       font-size:10pt; height: 17px; outline: 2px solid #010101; background-color:#010101;">
                <p style="padding-left:10px;padding-right:10px;">Bar</p>
              </div>
              <div class="balsamiq_button"
                style = "position: relative; z-index: 2;
                   font-size:10pt; top: -20px; height: 17px;">
                <a href=""><p style="padding-left:10px;padding-right:10px;">Bar</p></a>
              </div>
            </div>
          </div>
    </div></div>  </body>
    </html>
    EOF
    css = <<-EOF
    .balsamiq_button a, a:hover, a:active {
      text-decoration: none;
      color: #010101;
    }

    .balsamiq_button:hover {
      background-color: #CCCCCC;
    }

    .balsamiq_button:active {
      background-color: #AAEEBB;
      margin-top: 2px;
    }
    EOF
    js = <<-EOF
    EOF
    filename = "verticaltabbar"
    TestingFileSupport::test_elements(filename, data, html, css, js, false)
  end
      
end
