$(document).ready(function(){
	$("a.sizelink").click(function() {
		$().trigger('sizechange',[$(this).attr('sizevalue'), $(this).attr('selid')]);
		return false;
	});

	INFI.summarychanger = (function() {
		var selectedSize=(typeof DEFAULT_SIZE =="undefined")? "" : DEFAULT_SIZE;
		var selSizeEl = $('#selsize_1, #selsize_2');
		var imgthumb = $("#imgthumb");
		
		
		return {
			init : function() {
				if(typeof LISTINGS == "undefined") {
					LISTINGS = { "" : { "" : "" }}
				}
				var me = this;
				this.listing = LISTINGS[selectedSize];
				$().bind('sizechange', function(event,sizename, selid) {
					if(LISTINGS && LISTINGS[sizename] && LISTINGS[sizename] != undefined) {
						me.changeSize(sizename, selid);
						me.changeListing(LISTINGS[selectedSize]);
					}
				});
				$("#dodlink").click(function() {
						var dodselid= $(this).attr('selid');
						var dodlisting=LISTINGS["DOD"];
						me.changeListing(dodlisting);
						return false;
				});
			},
			changeSize  : function(sizename, selid) {
				$('a[sizevalue="'+ this.size+'"] span').removeClass('selected');
				selectedSize = sizename;
				this.size=selectedSize;
				selSizeEl.text(selectedSize);
				var imgel= $("#col_"+selid);
				if(imgel) {
					imgthumb.attr('src',imgel.attr("thumbsrc"))
					imgthumb.attr('viewid',"size_"+selid);
					var FORCE_REFRESH= true;
					imgthumb.trigger('click',[FORCE_REFRESH]);
				}
				$('a[sizevalue="'+ this.size+'"] span').addClass('selected');
			},
			
			changeListing: function(_listing) {
				if(INFI.changeListing) {
					INFI.changeListing(_listing);
				}
			},
			
			size : selectedSize
		}
	})();
	
	INFI.summarychanger.init();
})
 
		;
		/** 
	Why this was writtem: to 'help' in unobtrusively hijack a click, show a message, and then continue with the click if 
	OK was clicked on the message box. upon cancel on the message - do nothing.

	How to use it?
		assign whatever this method returns as the click event handler. 
		This method takes 2 params - the text for the prompt and a reference to the element itself (for which this is the click handler).
	How it works:
		This function creates a function taking in a param hidePopup - this will not be passed by the default click event
		If this is passed we can be sure that the click was generated thru code.
		
		We reverse the functionality - if the click was generated thru code, 
		do whatever the click was supposed to do (no hijacking) - a simple return true will do;
		
		if the click was generated by actually clicking it. Show the popup and in the callback of the popup
		(i.e once the user clicks ok/cancel), we generate a click event on the element through code ;)
	
*/
/*
function popupHandlerCreator(messgHTML, el) {
	return function(e, hidePopup) {
		if(hidePopup) {
			return true;
		} else {
			var messg = messgHTML;
			if(typeof messgHTML == "function") {
				messg=messgHTML();
			}

			$('select').css('visibility','hidden');
			$.prompt(messg,
			{
				callback : function (button) {
					$('select').css('visibility','visible');
					//If we has selected ok,
					if(button) {
						el.trigger('click',[true]);
					}
				},
			    buttons: { Ok:true , Cancel:false},
			    opacity: 0.7
			});
			return false;
		}
	}
}
*/

var INFI = {};


