<h2>Narrow Container</h2>
<div class="container narrowContainer">
  <div class="selection">
    <div class="choice1 dropdown">
      <span data-long-label="pick a room" data-short-label="room"></span>
      <ul class="dropdown">
        <li><a href="#" class="livingroom">Living Room</a></li>
        <li><a href="#" class="bedroom">Bedroom</a></li>
        <li><a href="#" class="bathroom">Bathroom</a></li>
      </ul>
    </div>
  </div>
  <div class="selection">
    <div class="choice2 dropdown">
      <span data-long-label="what's your mood?" data-short-label="mood"></span>
      <ul class="dropdown">
        <li><a href="#" class="warm">Warm</a></li>
        <li><a href="#" class="relaxing">Relaxing</a></li>
        <li><a href="#" class="calming">Calming</a></li>
      </ul>
    </div>
  </div>
  <div class="submit">
    <a href="#" class="outcome">Get Ideas</a>
  </div>
</div>

<h2>Wide Container (same html)</h2>
<div class="container wideContainer">
  <div class="selection">
    <div class="choice1 dropdown">
      <span data-long-label="pick a room" data-short-label="room"></span>
      <ul class="dropdown">
        <li><a href="#" class="livingroom">Living Room</a></li>
        <li><a href="#" class="bedroom">Bedroom</a></li>
        <li><a href="#" class="bathroom">Bathroom</a></li>
      </ul>
    </div>
  </div>
  <div class="selection">
    <div class="choice2 dropdown">
      <span data-long-label="what's your mood?" data-short-label="mood"></span>
      <ul class="dropdown">
        <li><a href="#" class="warm">Warm</a></li>
        <li><a href="#" class="relaxing">Relaxing</a></li>
        <li><a href="#" class="calming">Calming</a></li>
      </ul>
    </div>
  </div>
  <div class="submit">
    <a href="#" class="outcome">Get Ideas</a>
  </div>
</div>

@import "compass/css3";

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');

$border-color: #dfdfdf;
$olive-green: #8eae0e;
$white: #fff;
$selection-color: rgba(0,0,0,.75);

body {
  font-family: Arial, sans-serif;
}

.narrowContainer {
  max-width: 250px;
}
.wideContainer {
  max-width: 700px;
  .dropdown {
    span {
      &:before {
        content: attr(data-long-label);
      }
      &:after {
        font-size: 11px;
      }
    }
  }
  &.container div.submit  {
    a {
      display: block;
      text-decoration: none;
      color: $white;
      font-size: 12px;
      white-space: nowrap;
      font-family: "arial black",arial,sans-serif;
      background: $olive-green;
      height: 40px;
      line-height: 40px;
      padding: 0 1em;
      border-radius: 0.75em;
      text-transform: lowercase;
      &:before {
        display: none;
      }
    }
  }
}
.container {
  font-family: Verdana,Arial,sans-serif;
  display: table;
  margin: 0 auto;
  div {
    display: table-cell;
    &.selection {
      width: 49%;
      position: relative;
    }
    &.submit {
      width: 2%;
      a {
        font-size: 0;
        text-decoration: none;
        &:before {
          display: block;
          cursor: pointer;
          height: 40px;
          line-height: 40px;
          padding: 0 .6em;
          content: '\f002';
          font-family: 'FontAwesome';
          font-size: 20px;
          color: $white;
          background: $olive-green;
          border-radius: 4px;
        }
      }
    }
  }
}

.dropdown {
  position: absolute;
  top: 0;
  right: 10px;
  left: 0;
  outline: none;
  span {
    &.hasValue {
      &:before {
        content: '';
      }
    }
    display: block;
    cursor: pointer;
    border: 1px solid $border-color;
    color: $selection-color;
    font-weight: bold;
    font-size: 11px;
    text-transform: lowercase;
    line-height: 40px;
    padding: 0 1em;
    height: 40px;
    @include box-sizing(border-box);
    @include background-image(linear-gradient(top, #fff,#f3f3f3));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    &:before {
      cursor: pointer;
      content: attr(data-short-label);
    }
    &:after {
      position: absolute;
      top: 0;
      right: 10px;
      font-family: 'FontAwesome';
      content: '\f078';
      color: $olive-green;
    }
  }
  ul {
    opacity: 0;
    visibility: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 11px;
    top: 39px;
    right: 0;
    background: $white;
    border: 1px solid $border-color;
    @include transition(all 0.2s ease-in);
    z-index: 10;
    li a {
      display: block;
      padding: .8em 1em;
      text-decoration: none;
      color: $selection-color;
      text-transform: lowercase;
      &:hover {
        color: $white;
        background: $olive-green;
      }
    }
  }
  &.active {
    ul {
      opacity: 1;
      visibility: visible;
    }
  }
}

function DropDown(el, document) {
  this.dd = el;
  this.document = document;
  this.placeholder = this.dd.children('span');
  this.opts = this.dd.find('ul.dropdown > li');
  this.val = '';
  this.index = -1;
  this.initEvents();
}
DropDown.prototype = {
  initEvents : function() {
    var obj = this;

    obj.placeholder.on('click', function(event){
      event.preventDefault();
      event.stopPropagation();
      $(this).parent().toggleClass('active');
    });
    
    obj.placeholder.on('change', function(event) {
      $(this).removeClass('hasValue').addClass('hasValue');
      $(this).parent().removeClass('active');
    });
    
    $(obj.document).on('click', function(e) {
      if (!$(e.target).parents().andSelf().is(obj.dd)) {
        $(obj.dd).removeClass('active');
      }
    });

    obj.opts.on('click',function(event){
      event.preventDefault();
      var opt = $(this);
      obj.val = opt.text();
      obj.index = opt.index();
      obj.placeholder.text(obj.val);
      obj.placeholder.attr('title', obj.val);
      obj.placeholder.trigger('change');
    });
  },
  getValue : function() {
    return this.val;
  },
  getIndex : function() {
    return this.index;
  }
}

$(function() {
var outcomes = {
  'livingroom': {
  'warm': 'living room & warm',
  'relaxing': 'living room & relaxing',
  'calming': 'living room & calming'
  },
  'bedroom': {
  'warm': 'bedroom & warm',
  'relaxing': 'bedroom & relaxing',
  'calming': 'bedroom & calming'
  },
  'bathroom': {
  'warm': 'bathroom & warm',
  'relaxing': 'bathroom & relaxing'
  },
  'default': 'default'
};
  
  $('.dropdown').each(function() {
    var dd = new DropDown( $(this), window.document );
  });


  $('.outcome').on('click', function(event) {
    event.preventDefault();
    var container = $(this).parent().parent();
    var choice1 = $(container).find('.choice1');
    var choice2 = $(container).find('.choice2');
    var choice1Value = $(choice1).find('span').text();
    var choice2Value = $(choice2).find('span').text();
    if('' !== choice1Value && '' !== choice2Value) {
      console.log('choice1Value', choice1Value);
      console.log('choice2Value', choice2Value);
      var choicesMap = outcomes[choice1Value.toLowerCase()];
     
      var outcome = outcomes.default;
      if(choicesMap) {
        var choice = choicesMap[choice2Value.toLowerCase()];
        if(choice) {
          outcome = choice;
        }
      }

      alert(outcome);
    } else {
      alert('Please select both choices!');
    }
  });
});