var doorStyles = {
	
	setGlobals: function() {
		curRel="";
		isCentered=false;
		killstyles=false;
	},
	
	setHardwareSelectedStates: function(position) {
		$myLink = $('#hardware-window-bottom .hardware-image a[rel="'+curRel+'"]');
		$myLink.click(function() {
			return false;
		});
	
		specifiedPosition = position + '';
		if(specifiedPosition === 'top'){
			$('.hardware-image a:not(a[rel="'+curRel+'"])').removeClass('top-selected');
			$myLink.addClass('top-selected');
			//console.log('yes top!');
		}else if(specifiedPosition === 'bottom'){
			$('.hardware-image a:not(a[rel="'+curRel+'"])').removeClass('bottom-selected');
			$myLink.addClass('bottom-selected');
			//console.log('yes bottom!');
		};
	
	},
	
	setHardwareDraggable: function() {
		$('.draggable').draggable({
				revert: 'invalid',
				helper: 'clone',
				appendTo: '#content-inner-wrapper',
				start: function(event, ui) {
					curRel = $(this).find('a').attr('rel');
					if($(this).hasClass('centered')){
						isCentered=true;
					}else{
						isCentered=false;
					}
				}
				
		});
	},
	
	setHardwareDroppable: function() {
		$('.droppable-top').droppable({
			tolerance: 'pointer',
			hoverClass: 'ui-droppable-hover-top',
			drop: function(event, ui) {
				doorStyles.setHardwareSelectedStates('top');
				$(this).html('<div class="placed-hardware-wrapper"></div>'); //<div class="placed-hardware-wrapper"><img src="/images/pic/hardware/visualizer/drawer/' + curRel + '.png" alt="" /></div>
				var img = new Image();
				$(img).load(function () {
		            //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
		            $(this).hide();
		            $('#dfa-wrapper .top-hardware .placed-hardware-wrapper').removeClass('loading').append(this);
		            $(this).show();
		        }).error(function () {
		            // notify the user that the image could not be loaded
		        }).attr('src', '/images/pic/hardware/visualizer/drawer/' + curRel + '.png'); //http://farm3.static.flickr.com/2405/2238919394_4c9b5aa921_o.jpg
			}
		});
		$('.droppable-bottom').droppable({
			tolerance: 'pointer',
			hoverClass: 'ui-droppable-hover-bottom',
			drop: function(event, ui) {
				doorStyles.setHardwareSelectedStates('bottom');
				$(this).html('<div class="placed-hardware-wrapper"></div>'); //$(this).html('<div class="placed-hardware-wrapper"><img src="/images/pic/hardware/visualizer/door/' + curRel + '.png" alt="" /></div>');
				var img = new Image();
				$(img).load(function () {
		            //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
		            $(this).hide();
		            $('#dfa-wrapper .bottom-hardware .placed-hardware-wrapper').removeClass('loading').append(this);
		            $(this).show();
		        }).error(function () {
		            // notify the user that the image could not be loaded
		        }).attr('src', '/images/pic/hardware/visualizer/door/' + curRel + '.png'); 
				$(this).removeClass('centered');
				if(isCentered === true){
					$(this).addClass('centered');
				}
				
			}
		});
	},
	
	parentNeedsPositionScroll: function() {
		$('#hardware-window-bottom').bind('scrollstart', function() {
			if(killstyles === false) {
				killstyles = true;
				$('.needs-position-adjusted').css({'position':'static'});
				$('.tools-response').css({'display':'none'});
			}
		});
		
		$('#hardware-window-bottom').bind('scrollstop', function(e) {
			killstyles = false;
		});
	}
	
};

$('document').ready(function() {
	doorStyles.setGlobals();
	doorStyles.setHardwareDraggable();
	doorStyles.setHardwareDroppable();
	doorStyles.parentNeedsPositionScroll();
});