$(document).ready(function() {

	if($('#status').val()=="soldout" || $('#status').val()=="comingsoon") {
		$("#TellMeWhenAvailable").show();
	}
	
	INFI.changeListing = function(_listing) {
		var actionimgs = {
			"buy" : "addtocart.gif",
			"preorder" : "preorder.gif",
			"comingsoon" : "comingsoon.gif",
			"discontinued" : "discontinued.gif",
			"soldout" : "soldout.gif"
		};
		
		this.listing = _listing;
		$('.selListingId').val(_listing.id);
		
		$('#comparesimilar').attr('href',"/CompareSimilar.action?listingId="+_listing.id);
		
		var priceChanged = true;
		$(".msrp").text(_listing.msrp);
		$(".yousave").text(_listing.usave);
		$(".yousaveper").text(
			Math.round(_listing.usave.replace(",","")*100/_listing.msrp.replace(",","")));
			
		$(".infiPrice").text(_listing.infiPrice);
		$(".infiPriceInUSD").text(_listing.infiPriceInUSD);		
		if(priceChanged) {
			$('#tbl_prices').fadeTo('slow',0.2,function() {$('#tbl_prices').fadeTo('fast',1.0);});
			$('#priceDiv').fadeTo('slow',0.2,function() {$('#priceDiv').fadeTo('fast',1.0);});
		}
		
		/** Change the inventory status */
		if(_listing.st == "buy" || _listing.st == 'preorder') {
			$(".nobuyimg").hide();
			$(".buyimg").attr('src', '/assets/skins/neo/images/'+actionimgs[_listing.st]).show();
			$('.status').fadeTo('slow',0.2,function() {$(".status").html('In Stock');$('.status').fadeTo('fast',1.0);});
		} else {
			$(".buyimg").hide();
			$(".nobuyimg").attr('src', '/assets/skins/neo/images/'+actionimgs[_listing.st]).show();
			$('.status').fadeTo('slow',0.2,function() {$(".status").html('<span style="font:12px Arial;color:black">This item is presently <b>Out of Stock</b>.</span>');$('.status').fadeTo('fast',1.0);});
		}
	
		if(_listing.st=='soldout' || _listing.st=='comingsoon') {
			$("#TellMeWhenAvailable").show();
		} else {
			$("#TellMeWhenAvailable").hide();
		}		

	}
	
    // JQ Modal
    $('.withoutjs').css('display', 'none');
    $('.withjs').css('display', 'block');

    $('.jqmLink').css('display', 'block');
    $('.jqmMessage').addClass('jqmWindow');
    $('.jqmLink').each(
            function() {
                    var target=$(this).siblings('.jqmMessage');
                    $('body').prepend($("<div></div>").append(target));

                    target.jqm({
                            onHide : function(hash) {
                                    hash.o.remove(); hash.w.hide();
                                    $('select').css('visibility','visible');
                            },
                            onShow : function(hash) {
                                    hash.w.show();
                                    $('select').not($('select',target)).css('visibility','hidden');
                            }
                    })


                    $(this).click(function() {
                            target.jqmShow();

                            $(document).keydown( function( e ) {
                                    if( e.which == 27) {  // escape, close box
                                            target.jqmHide();
                                    }
                            });
                    })
            }
    );
			
	$('#ext_set').jcarousel( {
		scroll: 1,
		animation: 0,
		wrap : 'both',
		itemFirstInCallback:  function(carousel,item,index,state) {
			var imgEl=$('img',item);
			
			if(imgEl.attr('_src')) {
				imgEl
					.attr('src',imgEl.attr('_src'))
					.attr('_src','');
			}
		}
	});
	
	$('#specs-accordion .accordion-head').add("span.colorpicker").hover(
		function() {
			$(this).addClass('hover');
		},
		function() {
			$(this).removeClass('hover');
		}
	);
	
	$('#specs-accordion').accordion({
		animated : 'bounceslide',
		autoheight: false
	});
	
    $('.zoomable').zoomviewer({
        viewer: {
            width: 405,
            height: 300,
            snap: 20,
            parentEl: "#myview"
        },
		/**
		 *  fix for IE6. The infamous select z-index problem.
		 *  Make sure that all combo boxes are invisble before we show the zoomed image.
		 */
		onOver : function () {
			$('select').css('visibility','hidden');
		},
		onOut : function () {
			$('select').css('visibility','visible');
		},
        lazyLoad: true
    });
    

	//create a viewer module (based on the module pattern)     
    var viewr = (function(){
		//private variable
        var currentView;
		var HOVER_OPACITY = 0.75;
        
        return {
        	selectedView : "",
			selectedThumb : "",
            init: function(){
			    $('.thumbs').not('.selectedThumb').css('opacity', HOVER_OPACITY);
				
                currentView = $('.img_med').filter('.inview').attr('id');
				this.selectedThumb = $('.thumbs').filter('.selectedThumb');
                this.selectedView = currentView;
				//save a reference to another "me" so that we can use the 
				//reference to the viewer inside the jquery chain
				var me = this;
                
                $('.thumbs').hover(function(){
                    //$(this).fadeTo('fast', 1);
                    me.changeView($(this).attr('viewid'));
                }, function(){
                    //$(this).fadeTo('slow', HOVER_OPACITY);
					//me.selectedThumb.fadeTo('fast', 1);
                    me.changeView(me.selectedView);
                });
				
                $('.thumbs').click(function(e, forceRefresh) {
					me.selectedThumb.removeClass('selectedThumb');
					me.selectedThumb.fadeTo('fast',HOVER_OPACITY);
					me.selectedThumb = $(this);
					me.selectedThumb.addClass('selectedThumb');
                    me.selectedThumb.fadeTo('fast', 1);
					me.selectedView = me.selectedThumb.attr('viewid');
                    me.changeView(me.selectedView, forceRefresh);
				});
				
            },
            changeView: function(viewid, forceRefresh){
            	forceRefresh = forceRefresh || false;
				var me = this;
                if (forceRefresh==true || currentView != viewid) {
                    $('#' + currentView).css('visibility', 'hidden');
                    currentView = viewid;
					var tmpView = viewid;
					
					/*	
						Previously this section was in a setTimeout so that it 
						is not very sensitive to mouse movements
						unfortunately, because of IE, I had to move itout of the setTimeout
						because the image src cahgne was not getting reflected in IE (works on FF)
					
						Without the setTimeout this function(changeview) is called multiple times - no idea why - but 
						that forces IE to load the image correctly. 
						
						So we live with this solution, till we can root cause it in IE - which is akin to banging your ehad against a wall :(
					*/
					if (currentView == tmpView) {
						var imgInView= $('#' + currentView);

						if(imgInView.attr('_src')) {
							imgInView
								.attr('src',imgInView.attr('_src'))
								.attr('_src','');
						} 

						imgInView.css('visibility', 'visible');
					}
                }
            }
        }
    })();
	
    viewr.init();

	$('#specs .accordion-head').toggle(
		function() { 
			var aEl= $(this)
			$('.accordion-body', aEl.parent()).hide()  
			aEl.removeClass('expand').addClass('collapse');
		},
		function() { 
			var aEl= $(this)
			$('.accordion-body', aEl.parent()).show()  
			aEl.removeClass('collapse').addClass('expand');
		}
	);

	
	
	
})
 
		;