var positions = new Array('left', 'right');

positions['left'] = new Array('x', 'y');
positions['right'] = new Array('x', 'y');
positions['left']['x'] = 53;
positions['left']['y'] = 134;
positions['right']['x'] = 110;
positions['right']['y'] = 132;


var popits = new Array();
popits['left'] = '';
popits['right'] = '';

var preview = false;
var dragging = false;

function pngfix() {
  var arVersion = navigator.appVersion.split("MSIE")
  var version = parseFloat(arVersion[1])

  if ((version >= 5.5) && (document.body.filters)) 
  {
     for(var i=0; i<document.images.length; i++)
     {
        var img = document.images[i]
        var imgName = img.src.toUpperCase()
        if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
        {
           var imgID = (img.id) ? "id='" + img.id + "' alt='" + img.alt + "' src='" + img.src + "'" : ""
           var imgClass = (img.className) ? "class='" + img.className + "' " : ""
           var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
           var imgStyle = "display:inline-block;" + img.style.cssText 
           if (img.align == "left") imgStyle = "float:left;" + imgStyle
           if (img.align == "right") imgStyle = "float:right;" + imgStyle
           if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
           var strNewHTML = "<span " + imgID + imgClass + imgTitle
           + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
           + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
           + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
           img.outerHTML = strNewHTML
           i = i-1
        }
     }
  }
}
function calculate_price() {
  var price = base_price;
  var left_popit = $('#hidden-left-popit').val();
  var right_popit = $('#hidden-right-popit').val();
  var size = $('#hidden-size').val();
  var color = $('#hidden-color').val();
  
  if (left_popit != '')
    price = price+attributes[left_popit];
    
  if (right_popit != '')
    price = price+attributes[right_popit];
  
  if (size != '')
    price = price+attributes[size];
  
  if (color != '')
    price = price+attributes[color];

  return '$'+price;
}

function set_price() {
  $('#price').text(calculate_price());
}

function update_size(id,size) {
  $('#detail-size').html('<img src="images/Size_'+size+'.png" width="24" height="24" />');
  $('input#hidden-size').val(id);
  
  set_price();
}

var shoe_color = '';
var shoe_id = '';

function update_shoe(e) {
  $('#shoe-container').css('background-image', 'url(images/FlipFlop_'+shoe_color+'.png)');
  $('#detail-color').html('<img src="images/Color_'+shoe_color+'.png" width="24" height="24" />');
  $('input#hidden-color').val(shoe_id);
  
  set_price();
  shoe_color = '';
  shoe_id = '';
}

function update_color(id,color) {
  shoe_color = color;
  shoe_id = id;
  
  var shoe = new Image();
  shoe.onload = update_shoe;
  shoe.src = 'images/FlipFlop_'+color+'.png';
}

function order() {
  var error = '';
  var left_popit = $('#hidden-left-popit').val();
  var right_popit = $('#hidden-right-popit').val();
  var size = $('#hidden-size').val();
  var color = $('#hidden-color').val();
  
  if (left_popit == '')
    error += "* Please select a popit for the left flip-flop.\n";
    
  if (right_popit == '')
    error += "* Please select a popit for the right flip-flop.\n";
    
  if (size == '')
    error += "* Please select the size of your flip-flops.\n";
    
  if (color == '')
    error += "* Please select a color for your flip-flops.\n";
    
  if (error != '') {
    alert(error);
    return false;
  } else {
    return true;
  }
}

$(document).ready(function() {
  if ($.browser.msie) pngfix();
  
  $('#popit-left').css("left", (positions['left']['x']-30));
  $('#popit-left').css("top", (positions['left']['y']-30));
  $('#popit-right').css("left", (positions['right']['x']-30));
  $('#popit-right').css("top", (positions['right']['y']-30));
  
  $('.popit').draggable({
    helper: 'clone',
    zIndex: 999,
    start: function(e, ui) {
      $(ui.helper[0]).attr('class', 'popit-dragged').css('z-index','99999');
      dragging = true;
      preview = false;
      $('#preview-window').css('display','none');
    },
    drag: function(e, ui) {
      dragging = true;
      preview = false;
      $('#preview-window').css('display','none');
    },
    stop: function(e, ui) {
      dragging = false;
    }
  })
  .bind('mouseover', function(e) {
    var top = e.pageY-210;
    var left = e.pageX-210;
    
    if (!dragging) {
      preview = true;
      $('#preview-window').html('<img src="'+$(this).attr('src')+'" />').css('left',left).css('top',top).css('display','block');
    }
  })
  .bind('mousemove', function(e) {
    var top = e.pageY-210;
    var left = e.pageX-210;
    if (preview && !dragging)
      $('#preview-window').css('left',left).css('top',top);
  })
  .bind('mouseout', function(e) {
    preview = false;
    $('#preview-window').css('display','none');
  });
  $('.shoe').droppable({
    tolerance: 'pointer',
    accept: '.popit',
    drop: function(ev, ui) {
            var pos = '';
            
            if ($(this).attr('id') == 'shoe-left') {
              pos = 'left';
              alt = 'LFT';
            } else {
              pos = 'right';
              alt = 'RT';
            }

            if ($.browser.msie) {
              var pngfix = 'style="display:inline-block;';
              var img = $('#popit-'+pos)[0];
              var src = 'images/'+$(ui.draggable).attr('alt')+'-'+alt+'.png';
              var strNewHTML = '<span class="popit-dragged"' 
              + " style=\"display:inline-block;width:60px; height:60px;"
              + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
              + "(src=\'" + src + "\', sizingMethod='scale');\"></span>" 
              $('#popit-'+pos).html(strNewHTML);
            } else {
              $('#popit-'+pos).html('<img src="images/'+$(ui.draggable).attr('alt')+'-'+alt+'.png" class="popit-dragged" />');
            }

            $('#hidden-'+pos+'-popit').val(popit_map[$(ui.draggable).attr('alt')][pos]);
            $('#detail-'+pos+'-popit').html('<img src="images/'+$(ui.draggable).attr('alt')+'.png" class="popit-tiny" />');
                       
            set_price();
          }
	});
  
  set_price();
  
  
});