/*
For the joby store, individual item page.
Uses jquery and jquery.jqzoom and jquery.tools
Michael Huang. 
*/
$(document).ready(function(){
	// replace submit button with link that does the same thing
	// only do this for non-IE for now.. testing to see if this resolves issues
	if (!(/MSIE (\d+\.\d+);/.test(navigator.userAgent))) {
		// first find the form that is submitted	
		form = $("input.addtocart").closest('form');
		$('<a class="btn buy-now" href="javascript:"><span>Add to Cart</span></a>').replaceAll($("input.addtocart")).click(function(e) {
			e.preventDefault;
			form.submit();
		});
	}
		

    $("div.gallery-scrollable").scrollable();
    
    // speed multiplier = (1000 / 350)
    $("#wrap").anythingZoomer({
    	expansionSize: 0,
    	portSize: 200,
    	speedMultiplier: 2.857
	});
    
	/*$('.gallery-image a').jqzoom({
    	title: false,
    	zoomWidth: 275,
    	zoomHeight: 275,
		yOffset: 50,
    	showPreload: true,
    	lens: false
    });*/
    

	/* when user mouseovers a gallery thumbnail, initiate a click */
	// buggy on ie, hence disable for them
	
		$("div.gallery-scrollable div.items a").mouseover(function(e) { 
			if (!($.browser.msie)) {
				$(e.target).click(); // this allows the scrollable to move
			} else {
				newGalleryImage(e.target); // TODO: set up scrollable for IE
			}
    	}); 
    
	/* when thumbnails are clicked, swap the medium sized image */
    $("div.gallery-scrollable div.items a").click(function(e) { 

        e.preventDefault();
 		        
 		newGalleryImage(e.target);
    }); 
    
    /* if/when color change happens, change the first image in the gallery to the new image, update */
    $(".color select").change(function(e) {
    	
    	// figure out which item sent it
    	var parent_item = $(e.target).closest('div.item');
    	updatePackage(parent_item);
    });
    
    // looks for the large gallery image, updates it based on what values there are in the forms on the page
    function updatePackage(parent_item) {
    	
    	// get color value of select
    	var color = $(parent_item).find('.color select :selected').val();
    	// if there is no select, hence no color, then use the default color
    	if (color == null || $('#gp1_package_gp1_colors_combo').attr('checked') == true) {
    		color = "default";
    	}
    	// find the associated color data 
    	var current_var = $(parent_item).find(".package input:checked");
    	
    	var color_data = current_var.data('color_' + color);
    	// if there is data to update
    	if (color_data) {
	    	// get the first element in the gallery. this is the element that is affected by package/color changes
	    	var first = $(parent_item).find("div.gallery-scrollable div.items div:first-child a"); 
    		if (first.length > 0) {
	    		var first_img = first.children('img');
	    		// update the first element
	    		first.attr('href', color_data.img_l);
	    		first_img.attr('longdesc', color_data.img_z);
	    		first_img.attr('title', color_data.title);
	    		first_img.attr('src', color_data.img_t);
		    	// click to set the first element
		    	if (!($.browser.msie)) {
		       		$(first_img).click();
				} else {
					newGalleryImage(first_img);
				}
    		} else {
    			// ELSE, then look for a [s] type image to update 
    			var s_image = $(parent_item).find('.thumb img');
    			if (s_image.length > 0) s_image.attr('src', color_data.img_s);
       		}
    	}
    }
    
    // looks for package changes
    // update giftwrap info, also update color when applicable
    $(".package :radio").click(function(e) {
    	// figure out which item sent it
    	var parent_item = $(e.target).closest('div.item');
    	updateGiftwrap(parent_item);
    	updatePackage(parent_item);
    	
    	// for the GP1 colors combo, disable the color input if it is selected
    	if ($('#gp1_package_gp1_colors_combo').attr('checked') == true) {
    		$('select[name="item[gp1][color]"]').attr('disabled', true);
    	} else {
    		$('select[name="item[gp1][color]"]').removeAttr('disabled');
    	}
    });
    
    function updateGiftwrap(parent_item) {
    	var giftwrap_span = $(parent_item).find(".package b.giftwrap");
    	var radio = $(parent_item).find(".package :checked");
    	if (typeof(radio.data('giftwrap_price')) != 'undefined') {
    		// ensure the associated input is enabled  and shown
    		giftwrap_span.closest('label').find('input').attr('disabled', '');
    		giftwrap_span.closest('li').slideDown('fast');
    		// display the correct value
    		giftwrap_span.text(radio.data('giftwrap_price'));
    	} else if (radio.size > 0) {
    		// only hide if there are in fact radio buttons
    		// find the associated input and disable it
    		giftwrap_span.closest('label').find('input').attr('disabled', 'disabled');
    		// hide the entire thing
    		giftwrap_span.closest('li').slideUp('fast');
    	}
    }
    
    function newGalleryImage(img) {
 		var e_link = $(img).closest('a');

    	showGalleryImage(e_link.attr('href'), $(img).attr('longdesc'), $(img).attr('title'));
    }
    
    function showGalleryImage(large, zoom, title) {
    	
        /* show the linked image */
 		/*var target_img = $(".gallery-image img");
 		var target_link = $(".gallery-image a");
 		var target_title = $(".gallery-image span.title");
 		
 		target_img.attr('src', href);
 		target_link.attr('href', longdesc);
 		target_title.text(title);*/
 		
 		// changed for zoomer
 		var target_zoom = $("#large img");
 		var target_large = $("#small img");
 		var target_title = $(".gallery-image span.title");
 		
 		target_zoom.attr('src', zoom);
 		target_large.attr('src', large);
 		target_title.text(title);
    }
    
    // on load, check for updated colors, giftwrap
    $('.item').each(function() {
	    updatePackage(this);
	    updateGiftwrap(this);
	});
});