// JavaScript Document
var currentImage = 0;
var totalImages = 0;
var IMAGE_BORDER_WIDTH = 15;
var IMAGE_MAX_HEIGHT = 440 + IMAGE_BORDER_WIDTH*2;

$(document).ready( function() {
	//ie6-only routines
	if ( $.browser.msie && $.browser.version == "6.0" ) {
	//convert gallery ddl to graphic one
		createGalleryList();
	}
	
	//gallery 
	currentImage = parseInt( $('#hdnProduct_This').val() );
	totalImages = parseInt( $('#hdnProduct_Total').val() );
	
	rewriteButtons();
	
	//check pages
	var thisPage = window.location.pathname.split('/');
	
	//only rewrite the list if this is the gallery page
	if ( thisPage[thisPage.length-1] == 'index.php') {
		rewriteList();
		//addGalleryButtons();
	}
	
	if ( thisPage[thisPage.length-1] == 'all.php') {
		attachView();
	}
	
	if ( thisPage[thisPage.length-1].substr( 0, 1 ) == '_') {
		//cms checks
		showInputBar();
		addDeleteButtons();
	}
});
	
var createGalleryList = function() {
	//create drop-down
	$("#gallery-list").hover( function() {
		$("#gallery-list #list-inner").show();
	}, function() {
		$("#gallery-list #list-inner").hide();
	});
}


function resizeIframe(e) {
	thisHeight = e.contentWindow.document.body.scrollHeight + 'px';
	e.height = thisHeight;
}

//rebuild gallery page for front-end processing
var rewriteButtons = function() {
	$('#button-previous').attr({ 'href': '#' }).click( function() {
		var previous = currentImage-1;
		if ( previous < 0 ) {
			previous = totalImages-1;
		}
		currentImage = previous;
		slideImage( false, currentImage );
		
		this.blur();
		return false;
	});
	$('#button-next').attr({ 'href': '#' }).click( function() {
		var next = currentImage+1;
		if ( next > totalImages-1 ) {
			next = 0;
		}
		currentImage = next;
		slideImage( true, currentImage );
		this.blur();
		return false;
	});
}

