/*****************************************************************************************************************
 *
 * @title	Clothes
 * @date	January 11, 2009
 * @author	Shanker Kaura
 * @version 1.5
 *
 * Section 1) Usage Instructions
 * -----------------------------
 *
 * Section 2) Sample File
 * ----------------------
 * See clothes.php -- this is the default page style.
 *
 * Section 3) Clothes Options
 * --------------------------
 *
 * Section 4) CSS
 * --------------------------
 *
 ****************************************************************************************************************/

function gridOverlay(){
    var gridOverlayPic = "images/grid-overlay.png";
    
    // grid overlay
    $("#clothes-table td").hover(
        function(){
            var left = $(this).position().left;
            var top = $(this).position().top;
                    
            var overlay = "<div id=\"grid-overlay\" style=\"position:absolute;z-index:99;top:" + top + "; left:" + left + "\"><img src=\"" + gridOverlayPic + "\" width=\"140\" height=\"21\" /></div>"
            $(this).prepend(overlay);
        },
        function(){
            $(this).find("#grid-overlay").remove();
        }
    );
};
 
// this is a rewrite of clothes2 to accomodate the shadowbox contents
jQuery.fn.clothes3 = function(options){
	// console.log('START: clothes3');
	$(this).find("tr td a img").click(function(){ 
		// console.log('DEBUG: image clicked');
		var photo = $(this).metadata().photo;
		var gender = $(this).metadata().gender;
        var category = $(this).metadata().category;
        var label = $(this).metadata().label;
        var itemCode = $(this).metadata().itemCode;
        var sizes = $(this).metadata().sizes;
        var fabric = $(this).metadata().fabric;

		// console.log('DEBUG: ' + photo + ' ' + gender + ' ' + category + ' ' + label + ' ' + itemCode + ' ' + sizes + ' ' + fabric);

		// html for item photo 		
		// var photoContent = "<img width=\"" + options.detailImageWidth + "\" height=\"" + options.detailImageHeight + "\" src=\"" + photo + "\" />";
		var photoContent = "<img src=\"" + photo + "\" />";
		$("#clothes_photoContent").html(photoContent);
		// console.log(photoContent);

	    // html for item description
		var descriptionContent = "<h1 class='clothesDesc'>" + itemCode + "</h1>";
		descriptionContent += "<h2>Material</h2>" + fabric;
		descriptionContent += "<h2>Sizes</h2>" + sizes;
		descriptionContent += "<h2>Colours</h2>";
        $("#clothes_descriptionContent").html(descriptionContent);


		// html for item swatches
	    var swatchesContent = "<div id=\"colourSwatches\"><ul>";
		var swatchTextContent = '';
		
		// we need to get the image path and extract the colour name
		$(this).parent().siblings(".mini-swatch").each(function(){
			var miniSwatchPath = $(this).attr("src");
			var colour = miniSwatchPath;
			
			// now we have /aaa/bbb/ccc_ddd.jpg
			
			// reduce to ccc_ddd.jpg
			colour = colour.substring(colour.lastIndexOf('/'));
			// reduce to ddd.jpg
			colour = colour.substring(colour.indexOf('_') + 1);
			// remove any underscores with slashes
			colour = colour.replace(/_/gi, "/");
			// remove .jpg
			colour = colour.substring(0, colour.indexOf('.jpg'));
			swatchTextContent += colour + ', ';
			// swatchesContent += "<li class=\"swatchLink\"><img  width=\"" + options.swatchWidth + "\" height=\"" + options.swatchHeight + "\" src=\"" + miniSwatchPath + "\" /></li>";
			swatchesContent += "<li class=\"swatchLink\"><img src=\"" + miniSwatchPath + "\" /></li>";
			
		});
												
        swatchesContent += "</ul></div>";
		
        $("#clothes_swatchesDescription").html(swatchTextContent);
		$("#clothes_swatchesContent").html(swatchesContent);
	});
	
	 
	$('#subnav2').show();
	
	// console.log('END: clothes3');
	return this;
};





