// Highslide setup
hs.graphicsDir = '/images/highslide/';
hs.showCredits = false;
hs.outlineType = 'rounded-white';

// Hold an array of all the stock levels for each size of the currently selected colour
var sizeStockLevels = new Array();

// Called when page load (DOM) complete
$(document).ready(function(){

    // Bind the Highslide function to the large image
    $('#lgeimage').parent().bind('click', function(){
        return hs.expand(this);
    });

    // Change the large image and link when a small image is clicked
    $('#thumbs a').bind('click', function(){
        
        var li = $('#lgeimage');
        li.attr('src', $(this).attr('href'));
        li.parent().attr('href', li.attr('src').replace(/280/gi, 480));
        return false;
        
    });
    
    $('#AddToBasket').bind('submit', function(){
    
        if($('#SizeID option:selected').val() == 0)
        {
            $('#SizeID').css('background-color', '#FBFF93');
            alert('Please select a size.');
            return false;
        }
        if ($('#SizeID option:selected').text().toLowerCase().indexOf("not available") > 0)
        {
          alert("Sorry, this size is currently not available");
          return false;
        }
    });
    
    // When the colour is changed
    $('#ColourID').bind('change', function(){
    
        var cid = parseInt($('#ColourID option:selected').val(), 10);
        ChangeColour(cid);
    });

    // When the size is changed
    $('#SizeID').bind('change', function(){
        ChangeSize();
    });

    // Hide all thumbnail links with a class beginning with colourX
    // and then show the ones for the default colour
    $('[class^=colour]').hide();
    $('.colour' + $('#DefaultColourID').val()).show();
    
    $('#sizechart').hide(); //.css('position', 'absolute').css('top', '100px').css('left', '100px').hide();
    $('#sizechartlink :first-child').bind('click', function(){
    
        $('#sizechart').show();

    });
    
    // Add function to do highslide zoom when clicking on the zoom in link
    $('#zoomin').bind('click' , function() {
      return(hs.expand(document.getElementById('lgeimagelink')));      
    }) 
    var cid = parseInt($('#ColourID option:selected').val(), 10);
    ChangeColour(cid);
});

function ChangeColour(cid)
{        
    var pid = parseInt($('#ProductID').val(), 10);
    
    // Hide all thumbnail links with a class beginning with colourX
    // and show just the ones for the selected colour
    $('[class^=colour]').hide();
    $('.colour' + cid).show();
    
    var li = $('#lgeimage');
    li.attr('src', $($('.colour' + cid)[0]).attr('href'));
    li.parent().attr('href', li.attr('src').replace(/280/gi, 480));

    if(cid == 0)
    {
        $('#SizeID').html('<option value="0">--</option>');
        $('#SizeID, #Quantity').attr('disabled', 'disabled');
        $('#SizeID :first-child, #Quantity :first-child').attr('selected', 'selected');
    }
    else
    {
        $.post('/ajax_get_size.aspx', { colourid: cid, productid: pid }, function(data) {
        
            var s = data.split('|');
            var o = '<option value="0">--</option>';
            var size;
            var monthsReg = new RegExp(" months");
            var dash = " - ";
            
            sizeStockLevels.length = 0;
            for(var e=0; e<s.length; e++)
            {
                size = s[e].split(':');
                if (String(size[1]).match(monthsReg))
                  dash = "-";
                else  
                  dash = " - ";
                o += '<option value="' + size[0] + '">' + ((Number(size[2]) < 1) ? (String(size[1]).replace(monthsReg, " mths") + dash + 'not available') : String(size[1]).replace(monthsReg, " mths")) + '</option>';
                sizeStockLevels.push(Number(size[2]));
            }                                                                                    
            
            $('#SizeID').hide();
            $('#SizeID').html(o).removeAttr('disabled');
            $('#SizeID').show();
            
            $('#Quantity').removeAttr('disabled');
            $('#Quantity :first-child').removeAttr('selected');
            
        });
    }
    $('#ColourID').val(cid);
    $('#shownincolour').text($('#ColourID option:selected').text());
}

function ChangeSize()
{
  var o = "";
  var stockLevel = sizeStockLevels[document.getElementById('SizeID').selectedIndex - 1];
  if (stockLevel > 5)
    stockLevel = 5;
  for (var qCount = 1; qCount <= stockLevel; qCount++)
  {
    o += '<option value="' + String(qCount) + '">' + String(qCount) + '</option>';
  }
  $('#Quantity').html(o);
  
}