$(document).ready(function(){
	
	$('input[name=EMAIL]').attr('placeholder', 'Email address');
	
	$('[placeholder]').focus(function() {
		var input = $(this);
		if (input.val() == input.attr('placeholder')) {
	    	input.val('');
	    	input.removeClass('placeholder');
	    }
	}).blur(function() {
		var input = $(this);
		if (input.val() == '' || input.val() == input.attr('placeholder')) {
	    	input.addClass('placeholder');
	    	input.val(input.attr('placeholder'));
	  	}
	}).blur();
	
	var duration = 100;
	$('.collection-item > a').each(function () {
		var anchor = this;
		setTimeout(function(){fade_element_in(anchor, 800)}, duration);
		duration += 100;
	});
	
	$('.collection-item > a').click(function(e) {
		e.preventDefault();
		collection_item_clicked(this);
	});
	
	$('.designer > a').click(function(e) {
		e.preventDefault();
		designer_clicked(this);
	});
	
	$('#location-region').change(function(e) {
		var $region = $(this).val();
		
		$('.location').hide();
		
		$('.location').each(function () {
			if ($(this).hasClass($region)) {
				$(this).show();
			}
		});
	});
	
	$('#location-region').change();
	
	$('.designer > a').click(function (e) {
		e.preventDefault();
		
		if ($('img:first', this).hasClass('selected')) {
			$('img:first', this).removeClass('selected');
		}
		else {
			$('.designer > a img').removeClass('selected');
			$('img:first', this).addClass('selected');
		}
		
		$('.img_grayscale').each(function(){
			if (!$(this).hasClass('selected')) {
				$(this).stop().animate({opacity:0}, 300);
			}
		});
	});
	
	var duration = 400;
	$('.designer > a, .designer > a h1').each(function () {
		var anchor = this;
		setTimeout(function(){fade_element_in(anchor, 800)}, duration);
		duration += 200;
	});
	
	if (window.location.hash != 'no-item' && window.location.hash != '') {
		if ($(document.body).attr('id') == 'collections') {
			var hash = window.location.hash.substring(1, window.location.hash.length);
			var anchor = $('a[class='+hash+']');
			gallery_close();
			$(anchor).click();
		}
		else if ($(document.body).attr('id') == 'designers') {
			setTimeout(function() {
				var hash = window.location.hash.substring(1, window.location.hash.length);
				var anchor = $('a[class='+hash+']');
				$(anchor).click();
			}, 600);
		}
	}
});

function collection_item_clicked(link) {
    var item = $(link).parents('.collection-item');
    
    if($.browser.safari){ bodyelem = $('body') } else { bodyelem = $('html') }
    
    if($('.collection-item.open').length > 0) {
        if (item.hasClass('open')) {
            item.removeClass('open');
            item.find('.item-details').slideToggle(800);
            item.find('.item-spacer').slideToggle(800);
        }
        else {
            $('.collection-item.open').find('.item-details').slideToggle(800);
            $('.collection-item.open').find('.item-spacer').slideToggle(800, function() {
            	$('.collection-item.open').removeClass('open');
                var product_offset_top = item.offset().top,
                    current_offset = bodyelem.scrollTop();
                if((current_offset - product_offset_top) == 0 ) {
                    var scroll_duration = 0;
                } else {
                    var scroll_duration = 600;
                }
                bodyelem.animate({'scrollTop': product_offset_top }, scroll_duration, function() {
                    item.addClass('open');
                    item.find('.item-details').slideToggle(800);
                    item.find('.item-spacer').slideToggle(800);
                })
            });
        }
    } else if($('.collection-item.open').length == 0) {
        var product_offset_top = item.offset().top,
            current_offset = bodyelem.scrollTop();
        if((current_offset - product_offset_top) == 0 ) {
            var scroll_duration = 0;
        } else {
            var scroll_duration = 600;
        }
        bodyelem.animate({'scrollTop': product_offset_top }, scroll_duration, function() {
            item.addClass('open');
            item.find('.item-details').slideToggle(800);
            item.find('.item-spacer').slideToggle(800);
        });
    }
    
    window.location.hash = $(link).attr('class');
}

