myDesign = {}

function itemIsInMyDesign(newItem) {
    newLink = newItem.find('div.ProductActionAdd a')[0].href;
    links = myDesign.find('a.cartLink');

    for(var i = 0; i < links.length; i++)
	if(links[i].href == newLink)
	    return true;

    return false;
}

function updateMyDesignTotalPrice() {
    var totalPrice = 0;
    myDesign.find('span.myDesignItemPrice').each(function(i, item) {
	totalPrice += parseFloat($(item).text().slice(1));
    });

    $('span#myDesignTotalPrice').text('Total: $' + totalPrice.toFixed(2));
}

function updateMyDesignImageSizes() {
    var totalWidth = myDesign.width();
    var itemWidth = Math.floor(totalWidth / numItemsInMyDesign - 20);
    if(itemWidth > 150)
	itemWidth = 150;

    myDesign.find('div.myDesignItem').width(itemWidth);
    $('div#Container').css({ 'margin-top': $('div#myDesignContainer').height() + 10 + "px" });
}

function saveMyDesignToCookie() {
    var names = myDesign.find('span.myDesignItemName');
    var images = myDesign.find('a.myDesignItemProductLink img');
    var productLinks = myDesign.find('a.myDesignItemProductLink').attr('href');
    var cartLinks = myDesign.find('a.cartLink');
    var prices = myDesign.find('span.myDesignItemPrice');

    var data = new Array();

    for(var i = 0; i < names.size(); i++)
	data.push({
	    name: $(names[i]).text(),
	    image: images[i].src,
	    price: $(prices[i]).text(),
	    cartLink: $(cartLinks[i]).attr('href'),
	    productLink: productLinks[i]
	});

    $.cookie('myDesign', $.toJSON(data), { expires: 1 });
}

function loadMyDesignFromCookie() {
    var cookie = $.cookie('myDesign');
    if(!cookie)
	return;

    var data = $.evalJSON(cookie);
    for(var i = 0; i < data.length; i++) {
	var img = $('<img>', {
	    src: data[i].image,
	    width: '100%',
	}).load(function() {
	    updateMyDesignImageSizes();
	});

	var a = $('<a>', {
	    'class': 'myDesignItemProductLink',
	    href: data[i].productLink
	}).append(img);

	var aCart = $('<a>', {
	    'class': 'cartLink',
	    href: data[i].cartLink,
	    style: 'display: none'
	});

	var info = $('<span>', { 'class': 'myDesignItemInfo' });
	info.append($('<span>', { 'class': 'myDesignItemName'}).html(data[i].name + '<br />'));
	info.append($('<span>', { 'class': 'myDesignItemPrice'}).text(data[i].price));

	var removeButton = $('<a>', {
	    'class': 'myDesignItemRemoveButton',
	    style: 'display: none',
	    href: '#',
	}).append($('img#myDesignRemoveButton:first').clone().show()).click(function() {
	    removeMyDesignItem($(this).parents('div.myDesignItem'));
	    return false;
	});

	var myDesignItem = $('<div>', { 'class': 'myDesignItem' })
	    .append(removeButton).append(a).append($('<br />')).append(info).append(aCart);

	myDesignItem.find('a.myDesignItemProductLink img:first').css({ width: '100%' });

	myDesignItem.hover(function() {
	    $(this).find('a.myDesignItemRemoveButton').show();
	}, function() {
	    $(this).find('a.myDesignItemRemoveButton').hide();
	});

	myDesign.append(myDesignItem);
	numItemsInMyDesign++;
	updateMyDesignImageSizes();
	updateMyDesignTotalPrice();
	$('p#myDesignMessage').hide();
    }
}

function removeMyDesignItem(item) {
    $(item).remove();
    numItemsInMyDesign--;
    updateMyDesignImageSizes();
    updateMyDesignTotalPrice();
    saveMyDesignToCookie();

    if(numItemsInMyDesign == 0)
	$('p#myDesignMessage').show();
}

function addToMyDesign(item) {
    if(itemIsInMyDesign(item))
	return;

    var img = item.find('div.ProductImage img').clone();

    var a = $('<a>', {
	'class': 'myDesignItemProductLink',
	href: item.find('a')[0].href
    }).append(img);

    var aCart = $('<a>', {
	'class': 'cartLink',
	style: 'display: none',
	href: item.find('a[href*="cart.php"]').attr('href')
    });

    var price = item.find('div.ProductPriceRating em').text();
    var name = item.find('div.ProductDetails strong').text();

    var info = $('<span>', { 'class': 'myDesignItemInfo' });
    info.append($('<span>', { 'class': 'myDesignItemName' }).html(name + '<br />'));
    info.append($('<span>', { 'class': 'myDesignItemPrice' }).text(price));

    var removeButton = $('<a>', {
	'class': 'myDesignItemRemoveButton',
	style: 'display: none',
	href: '#',
    }).append($('img#myDesignRemoveButton:first').clone().show()).click(function() {
	removeMyDesignItem($(this).parents('div.myDesignItem'));
	return false;
    });

    var myDesignItem = $('<div>', { 'class': 'myDesignItem' })
	.append(removeButton).append(a).append($('<br />')).append(info).append(aCart);
    myDesignItem.find('a.myDesignItemProductLink img:first').css({ width: '100%' });

    myDesignItem.hover(function() {
	$(this).find('a.myDesignItemRemoveButton').show();
    }, function() {
	$(this).find('a.myDesignItemRemoveButton').hide();
    });

    myDesign.append(myDesignItem);
    numItemsInMyDesign++;
    updateMyDesignImageSizes();
    updateMyDesignTotalPrice();
    saveMyDesignToCookie();
    $('p#myDesignMessage').hide();
}

function addMyDesignToCart() {
    var cartLinks = myDesign.find('a.cartLink');
    var numItems = cartLinks.size();

    var i = 0;
    var f = function(data) {
	if(++i < numItems)
	    $.get($(cartLinks[i]).attr('href'), f);
	else
	    window.location.pathname = '/cart.php';
    }

    $.get($(cartLinks[i]).attr('href'), f);
    
    return false;
}

$(function() {
    myDesign = $('div#myDesign');
    numItemsInMyDesign = 0;

    if(location.pathname == "/doodle-daddles/") {
	$('div#CategoryContent li').width('180px');

	$('div.CategoryContent ul.ProductList li').addClass("ui-widget-content").draggable({
	    revert: true
	});

	$('div#myDesignContainer').show().droppable({
	    drop: function(event, ui) {
            addToMyDesign(ui.draggable);
	    }
	});

	$('a#addMyDesignToCart').click(addMyDesignToCart);

	var a = $('<a>', {
	    href: '#',
	    'class': 'addToMyDesignLink',
	}).text("Add to my design").click(function() {
	    addToMyDesign($(this).parents('li'));
	    return false;
	});

	$('div.ProductCompareButton').html('').each(function(i, div) {
	    $(div).append(a.clone(true));
	});

	loadMyDesignFromCookie();
	updateMyDesignImageSizes();
    } else
	myDesign.hide();
});