// not being used anymore, but keep it just in case we need it in the future.
jQuery.fn.clothes2 = function(options){
		Shadowbox.init({ skipSetup: true });
	options = jQuery.extend({
		imagePath: 'images',
		phpScriptPath: 'scripts/',
		cellsPerRow: 3,
		shadowBoxWidth: 700,
		shadowBoxHeight: 500,
		cellWidth: 190,
		cellImageWidth: 140,
		cellImageHeight: 175,
		swatchWidth: 45,
		swatchHeight: 45	,
		detailImageWidth: 400,
		detailImageHeight: 500
	}, options);
        
    var customURL = false;
	var url = window.location.pathname;
	var hash = window.location.search.substring(1);
	
	if (hash.indexOf('category') != -1) customURL = true;
	
	var customGender, customCategory;	
	if (customURL){
		customGender = hash.substring(hash.indexOf('=')+1, hash.indexOf('&'));
		hash = hash.substring(hash.indexOf('&')+1);

		customCategory = hash.substring(hash.indexOf('=')+1);
	}
	
	$("#clothes-table").each(function(){
		$(this).click(function(){
			// console.log('DEBUG: image clicked');
		});
	});
	
	/*
	$(tableID).find("tr td a img").each(function(){
      $(this).click(function(){
		var photo = $(this).metadata().photo;
		var gender = $(this).metadata().gender;
        var category = $(this).metadata().category;
        var label = $(this).metadata().label;
        var itemCode = $(this).metadata().itemCode;
        var sizes = $(this).metadata().sizes;
        var fabric = $(this).metadata().fabric;
                        
        // html for big photo
        var photoContent = "<img width=\"" + options.detailImageWidth + "\" height=\"" + options.detailImageHeight + "\" src=\"" + photo + "\" />";
	                        
	    // html for item description
		var descriptionContent = "<h1 class='clothesDesc'>" + itemCode + "</h1>";
		descriptionContent += "<h2>Material</h2>" + fabric;
		descriptionContent += "<h2>Sizes</h2>" + sizes;
		descriptionContent += "<h2>Colours</h2>";
	                        
	    // html for swatches (ie. load up thumbnails for all available colours)
	    var swatchesContent = "<div id=\"colourSwatches\"><ul>";
		var swatchTextContent = '';
		$.each(json, function(j, data){
	    	if (data.itemCode == itemCode) 
				$.each(data.materials, function(m, material){
					$.each(data.colours, function(k, colour){
						var swatch = imagepath + '/swatches/' + material + "_" + colour + ".jpg";
						swatchTextContent += colour + ', ';
									
						swatchesContent += "<li class=\"swatchLink\"><img  width=\"" + options.swatchWidth + "\" height=\"" + options.swatchHeight + "\" src=\"" + swatch + "\" /></li>";
					});
				});
	    });
												
												
                        swatchesContent += "</ul></div>";
 		
						swatchTextContent = swatchTextContent.substring(0, swatchTextContent.length-2);
						
						swatchTextContent = swatchTextContent.replace(/_/gi, "/");
	
                        $("#clothes_photoContent").html(photoContent);
                        $("#clothes_descriptionContent").html(descriptionContent);
                        $("#clothes_swatchesDescription").html(swatchTextContent);
						$("#clothes_swatchesContent").html(swatchesContent);
            	});
            });
    */
	/*	
    var imagepath = options.imagePath;
    var tableID = this;
    var cellsPerRow = options.cellsPerRow;
    var phpScriptPath = options.phpScriptPath;
   $(".clothes_chooser").click(function(){
		var gender = $(this).metadata().gender;
        var category = $(this).metadata().category;
		var gender = customGender;
		var category = customCategory;
        var colours = new Array();
        
        $.getJSON(phpScriptPath + 'populateImageStrip.php', {
            gender: gender,
            category: category
        }, function success(json){
            var str = "<tr>";
            var cellCounter = 0;
            $.each(json, function(i, data){
            	if (cellCounter++ % cellsPerRow == 0){
            		str += "</tr><tr>";
            	}
				var image = data.itemCode + ".jpg";
				var alt = data.itemCode;
				var thumb = "thumbnails/" + data.itemCode + ".jpg";

				str += "<td style =\"text-align:center;\" width=\"" + options.cellWidth + "\"><a rel=\"shadowbox;width=" + options.shadowBoxWidth + ";height=" + options.shadowBoxHeight + "\" href=\"#clothes_popup\"><img width=\"" + options.cellImageWidth + "\" height=\"" + options.cellImageHeight + "\" class=\"";
				// if (data.itemCode == customCode) str += "REQUESTED_PRODUCT ";
                str += "{";
                str += "photo: '" + imagepath + "/clothes/" + image + "', ";
                str += "gender: '" + data.gender + "', ";
                str += "category: '" + data.category + "', ";
                str += "label: '" + data.itemCode + "', ";
                str += "itemCode: '" + data.itemCode + "',"
                str += "thumb: '" + imagepath + thumb + "', "
                str += "sizes: '" + data.sizes + "', ";
                str += "fabric: '" + data.fabric + "'";
                str += "} \"";
                str += "src=\"" + imagepath + '/clothes/' + thumb + "\" ";
                str += "alt=\"" + alt + "\""
                str += " /></a>";
								
								str += "<div class=\"floatClear\" />";
								str += "<div class=\"thumbnailLabel\">" + data.itemCode + "</div>";
								
                // iterate through colours
                $.each(data.materials, function(m, material){
					$.each(data.colours, function(k, colour){
						var swatch = imagepath + '/swatches/' + material + "_" + colour + ".jpg";
						str += "<img class=\"mini-swatch\" src=\"" + swatch + "\" />";
					});
                });
                str += "</td>";
				               
            }); // $.each()
            str += "</tr>";
            
            $(tableID).html(str);
            
            $(tableID).find("tr td a img").each(function(){
            	$(this).click(function(){
            	        var photo = $(this).metadata().photo;
                        var gender = $(this).metadata().gender;
                        var category = $(this).metadata().category;
                        var label = $(this).metadata().label;
                        var itemCode = $(this).metadata().itemCode;
                        var sizes = $(this).metadata().sizes;
                        var fabric = $(this).metadata().fabric;
                        
                        // html for big photo
                        var photoContent = "<img width=\"" + options.detailImageWidth + "\" height=\"" + options.detailImageHeight + "\" src=\"" + photo + "\" />";
                        
                        // html for item description
						var descriptionContent = "<h1 class='clothesDesc'>" + itemCode + "</h1>";
						descriptionContent += "<h2>Material</h2>" + fabric;
						descriptionContent += "<h2>Sizes</h2>" + sizes;
						descriptionContent += "<h2>Colours</h2>";
	                        
                        // html for swatches (ie. load up thumbnails for all available colours)
                        var swatchesContent = "<div id=\"colourSwatches\"><ul>";
						var swatchTextContent = '';
						$.each(json, function(j, data){
                            if (data.itemCode == itemCode) 
								$.each(data.materials, function(m, material){
										$.each(data.colours, function(k, colour){
												var swatch = imagepath + '/swatches/' + material + "_" + colour + ".jpg";
												swatchTextContent += colour + ', ';
												
												swatchesContent += "<li class=\"swatchLink\"><img  width=\"" + options.swatchWidth + "\" height=\"" + options.swatchHeight + "\" src=\"" + swatch + "\" /></li>";
										});
								});
                        });
												
												
                        swatchesContent += "</ul></div>";
 		
						swatchTextContent = swatchTextContent.substring(0, swatchTextContent.length-2);
						
						swatchTextContent = swatchTextContent.replace(/_/gi, "/");
	
                        $("#clothes_photoContent").html(photoContent);
                        $("#clothes_descriptionContent").html(descriptionContent);
                        $("#clothes_swatchesDescription").html(swatchTextContent);
						$("#clothes_swatchesContent").html(swatchesContent);
            	});
            });
            Shadowbox.init({ skipSetup: true }); Shadowbox.setup();
						gridOverlay();
        }); // success()
  	}); // .getJSON()
*/


	/*
	$(".clothes_chooser").css({cursor:"pointer"});
	// set default click so some data is displayed
	if (!customURL){
	 $(".clothes_chooser:first").click();
	}
	else {
		// find the correct link and click it
		var category2click = $(".clothes_chooser").metadata({
		  gender: customGender,
		  category: customCategory
		});
		
		category2click.click();	
	}
	*/

	Shadowbox.setup();
	return this;
 }