var slideImage = function(moveRight, imageNumber) {
	//just move left or right - no need to jump to a particular image
	//alternately, show all images on a uber-wide gallery
	var newSection = '';
	var speed = 250;
	var easing = 'swing';
	var easeIn = 'easeInCirc';
	var easeOut = 'easeOutQuad';
	
	if ( moveRight ) {
		//get number of new image
		imageNumber ++;
		if ( imageNumber > totalImages-1 ) {
			imageNumber = 0;
		}
		//create code for new image and adjust the title	
		newSection = '<div class="gallery-section right-new"><div class="image-surround" style="width: ' + eval( parseInt( getImageData( 'image_width', imageNumber )) + IMAGE_BORDER_WIDTH*2 ) + 'px; height: ' + eval( parseInt( getImageData( 'image_height', imageNumber )) + IMAGE_BORDER_WIDTH*2 ) + 'px; margin-top: ' + eval( ( IMAGE_MAX_HEIGHT - ( parseInt( getImageData( 'image_height', imageNumber )) + IMAGE_BORDER_WIDTH*2 )) /2 ) + 'px;"><a class="button-individual" href="individual.php?p=' + getImageData( 'product_id', imageNumber ) + '"><img src="gallery/' + getImageData( 'product_image_id', imageNumber ) + '_main.jpg" alt="' + getImageData( 'product_name', imageNumber ) + '" /></a><div class="frame-top"></div><div class="frame-right"></div><div class="frame-bottom"></div><div class="frame-left"></div><div class="frame-tl"></div><div class="frame-tr"></div><div class="frame-br"></div><div class="frame-bl"></div></div></div>';
		//add new image to the page
		$('#gallery-images').append( newSection );
		//move the whole gallery to the left
		if ( $.browser.msie && $.browser.version == "6.0" ) {
			$('#gallery-overlay').hide();
		}
		else {
			$('#gallery-overlay').fadeOut(speed);
		}
		/*
		$("#gallery .gallery-section").animate({
			left: '-=524'
		}, { duration: speed, easing: easing } );
		*/
		$('#gallery .gallery-section').animate({
			left: '-=262'
		}, { duration: speed, easing: easeIn } );
		$('#gallery .gallery-section').animate({
			left: '-=262'
		}, { duration: speed, easing: easeOut } );
		//remove the leftmost image and adjust the title
		$('#gallery .gallery-section:first').queue( function() {
			$(this).remove();
			$('#gallery-overlay').fadeIn(speed);
			$('#gallery-overlay #image-title').remove();
			$('#gallery-overlay').append( '<span id="image-title">' + ( getImageData( 'product_name', currentImage ) ).toUpperCase() + '</span>' );
			sIFR_replace();
			$(this).dequeue();
		});
	}
	else {
		//get number for new image
		imageNumber --;
		if ( imageNumber < 0 ) {
			imageNumber = totalImages-1;
		}
		//create code for new image
		newSection = '<div class="gallery-section left-new"><div class="image-surround" style="width: ' + eval( parseInt( getImageData( 'image_width', imageNumber )) + IMAGE_BORDER_WIDTH*2 ) + 'px; height: ' + eval( parseInt( getImageData( 'image_height', imageNumber )) + IMAGE_BORDER_WIDTH*2 ) + 'px; margin-top: ' + eval( ( IMAGE_MAX_HEIGHT - ( parseInt( getImageData( 'image_height', imageNumber )) + IMAGE_BORDER_WIDTH*2 )) /2 ) + 'px;"><a class="button-individual" href="individual.php?p=' + getImageData( 'product_id', imageNumber ) + '"><img src="gallery/' + getImageData( 'product_image_id', imageNumber ) + '_main.jpg" alt="' + getImageData( 'product_name', imageNumber ) + '" /></a><div class="frame-top"></div><div class="frame-right"></div><div class="frame-bottom"></div><div class="frame-left"></div><div class="frame-tl"></div><div class="frame-tr"></div><div class="frame-br"></div><div class="frame-bl"></div></div></div>';
		//add new image to the page
		$('#gallery-images').prepend( newSection );
		//move the whole gallery to the right
		if ( $.browser.msie && $.browser.version == "6.0" ) {
			$('#gallery-overlay').hide();
		}
		else {
			$('#gallery-overlay').fadeOut(speed);
		}
		/*
		$("#gallery .gallery-section").animate({
			left: '+=524'
		}, { duration: speed, easing: easing } );
		*/
		$('#gallery .gallery-section').animate({
			left: '+=262'
		}, { duration: speed, easing: easeIn } );
		$('#gallery .gallery-section').animate({
			left: '+=262'
		}, { duration: speed, easing: easeOut } );
		//remove the rightmost image
		$('#gallery .gallery-section:last').queue( function() {
			$(this).remove();
			$('#gallery-overlay').fadeIn(speed);
			$('#gallery-overlay #image-title').remove();
			$('#gallery-overlay').append( '<span id="image-title">' + ( getImageData( 'product_name', currentImage ) ).toUpperCase() + '</span>' );
			sIFR_replace();
			$(this).dequeue();		
		});
	}
}

var getImageData = function(variable, number) {
	var query = $("#hdnProduct_" + number).val();
	return getSerialisedData(variable, query);
}

var getSerialisedData = function(variable, query) {
	var vars = query.split("&");
	for (var i=0; i<vars.length; i++) {
		var pair = vars[i].split("=");
		if (pair[0] == variable) {
			return pair[1];
		}
	}
}

var rewriteList = function() {
	$("#gallery-list a").click( function() {
		//get serial number from product id
		var href = $(this).attr('href').split('p=');
		productId = parseInt(href[href.length-1]);
		currentImage = getSerialNumber(productId);

		var previous = currentImage-1;
		if ( previous < 0 ) {
			previous = totalImages-1;
		}
		var next = currentImage+1;
		if ( next > totalImages-1 ) {
			next = 0;
		}

		fadeGallery( previous, currentImage, next );
		
		this.blur();
		return false;
	});
}

