var isZoom = false;
var webService = 'Services/';
var colourNotAvailable = '';
var productTitle;
var browserTitle;
var colourPlaceholder = '[!--colour--!]';
function zoom(src)
{    
    if (isZoom)
    {
        isZoom = false;
        $('.zoomImage').fadeOut(500);
        $('.productImage').fadeIn(500);
        $('.productImage').fadeTo(100, 1);
    }
    else        
    {        
        isZoom = true;
        
        var zoomImage = $('.zoomImage');
        
        if (zoomImage.length > 0)
        {
            var thumbImage = $('.productImage');
            var container = $('#image');
            var inner = $('#image .inner');
               
            var width = thumbImage.width();
            var height = thumbImage.height();
                        
            container.css({width : width, height: height, overflow: 'hidden'});
            inner.css({left: width - zoomImage.width(), top: height - zoomImage.height(), width: (zoomImage.width() * 2) - width, height: (zoomImage.height() * 2) - height});
            zoomImage.css({left: (zoomImage.width() / 2) - (width / 2), top: (zoomImage.height() / 2) - (height / 2)});            
            zoomImage.fadeIn(500).fadeTo(100, 1);
            thumbImage.fadeOut(500);
        }
        else
        {
            $('.productImage').fadeTo(100, 0.50);
            $('.loading').show();
            
            var image = new Image();
            
            $(image)
            .load(function()
            {                                
                var zoomImage = $(this);
                var thumbImage = $('.productImage');
                var container = $('#image');
                var inner = $('#image .inner');
                
                inner.append(zoomImage);
                   
                var width = thumbImage.width();
                var height = thumbImage.height();
                                                                                
                zoomImage.draggable({
                    helper: 'original',
                    containment: '#image .inner',
                    scroll: false
                });
                
                container.css({width : width, height: height, overflow: 'hidden'});
                inner.css({left: width - zoomImage.width(), top: height - zoomImage.height(), width: (zoomImage.width() * 2) - width, height: (zoomImage.height() * 2) - height});
                zoomImage.css({left: (zoomImage.width() / 2) - (width / 2), top: (zoomImage.height() / 2) - (height / 2)});
                                                           
                zoomImage.fadeIn(500);                    
                thumbImage.fadeOut(500);
                $('.loading').hide();
                
                zoomImage.unbind('load');
            })
            
            .fadeOut(500)
            .attr('src', src)
            .attr('alt', $('.productImage').attr('alt') + ' Zoom')
            .addClass('zoomImage');
        }                
    }
    
    $('.zoom .In').toggle();
    $('.zoom .Out').toggle();
}


function changeColour(ui, id, colourId)
{

    $('.product_title h1')[0].innerHTML = productTitle.replace(colourPlaceholder, ui.title);
    document.title =  browserTitle.replace(colourPlaceholder, ui.title); 

    $('.zoomImage').fadeTo(100, 0.50);
    $('.productImage').fadeTo(100, 0.50);
    $('.loading').show();

    $('.product_thumb .colours').attr('value', ui.title);
           
    $('.option_thumb .item').each(function(i)
    {
        if (this.title != '')
        {                           
            $.ajax({
                type: "POST",
                url: webService + "Product.asmx/GetImage",
                data: "{\"ProductId\":" + parseInt(this.title) + ",\"ImageTypeId\":22,\"AttributeId\":\"" + colourId + "\"}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(result) {
                    var data = JSON.parse(this.data);
                    var product = $('.option_thumb .item[title="' + data.ProductId + '"]');
                    if (product != null)
                    {
                        var sQS = document.location.search.toLowerCase();
                        if (result == '')
                        {
                            if (sQS != '')
                            {
                                var oQS = new Querystring();
                                if (oQS.contains('colour'))
                                {
                                    sQS = sQS.replace('colour=' + oQS.get('colour'), '');
                                }
                            }                                                    
                            product.children('a').children('img').attr('src', colourNotAvailable);
                            product.children('a').children('img').attr('alt', "Not available in " + ui.title);
                        }
                        else                        
                        {                            
                            if (sQS != '')
                            {
                                var oQS = new Querystring();
                                if (oQS.contains('colour'))
                                {
                                    sQS = sQS.replace('colour=' + oQS.get('colour'), 'colour=' + ui.title);
                                }
                                else
                                {
                                    sQS += '&colour=' + ui.title;
                                }
                            }
                            else
                            {
                                sQS = '?colour=' + ui.title;
                            }                                                        
                            product.children('a').children('img').attr('src', result);
                            var sAlt = product.children('a').children('img').attr('alt');                            
                            product.children('a').children('img').attr('alt', ui.title + ' ' + sAlt.substr(sAlt.indexOf('-')));
                        }
                        var link = product.children('a');
                        var href = link.attr('href');
                        if (href.indexOf('?') >= 0)
                        {
                            href = href.substr(0, href.indexOf('?'));
                        }
                        link.attr('href', href + sQS.toLowerCase());
                    }
                }
            });
        }
    });

    $.ajax({
        type: "POST",
        url:  webService + "Product.asmx/GetImage",
        data: "{\"ProductId\":" + id + ",\"ImageTypeId\":23,\"AttributeId\":\"" + colourId + "\"}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(result) {
            $('.productImage').attr('src', result);
        }
    });
    
    $.ajax({
        type: "POST",
        url:  webService + "Product.asmx/GetImage",
        data: "{\"ProductId\":" + id + ",\"ImageTypeId\":24,\"AttributeId\":\"" + colourId + "\"}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(result) {           
            isZoom = false;
            
            var zoomImage = $('.zoomImage');
            zoomImage.fadeOut(500);
            
            if (result != '')
            {
                zoomImage.attr('src', result);
                $('.zoom .In').attr('href', 'javascript:zoom(\'' + result + '\');');
                $('.zoom').show();
            }
            else
            {
                zoomImage.remove();
                $('.zoom').hide();
            }
            
            $('.productImage').fadeIn(500).fadeTo(100, 1);
            
            $('.zoom .Out').hide();
            $('.zoom .In').show();
                        
            $('.loading').hide();
        }
    });
    
    $.ajax({
        type: "POST",
        url:  webService + "EvedenServices.asmx/ProductMatrix",
        data: "{\"Key\":\"" + key + "\",\"ProductId\":" + id +",\"ColourId\":\"" + colourId + "\"}",
        contentType: "application/json; charset=utf-8",
        dataType: "html",
        success: function(result) {
            $('#matrix_' + id).replaceWith($.parseJSON(result));
        }
    });
        
    return false;
}