//-------------------------Image Click & Hover Events------------------------------------/
//-------------------------Code Author: Stephen Pryor------------------------------------/
function switchModelImage()
  {
    $('.displaySmallModel').hover(function(){
      var newSRC = $(this).attr('src');
      $('#displayLargeModel').attr('src', newSRC);
    });
  }
  
  function showModels()
  {
    var offsetX = 10;
	  var offsetY = 20;
	  
	  $('a.showModelHover').hover(
      function(e){
  	    $('#showModel').remove();
    	  var urls = $(this).attr('title');
        var imagePaths = urls.split("|");
        var element = $(this);
        var offset = element.offset();
        
        $('<div id="showModel" style="padding: 5px; background-color: #FFF; border: 1px solid #888; text-align: left; position: absolute;"></div>')
    		.css('top', offset.top - 86)
    		.css('left', offset.left + 100)
    		.hide().appendTo('body').show();
    		
    		var last = '';
    		$('<table><tr id=\"smallImageTable">').appendTo('#showModel').show();
    		for (x in imagePaths)
        {
          if(last != imagePaths[x])
          {
            $('<td><img class="displaySmallModel" src="' + imagePaths[x] + '" alt="Model" height="100" width="100" style="display: inline; border: none;" ></td>').appendTo('#smallImageTable').show();
            last = imagePaths[x];
          }
        }
        $('</tr></table>').appendTo('#showModel').show();
    		$('<img id="displayLargeModel" src="' + imagePaths[0] + '" alt="Model" style="display: block; border: none;"><br />').appendTo('#showModel').show();
        switchModelImage();
        
        $('html').mousedown(function(){
          $('#showModel').remove();
          return false;
        });
        
        $('#showModel').hover(function(){
          $(this).css('cursor', 'pointer');
        });
        
        $(this).click(function(){
          $('#showModel').remove();
          return false;
        });
        
        $('#showModel').click(function(){
          $(this).remove();
        });
        
        return false;
    }
    );
  }
  
  $(document).ready(function(){
    showModels();
  });