(function($, $V){
	
	//Static Logger
	var log = $.Logging.getLogger('AlphabetCity.Views.Necklace');
	
	/** -   
	*	Necklace View    - 
	*/
	$V.Necklace$Class = {
	    constructor: function(options){
	        $.extend(this, $V.Necklace$Class);
	        $.extend(true, this, options);
	        this.initialized = false;
		},
		initialize: function(model){
			//for closures
			var _this = this;
			
			//create the dialog only if the current step
			//not the first step
			if(!this.initialized){
				this.initialized = true;
				$(this).dialog($.extend(this.dialogOptions||{}, { 
	                modal: true, 
	                resizable:false,
	                height: $(document).height(),
	                width: $(document).width(),
	                overlay: { 
	                    opacity: 0.2, 
	                    background: "black" 
	                }
	            }));
	            //create the tabs
			    $("#abc_blocks_tabs", $(this)).tabs();
			    
				
      }else{
      	$(this).dialog('open');
      }
	    	
		    //simple animation to present overlay
			$(this).show("clip", { 
		        direction: "horizontal" 
		    }, 1000);
		    $("#abc_container", $(this)).animate({
		    	height: $('#container').height()+20
		    }, 1400 );
		    
		    //freeze the height of the preview panel so fades are smooth
	    	//seems silly, maybe ask on jq list to
	    	//see if there is a better way to freeze
	    	//a div height
	    	$("#abc_step_preview", $(this)).height(
	    		$("#abc_step_preview", $(this)).height()
	    	);
			    
		    this.currentScreen = $("#abc_instructions");
		    //The Clasp preview is alway available
		    var setupClaspPreview = function(){
			    $("#abc_clasp_preview").one('mouseover', function(){
			    	$(_this.currentScreen).fadeOut('fast',function(){
			    		$("#abc_clasp", $(_this)).fadeIn('fast',function(){
			    			setupReturnToScreen();
			    		});
			    	});
			    });
		    };
		    var setupReturnToScreen = function(){
		    	$("#abc_step_preview").one('mouseover', function(){
			    	$("#abc_clasp", $(_this)).fadeOut('fast',function(){
			    		$(_this.currentScreen).fadeIn('fast', function(){
			    			setupClaspPreview();
			    		});
			    	});
		    	});
		    };
	    	setupClaspPreview();
	    	
		    //initiate the first step
		    this.beginStep(model);
		},
		beginStep: function(model){
			//for closures
			var _this = this;
			var i, necklace, message;
			var step = model.step;
			//block all the interface but the instructions
			//to help get their attention
			$("#abc_main_menu > ul > li").unblock().block();
			$("#abc_step_preview > div").hide();
			$("#abc_flow_buttons > ul > li").hide();
			if(step.buttons){
				$(step.buttons).each(function(index,value){
					$(value).show();
				});
			}
			if(model.check && model.check.flash && model.check.flash.length > 0){
				$("#abc_flash", this).text(model.check.flash.join("\n"));
			}else{
				$("#abc_flash", this).text("");
			}
			if(model.currentStep === 0){
					$("#abc_select_length").attr('value',"");
	    		$("#abc_block_pad >  *").not(".cursor, .template").remove();
				//define the instruction highlight so we can unlock the interface
				//and highlight the current step
				$(step.area).unblock();
				$("#abc_instruction_image > img", $(_this)).mouseover(function() { 
					
				    $(step.area, $(_this)).effect("highlight", { color: "#4EA8DE"}, 1400, function(){
				    	//$(step.area, $(_this)).effect("highlight", { color: "#4EA8DE"}, 1400);
				    }); 
				}).attr('src', step.image );
				//show the instructions for the step
				this.currentScreen = $("#abc_instructions").fadeIn('fast');
				
				//make them acknowledge the instruction
			    $("#abc_step_preview", $(_this)).one('mouseover',function(){
		    		//$("#abc_clasp", $(_this)).hide();
			    	$(step.preview, $(_this)).fadeOut('fast',function(){
			    		$("#abc_instructions", $(_this)).fadeIn('fast');
			    		//once they touch the current work area, give them
			    		//the specialized interface to aid their completion
			    		//of the step
				    	$(step.area, $(_this)).one('mouseover', function(){
					    	$("#abc_instructions", $(_this)).fadeOut('fast',function(){
					    		_this.currentScreen = $(step.preview, $(_this)).fadeIn('fast');
					    		$("#abc_instruction_image > img").unbind("mouseover");
					    	});
					    });
			    	});
			    });
	    	}else{
	    		$(step.area, $(_this)).unblock();
	    		$(step.area + " div.next", $(_this)).show().click(function(){
	    			$(this).hide();
    			});
			    $(step.area, $(_this)).effect("highlight", { color: "#4EA8DE"}, 1400, function(){}); 
			    _this.currentScreen = $(step.preview, $(_this)).fadeIn('fast'); 
			    if(model.currentStep === model.totalSteps-1){
			    	necklace = model.necklace;
			    	$("#abc_confirm_length",$(this)).text(necklace.$length+"\"");
			    	$("#abc_confirm_cord",$(this)).text(necklace.$cord);
			    	$("#abc_confirm_cost",$(this)).text("$"+(model.cost.toString().match(/(\.5)$/)?model.cost+'0':model.cost));
			    	message = "";
			    	for(i = 0;i<necklace.$block.length;i++){
			    		message += "<span class='"+(necklace.$block[i].metal == 'SILVER'?"silver":"gold")+"'>"
			    			+ necklace.$block[i].code
			    			+ "</span>";
			    	}
			    	var width = 0;
			    	$("#abc_confirm_blocks",$(this)).html(message);
			    	$("#abc_confirm_blocks > span",$(this)).each(function(){
			    		width += $(this).outerWidth()+7;
			    	});
			    	$("#abc_confirm_blocks",$(this)).width(width);
			    }
	    	}
		},
		updateBlocks: function(model){
			var newCursor, newBlock;
			if(model.flash){
				$("#abc_flash").text(model.flash.join("\n"));
			}else{$("#abc_flash").text(""); }
			if(model.necklace.$block.length > 9 ){
				$("#abc_block_pad", $(this)).width(620 + (model.necklace.$block.length-9)*70);
			}else{ $("#abc_block_pad", $(this)).width(620); }
			if(model.newBlock){
				$("#abc_blocks .cursor", $(this)).each(function(){
					//there should only be one cursor but
					//we use it as a clone to keep html out of our js
					newBlock = $(".template",$(this).parent()).clone();
					$(".letter",$(newBlock)).text(model.newBlock);
					$('input', $(newBlock)).attr("name","block/"+model.newBlockId+".abc");
					$(newBlock)
						.removeClass("template")
						.addClass("wrapper")
					.show();
					$(this).before(newBlock);
					$(newBlock).hover(function(){
						var _this = this;
						$("img.close", this).click(function(){
							$(".block",_this).removeClass('detail').addClass('simple');
						});
						$(".block",this).removeClass('simple').addClass('detail');
					},function(){
						$(".block",this).removeClass('detail').addClass('simple');
					});
					
				});
			}else if(model.removeBlock !== undefined){
				$($("#abc_block_pad > *").get(model.removeBlock)).remove();
			}else if(model.setCursor !== undefined){
				$("#abc_block_pad .cursor", $(this)).each(function(){
					newCursor = $(this).clone();
					if(model.back)
						$(newCursor).insertBefore($("#abc_block_pad > *").get(model.setCursor));
					else
						$(newCursor).insertAfter($("#abc_block_pad > *").get(model.setCursor));
					$(this).remove();
				});
			}
		},
		updateBlockMetal: function(model){
			var block;
			if(model.block){
				block = $("div.block:has(input[name*="+model.block.id+"])",$(this));
				if(model.block.metal == "SILVER"){
					$("div.letter_wrapper",$(block)).removeClass('gold').addClass('silver');	
				}else{
					$("div.letter_wrapper",$(block)).removeClass('silver').addClass('gold');
				}
			}
		},
		showCartUpdate: function(model){
			var name = "";
			var i = 0;
			for(i=0;i<model.necklace.$block.length;i++){
				name = name + model.necklace.$block[i].code;
			}
			$(".item_name", $(model.cart)).text($(".item_name", $(model.cart)).text()+" - "+name);
			$(".item_price", $(model.cart)).text("$"+(model.cost.toString().match(/(\.5)$/)?model.cost+'0':model.cost));
			if($("#mini_cart").length>0){
				$("#mini_cart").replaceWith($(model.cart));
			}else{
				$("#rail").append($(model.cart));
			}
			if($("#flash").length>0){
				$("#flash").replaceWith($(model.flash));
			}else{
				$("#flash").append($(model.flash));
			}
		},
		showCartLoading: function(model){
			if($("#mini_cart").length>0){
				$("#mini_cart").replaceWith("<div id='mini_cart'><p>Your order is processing...</p></div>");
			}else{
				$("#rail").append("<div id='mini_cart'><p>Your order is processing...</p></div>");
			}
		}
	};$V.Necklace = $V.Necklace$Class.constructor;
})(jQuery, AlphabetCity.Views);