var getSerialNumber = function ( p ) {
	var id = '0';
	$('#data').find('input').each( function() {
		if ( $(this).attr('id') != 'hdnProduct_This' && $(this).attr('id') != 'hdnProduct_Total' ) {
			thisId = getSerialisedData( 'product_id', $(this).val() );
			if ( thisId == p ) {
				id = parseInt( $(this).attr('id').split('_')[$(this).attr('id').split('_').length-1] );
			}
		}
	});
	return id;
}

var fadeGallery = function( one, two, three ) {
	var speed = 500;
	var images = '<div id="left" class="gallery-section"><div class="image-surround" style="width: ' + eval( parseInt( getImageData( 'image_width', one )) + IMAGE_BORDER_WIDTH*2 ) + 'px; height: ' + eval( parseInt( getImageData( 'image_height', one )) + IMAGE_BORDER_WIDTH*2 ) + 'px; margin-top: ' + eval( ( IMAGE_MAX_HEIGHT - ( parseInt( getImageData( 'image_height', one )) + IMAGE_BORDER_WIDTH*2 )) /2 ) + 'px;"><a class="button-individual" href="individual.php?p=' + getImageData( 'product_id', one ) + '"><img src="gallery/' + getImageData( 'product_image_id', one ) + '_main.jpg" alt="' + getImageData( 'product_name', one ) + '" /></a><div class="frame-top"></div><div class="frame-right"></div><div class="frame-bottom"></div><div class="frame-left"></div><div class="frame-tl"></div><div class="frame-tr"></div><div class="frame-br"></div><div class="frame-bl"></div></div></div><div id="middle" class="gallery-section"><div class="image-surround" style="width: ' + eval(parseInt( getImageData( 'image_width', two )) + IMAGE_BORDER_WIDTH*2 ) + 'px; height: ' + eval( parseInt( getImageData( 'image_height', two )) + IMAGE_BORDER_WIDTH*2 ) + 'px; margin-top: ' + eval( ( IMAGE_MAX_HEIGHT - ( parseInt( getImageData( 'image_height', two )) + IMAGE_BORDER_WIDTH*2 )) /2 ) + 'px;"><a class="button-individual" href="individual.php?p=' + getImageData( 'product_id', two ) + '"><img src="gallery/' + getImageData( 'product_image_id', two ) + '_main.jpg" alt="' + getImageData( 'product_name', two ) + '" /></a><div class="frame-top"></div><div class="frame-right"></div><div class="frame-bottom"></div><div class="frame-left"></div><div class="frame-tl"></div><div class="frame-tr"></div><div class="frame-br"></div><div class="frame-bl"></div></div></div><div id="right" class="gallery-section"><div class="image-surround" style="width: ' + eval(parseInt( getImageData( 'image_width', three )) + IMAGE_BORDER_WIDTH*2 ) + 'px; height: ' + eval( parseInt( getImageData( 'image_height', three )) + IMAGE_BORDER_WIDTH*2 ) + 'px; margin-top: ' + eval( ( IMAGE_MAX_HEIGHT - ( parseInt( getImageData( 'image_height', three )) + IMAGE_BORDER_WIDTH*2 )) /2 ) + 'px;"><a class="button-individual" href="individual.php?p=' + getImageData( 'product_id', three ) + '"><img src="gallery/' + getImageData( 'product_image_id', three ) + '_main.jpg" alt="' + getImageData( 'product_name', three ) + '" /></a><div class="frame-top"></div><div class="frame-right"></div><div class="frame-bottom"></div><div class="frame-left"></div><div class="frame-tl"></div><div class="frame-tr"></div><div class="frame-br"></div><div class="frame-bl"></div></div></div>';
	
	//move the whole gallery to the left
	$('#gallery-images').fadeOut(speed);
	if ( $.browser.msie && $.browser.version == "6.0" ) {
		$('#gallery-overlay').hide();
	}
	else {
		$('#gallery-overlay').fadeOut(speed);
	}
	$('#gallery-images').queue( function() {
		$(this).children().remove();
		$(this).append( images );
		$('#gallery-images').fadeIn(speed);
		$('#gallery-overlay').fadeIn(speed);
		
		$('#gallery-overlay #image-title').remove();
		$('#gallery-overlay').append( '<span id="image-title">' + ( getImageData( 'product_name', currentImage ) ).toUpperCase() + '</span>' );
		
		sIFR_replace();
		$(this).dequeue();		
	});
}