function designer_clicked(link) {
    var item = $(link).parents('.designer');
    
    if($.browser.safari){ bodyelem = $('body') } else { bodyelem = $('html') }
    
    if($('.designer.open').length > 0) {
        if (item.hasClass('open')) {
            item.removeClass('open');
            item.find('.designer-details').slideToggle(800);
            item.find('.details-spacer').slideToggle(800);
        }
        else {
            $('.designer.open').find('.designer-details').slideToggle(800);
            $('.designer.open').find('.details-spacer').slideToggle(800, function() {
            	$('.designer.open').removeClass('open');
                var product_offset_top = item.offset().top,
                    current_offset = bodyelem.scrollTop();
                if((current_offset - product_offset_top) == 0 ) {
                    var scroll_duration = 0;
                } else {
                    var scroll_duration = 600;
                }
                bodyelem.animate({'scrollTop': product_offset_top }, scroll_duration, function() {
                    item.addClass('open');
                    item.find('.designer-details').slideToggle(800);
                    item.find('.details-spacer').slideToggle(800);
                })
            });
        }
    } else if($('.designer.open').length == 0) {
        var product_offset_top = item.offset().top,
            current_offset = bodyelem.scrollTop();
        if((current_offset - product_offset_top) == 0 ) {
            var scroll_duration = 0;
        } else {
            var scroll_duration = 600;
        }
        bodyelem.animate({'scrollTop': product_offset_top }, scroll_duration, function() {
            item.addClass('open');
            item.find('.designer-details').slideToggle(800);
            item.find('.details-spacer').slideToggle(800);
        });
    }
    
    window.location.hash = $(link).attr('class');
}

function gallery_open(item) {
	var details = $('.item-details', $(item).parents('.collection-item'));
	
	if ($('.collection-item.open').length > 0) {
		$('.collection-item.open .item-details').stop().slideUp(800, 'easeOutQuad', function() {
			$('.collection-item.open .item-spacer').stop().slideUp(800, 'easeOutQuad');
			$(details).stop().slideDown(800, 'easeOutQuad');
			$('.item-spacer', $(item).parents('.collection-item')).slideDown(800, 'easeOutQuad');
			$(this).parents('.collection-item').removeClass('open');
		});
	}
	else {
		$(details).stop().slideDown(800, 'easeOutQuad');
		$('.item-spacer', $(item).parents('.collection-item')).slideDown(800, 'easeOutQuad');
	}
	
	window.location.hash = $(item).attr('name');
	$(item).parents('.collection-item').addClass('open');
}

function gallery_close(item) {
	var details = $('.item-details', $(item).parents('.collection-item'));
	$(details).stop().slideUp(800, 'easeOutQuad');
	$('.item-spacer', $(item).parents('.collection-item')).slideUp(800, 'easeOutQuad');
	$(item).parents('.collection-item').removeClass('open');
	window.location.hash = 'no-item';
}

function fade_element_in(element, duration) {
	$(element).fadeTo(duration, 1);
}

function designer_open(item) {
	var details = $('.designer-details', $(item).parents('.designer'));
	
	if ($('.designer.open').length > 0) {
		$('.designer.open .designer-details').stop().slideUp(800, 'easeOutQuad', function() {
			$('.designer.open .details-spacer').stop().slideUp(800, 'easeOutQuad');
			$(details).stop().slideDown(800, 'easeOutQuad');
			$('.details-spacer', $(item).parents('.designer')).slideDown(800, 'easeOutQuad');
			$(this).parents('.designer').removeClass('open');
		});
	}
	else {
		$(details).stop().slideDown(800, 'easeOutQuad');
		$('.details-spacer', $(item).parents('.designer')).slideDown(800, 'easeOutQuad');
	}
	
	$(item).parents('.designer').addClass('open');
}

function designer_close(item) {
	var details = $('.designer-details', $(item).parents('.designer'));
	$(details).stop().slideUp(800, 'easeOutQuad');
	$('.details-spacer', $(item).parents('.designer')).slideUp(800, 'easeOutQuad');
	$(item).parents('.designer').removeClass('open');
}

function grayscaleImageIE(imgObj)
{
    imgObj.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
}

function grayscale(src){
	var canvas = document.createElement('canvas');
	var ctx = canvas.getContext('2d');
	var imgObj = new Image();
	imgObj.src = src;
	canvas.width = imgObj.width;
	canvas.height = imgObj.height; 
	ctx.drawImage(imgObj, 0, 0); 
	var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
	for(var y = 0; y < imgPixels.height; y++){
		for(var x = 0; x < imgPixels.width; x++){
			var i = (y * 4) * imgPixels.width + x * 4;
			var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
			imgPixels.data[i] = avg; 
			imgPixels.data[i + 1] = avg; 
			imgPixels.data[i + 2] = avg;
		}
	}
	ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
	return canvas.toDataURL();
}

$(window).load(function() {
	if($.browser.msie){
		$('.designer > a img').each(function(){
			grayscaleImageIE(this);
		});
    }
    else {
		
		// clone image
		$('.designer > a img').each(function(){
			var el = $(this);
			el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
				var el = $(this);
				el.parent().css({"width":this.width,"height":this.height});
				el.dequeue();
			});
			this.src = grayscale(this.src);
		});
		
		
		// Fade image 
		$('.designer > a img').mouseover(function(){
			$(this).parent().find('img:first').stop().animate({opacity:1}, 300);
		})
		$('.img_grayscale').mouseout(function(){
			if (!$(this).hasClass('selected')) {
				$(this).stop().animate({opacity:0}, 300);
			}
		});
    }
});