/******************************************************************************
 ** Eyewear Frame Selection Page
 ** Requires: jquery ui
 *****************************************************************************/

(function ($) { // protect the namespace

$.widget( "ui.eyewearFrameSelect", {

  _init: function () {

    var self = this;
    var state = $.extend(true, { ui: {} }, this.options);
    self._setData('state', state);

    var color_dropdown = $( '*[name="eyewear_color"]', self.element )[0];
    var size_dropdown = $( '*[name="eyewear_id"]', self.element )[0];
    var rx_type_dropdown = $( '*[name="rx_type_id"]', self.element )[0];

    state.ui.dropdowns = $( '*[name="eyewear_color"]', self.element )
                      .add( '*[name="eyewear_id"]', self.element )
                      .add( '*[name="rx_type_id"]', self.element );

    // When the ui.selectmenus finish populating,
    // try to select the default eyewear color and size in the dropdowns.
    // If we can't find the default, fall back to the first option.

    $( color_dropdown ).bind( 'choiceTree.populate', function() {
      var index = $(this).find_option_index( state.default_eyewear_color );
      if (index < 0 && this.options.length > 1) index = 1;
      if (index >= 0) this.options.selectedIndex = index;
      return true;
    } );

    $( size_dropdown ).bind( 'choiceTree.populate', function() {
      var index = $(this).find_option_index( state.default_eyewear_id );
      if (index < 0 && this.options.length > 1) index = 1;
      if (index >= 0) this.options.selectedIndex = index;
      return true;
    } );

    // The $.choiceTree plugin restricts dropdown combinations to
    // the valid ones contained in state.choice_tree.

    self.element.choiceTree( {
      dropdowns : state.ui.dropdowns,
      tree      : state.choice_tree
    } );

    var change_event = 'change.' + self.widgetEventPrefix;

    $( color_dropdown ).bind( change_event, function() {
      return self.change_eyewear_id( size_dropdown );
    } );

    $( size_dropdown ).bind( change_event, function() {
      return self.change_eyewear_id( size_dropdown );
    } );

    // Disable the continue button until an rx type has been chosen.

    $( '.buttons-holder', self.element ).click( function() {
      if (!$(this).hasClass("ui-state-disabled"))
        self.element.submit();
      return false;
    } );

    $( rx_type_dropdown ).bind( change_event, function() {
      if ($(this).val() != '') {
        $( '.buttons-holder', self.element ).removeClass("greyed ui-state-disabled");
       }
      else {
        $( '.buttons-holder', self.element ).addClass("greyed ui-state-disabled");
       }
    } ).trigger(change_event);

    // Swap out the main product image on small image hover.

    $('#eyewear-front-image, #eyewear-side-image', self.element ).hover(
      function() { return self.hover_eyewear_image(this, true); },  // hover over
      function() { return self.hover_eyewear_image(this, false); }  // hover out 
    );

    // Setup ui.selectmenu on top of each dropdown.

    state.ui.selectmenus = {};

    $.each( state.ui.dropdowns, function(i,elem) {
      self.setup_selectmenu(elem);
    });

    // Whenever an underlying <select> is enabled or disabled,
    // the ui.selectmenu on top needs to be reinitialized.

    state.ui.dropdowns.bind( 'enable.choiceTree disable.choiceTree', function() {
      return self.setup_selectmenu(this);
    });

  },

  destroy: function () {
    var self = this;
    var state = self._getData('state');
    $.widget.prototype.destroy.apply( self, arguments );
  },


  setup_selectmenu: function(elem) {

    var self = this;
    var state = self._getData('state');
    var name = $(elem).attr('name');

    if ($.browser.msie && $.browser.version.substr(0,1)<7)
      return;

    if (state.ui.selectmenus[name]) {
      state.ui.selectmenus[name].selectmenu('destroy');
      state.ui.selectmenus[name] = null;
    }

    state.ui.selectmenus[name] = $(elem).selectmenu({
      style : 'dropdown',
      maxHeight : 300,
      menuWidth: 185
    });

  },


  change_eyewear_id: function(elem) {

    var self = this;
    var state = self._getData('state');

    var eyewear_id = $(elem).val();
    if (eyewear_id == '') eyewear_id = state.default_eyewear_id;
    var data = state.eyewear_data[eyewear_id];

    $( '*[name="pid"]', self.element ).val(eyewear_id);
    $( '#eyewear-quarter-image', self.element ).attr('src', data.quarter_image_url);
    $( '#eyewear-front-image', self.element ).attr('src', data.front_thumb_url);
    $( '#eyewear-side-image', self.element ).attr('src', data.side_thumb_url);
    $( '.eyewear-name', self.element ).html(data.name);
    $( '.eyewear-brand', self.element ).html(data.brand);
    $( '.eyewear-normal-price', self.element ).html(data.normal_price);
    $( '.eyewear-description', self.element ).html(data.description);

  },


  hover_eyewear_image: function(elem, flag) {

    var self = this;
    var state = self._getData('state');

    var eyewear_id = $('*[name="pid"]', self.element).val();
    var data = state.eyewear_data[eyewear_id];
    var image_src;

    if (flag) {
      var view = $(elem).attr('id').replace(/^eyewear-/,'').replace(/-image$/,'');
      image_src = data[view+'_image_url'];
    }
    else {
      image_src = data.quarter_image_url;
    }

    $('#eyewear-quarter-image', self.element ).attr('src', image_src);

  }

} );


$.extend( $.ui.eyewearFrameSelect, {
  version: "1.0",
  defaults: {
    eyewear_data: {},
    choice_tree: {},
    default_eyewear_id: 0,
    default_eyewear_color: 0
  }
});



})(jQuery); // function ($)