$(document).ready(
  function() {
    // load shopping bag snippet
    $( "div#shoppingBag" ).load("minibag.html");

    // hide the modal content div
    $( "div#modalContent" ).hide();

    // attach onclick handlers for products
    $( ".productClick" ).click(
      function() {
        // show modal dialog
        $( "div#modalContent" ).load( "snippets/product.html",
          function() {
            // enable tabbed view
            $("#productViewRight > ul").tabs();

            // select first tab
            $("#productViewRight > ul").tabs( "select", 0 );

            // show modal
            showModal();
          }
        );
        return false;
      }
    );

    // attach onclick handlers for products
    $( ".productRatingSmall" ).click(
      function() {
        // show modal dialog
        $( "div#modalContent" ).load( "snippets/product.html",
          function() {
            // enable tabbed view
            $("#productViewRight > ul").tabs();

            // select first tab
            $("#productViewRight > ul").tabs( "select", 1 );

            // show modal
            showModal();
          }
        );
        return false;
      }
    );

  }
);

/**
* This function displays the modal product window and initializes
* various interactive elements within this window
*/
function showModal() {

            // show modal dialog
            $( "div#modalContent" ).modal( {
              onShow: function (dialog) {
                // make the modal dialog close when you click outside it
                dialog.overlay.one("click", function (e) {
                    $.modal.close();
                  }
                );

                // make the modal close when clicking the add to bag button
                $( "button.addToBag" ).click( function() {
                  $.modal.close();
                } );

                // take care of the size swatches
                $( "div#sizes button" ).attr( "class", "normal" );
                updateSizes( getAvailableSizes( "military-blue" ) );

                // add on click to rating stars
                $( "p.productRating" ).click( function() {
                  $( "div#productViewRight a[href='#productReviews']" ).click();
                } );

                // initialize alternative views
                initAlternativeViews();

                // initialize swatch rollover and selection
                initSwatchInteraction();

                // initialize size rollover and selection
                initSizeInteraction();

                // hide appropriate reviews sections
                $( "div#loginReview" ).hide();
                $( "div#writeReview" ).hide();

                // attach onclicks to reveal the proper reviews sections
                $( "#writeReviewLink" ).click( function() {
                  $( "div#reviewText" ).hide();
                  $( "div#loginReview" ).show();
                } );
                $( "#loginButton" ).click( function() {
                  $( "div#loginReview" ).hide();
                  $( "div#writeReview" ).show();
                } );
                $( "#backButton" ).click( function() {
                  $( "div#loginReview" ).hide();
                  $( "div#reviewText" ).show();
                } );
                $( "#submitButton" ).click( function() {
                  $( "div#writeReview" ).hide();
                  $( "div#reviewText" ).show();
                } );
                $( "#cancelButton" ).click( function() {
                  $( "div#writeReview" ).hide();
                  $( "div#reviewText" ).show();
                } );

              }
            });

}

// some global defaults used by the following two functions
  var defaultImageSrc;
  var selectedSwatch;
  var defaultSwatch;

function initAlternativeViews() {
  // add mouseovers for alt views
  defaultImageSrc = $( "img#mainProductImage" ).get(0).src;
  $( "div.altView img" ).mouseover( function() {
      defaultImageSrc = $( "img#mainProductImage" ).get(0).src;
      $( this ).attr( "class", "selected" );
      $( "img#mainProductImage" ).get(0).src = $( this ).get(0).src;
      } );
  $( "div.altView img" ).mouseout( function() {
      $( this ).removeAttr( "class" );
      $( "img#mainProductImage" ).get(0).src = defaultImageSrc;
      } );
}

function initSwatchInteraction() {
  selectedSwatch = "military-blue";
  defaultSwatch = "military blue";

  // add mouseover/onclick for swatches
  $( "div#swatches input" ).mouseover( function() {
      // set the selected class
      $( this ).attr( "class", "selected" );

      // update the image
      var alt = $( this ).get(0).alt;
      _alt = alt.replace( " ", "-" );
      var newSrc = "images/productPage/sweater1_" + _alt + ".jpg";
      $( "img#mainProductImage" ).get(0).src = newSrc;

      // update the text
      $( "span#selectedColorText" ).html( alt );

      // update the sizes
      updateSizes( getAvailableSizes( _alt ) );
      } );
  $( "div#swatches input" ).mouseout( function() {
      // remove selected class (if it's not set)
      if( this.id != selectedSwatch ) {
      $( this ).removeAttr( "class" );
      }

      // update the image
      $( "img#mainProductImage" ).get(0).src = defaultImageSrc;

      // update the text
      $( "span#selectedColorText" ).html( defaultSwatch );

      // update the sizes
      updateSizes( getAvailableSizes( selectedSwatch ) );
      } );

  $( "div#swatches input" ).click( function() {
      // clear other selected
      $( "div#swatches input" ).removeAttr( "class" );

      // set this one as selected
      $( this ).attr( "class", "selected" );

      // update the image
      alt = $( this ).get(0).alt;
      _alt = alt.replace( " ", "-" );
      newSrc = "images/productPage/sweater1_" + _alt + ".jpg";
      $( "img#mainProductImage" ).get(0).src = newSrc;

      // update the text
      $( "span#selectedColorText" ).html( alt );

      // update defaults
      defaultImageSrc = newSrc;
      selectedSwatch = _alt;
      defaultSwatch  = alt;
      } );
}

function initSizeInteraction() {
  var selectedSize="";

  // add mouseover/onclick for size swatches
  $( "div#sizes button" ).mouseover( function() {
      // set the selected class, if this isn't soldOut
      if( $( this ).attr( "class" ) != "soldOut" ) $( this ).attr( "class", "selected" );
      } );
  $( "div#sizes button" ).mouseout( function() {
      // unset the selected class, if not soldOut and unselected
      if( $( this ).attr( "class" ) != "soldOut" ) {
        if( this.id != selectedSize ) {
          $( this ).attr( "class", "normal" );
        }
      }
      } );
  $( "div#sizes button" ).click( function() {
      // clear any other selection
      $( "div#sizes button[class='selected']" ).attr( "class", "normal" );

      // set this as selected
      if( $( this ).attr( "class" ) != "soldOut" ) {
        $( this ).attr( "class", "selected" );
        selectedSize = this.id;
      }
      } );
}

function getAvailableSizes( itemColor ) {
  if( itemColor == "military-blue" ) {
    return [1,1,1,1,1,0];
  } else if( itemColor == "rose-petal" ) {
    return [0,1,1,1,0,1];
  } else if( itemColor == "off-white" ) {
    return [0,0,1,1,1,1];
  } else if( itemColor == "heather-gray" ) {
    return [1,1,0,1,1,0];
  }
}

function updateSizes( availableSizes ) {
  $( "div#sizes button" ).each( function(i) {
    if( availableSizes[ i ] == 0 ) {
      $( this ).attr( "class", "soldOut" );
    } else {
      if( $(this).attr( "class" ) == "soldOut" ) $(this).attr("class","normal");
    }
  } );
}