var attachView = function() {
	$('.thumbnail a').append('<span class="view"><span><img src="images/button_view.gif" alt="view" /></span></span>');
	$('.thumbnail a').hover( function() {
		$(this).find('.view span').animate({
			top: '0'
		}, 200 );
	}, function() {
		$(this).find('.view span').animate({
			top: '38'
		}, 200 );
	});
}



function showInputBar() {
	$('#variation-add').removeClass('invisible');
}

function addDeleteButtons() {
	$('.variation-delete').append('<a href="#" onclick="deleteVariationRow(this); return false;">delete</a>');
	$('th.variation-delete').empty();
	
	$('#variation-add .variation-delete').empty().append('<a href="#" onclick="addVariationRow(); return false;">add</a>');
}

function addVariationRow() {
	//get input data
	var productName = $('#product_ddl_new option:selected').text();
	var productId = $('#product_ddl_new option:selected').val();
	var variationDescription = $('#variation_description_new').val().replace(/\"/g, '&quot;');
	var variationUnitCost = $('#variation_unit_cost_new').val();
	var variationShippingCost = $('#variation_shipping_cost_new').val();
	var variationShowOnSite = checked( $('#variation_show_on_site_new') );
	var variationSoldOut = checked( $('#variation_sold_out_new') );
	var variationSigned = checked( $('#variation_signed_new') );
	
	//get next index number for array
	var index = $('#variation-table tr').size() - 2;
	
	//build row
	var row = '<tr>';
	row += '<td class="text-box"><p>' + productName + '</p><input id="variation_product_id[' + index + ']" name="variation_product_id[' + index + ']" type="hidden" value="' + productId + '" /><input id="variation_product_name[' + index + ']" name="variation_product_name[' + index + ']" type="hidden" value="' + productName + '" /></td>';
	row += '<td class="text-box-wide"><input id="variation_description[' + index + ']" name="variation_description[' + index + ']" type="text" value="' + variationDescription + '" /></td>';
	row += '<td class="text-box-money"><input id="variation_unit_cost[' + index + ']" name="variation_unit_cost[' + index + ']" type="text" value="' + variationUnitCost + '" /></td>';
	row += '<td class="text-box-money"><input id="variation_shipping_cost[' + index + ']" name="variation_shipping_cost[' + index + ']" type="text" value="' + variationShippingCost + '" /></td>';
	row += '<td class="check-box"><input id="variation_show_on_site[' + index + ']" name="variation_show_on_site[' + index + ']" type="checkbox" ' + variationShowOnSite + ' /></td>';
	row += '<td class="check-box"><input id="variation_sold_out[' + index + ']" name="variation_sold_out[' + index + ']" type="checkbox" ' + variationSoldOut + ' /></td>';
	row += '<td class="check-box"><input id="variation_signed[' + index + ']" name="variation_signed[' + index + ']" type="checkbox" ' + variationSigned + ' /></td>';
	row += '<td class="variation-delete"><input id="variation_delete[' + index + ']" name="variation_delete[' + index + ']" type="hidden" value="" /><a href="#" onclick="deleteVariationRow(this); return false;">delete</a></td>';
	row += '</tr>';
	
	//add row to table
	$('#variation-add').after( row );

	//reset first row
	$('#variation_description_new').val("");
	$('#variation_unit_cost_new').val("");
	$('#variation_shipping_cost_new').val("");
	$('#variation_show_on_site_new').attr({ checked: '' });
	$('#variation_sold_out_new').attr({ checked: '' });
	$('#variation_signed_new').attr({ checked: '' });
}

function deleteVariationRow(e) {
	$(e).parent().parent().fadeOut( 600 );
	$(e).parent().find('input').val('deleted');
}

function checked( dom ) {
	if ( $( dom ).attr('checked') ) {
		return 'checked'
	}
	else {
		return '';
	}
}