var template_dir = 'http://keyvisioninteriors.com/wp-content/themes/kvi'

$(function() {
	// Apply some basic labels
	$('ul').each(function() {
		$(this).find('li:first').addClass('first')
		$(this).find('li:last').addClass('last')
	})

	if ($('body').hasClass('advice')) fix_ol()
	if ($('body').hasClass('contact-us')) submit_image()

	// If we're on IE6 on a non-shop page fix the bloody browser
	if (is_ie6() && $('body').hasClass('shop') == false) {
		i_hate_ie6()

		$('img.png24')
			.attr({src: 'http://keyvisioninteriors.com/wp-content/themes/kvi/images/pixel.gif'})
			.css({filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://keyvisioninteriors.com/wp-content/uploads/2008/12/romanticcountry_kvi_2008-cover.png', sizingMethod='scale')"})
	}

	shop_swap()

	$('a.lightbox').lightBox({
		imageLoading:	template_dir + '/images/lightbox-ico-loading.gif',
		imageBtnClose:	template_dir + '/images/lightbox-btn-close.gif',
		imageBtnPrev:	template_dir + '/images/lightbox-btn-prev.gif',
		imageBtnNext:	template_dir + '/images/lightbox-btn-next.gif',
		imageBlank:		template_dir + '/images/lightbox-blank.gif'
	})
})

var is_ie6 = function() {
	if (parseInt($.browser.version) == 6 && $.browser.msie == true) {
		return true;
	} else {
		return false;
	}
}

var shop_swap = function() {
	$('body.shop #content .post').each(function(i) {
		if (i % 3 == 0) $(this).css({clear: 'left'})
		$(this).find('.entry img').parent().addClass('lightbox')
	})
}

// The "Advice" pages start on different numbers, so we just hardcode them for the moment
var fix_ol = function() {
	var start_num = [0,1,4,7,9]
	
	// Grabe the last class on the body, break it at the hypen, and grab the remainder so we can see which page we're on
	var page_num = $('body').attr('class').split(" ").shift().split("-").pop()
	
	$('#content ol')
		.addClass('styled')
		.attr({ start: start_num[page_num] })

	// Label each list item appropriately 
	$('#content ol li').each(function(i) {
		$(this).addClass('item_' + (start_num[page_num] + i) )
	})
}

// Rather than speelunk through the contact form plugin, I'm swapping the button for an image here
var submit_image = function() {
	var btn		= $('input:submit')
	var id		= btn.attr('id')

	btn
	  .removeAttr(id)
	  .replaceWith('<input type="image" src="' + template_dir + '/images/bg_submit.gif" id="' + id + '" value="' + btn.val() + '" name="' + btn.attr('name') + '" class="button image">')
}

// Generic function to return an object with the provided element's dimentions
var get_dims = function(element) {
	if (element.length > 1) return false;
	
	return {
		height:	element.outerHeight(),
		width:	element.outerWidth(),
		left:	element.offset().left,
		top:	element.offset().top
	}
}


// Headers and post divs hav transparent backgrounds. We gotta fix that for IE6
// We'll do that by grabbing the post/h2, getting its dimentions, and stuffing an
// absolutely positioned ringer in its place, so we can apply the opacity filter to it
var i_hate_ie6 = function() {
	// Kill the background, position relatively, and move up the stack
	$('.post, h2')
	  .css({
		position:	'relative',
		background:	'none',
		zIndex:		10
	  })
	  // For each item, create a ringer appended inside the content cell. CSS should handle the rest
	  .each(function(i) {
		if ($(this).is('.post'))	$('#content').append('<div class="post_replacement" id="post_bg_' + i + '"></div>')
		if ($(this).is('h2'))		$('#content').append('<div class="h2_replacement" id="h2_bg_' + i + '"></div>')
	  })
	
	// Position each ringer based on the element it mimics
	$('.post, h2').each(function(i) {
		if ($(this).is('.post'))	{
			position($('#post_bg_' + i), $(this))
		}

		if ($(this).is('h2')) {
			position($('#h2_bg_' + i), $(this))
		}

	})
}

// Takes a supplied element and sizes/positions it to match the second element
var position = function (element, original) {
	var container_dims = get_dims($('#content'))
	var ele_dims = get_dims(original)
	
	element.css({
		width:	ele_dims.width + 'px',
		height:	ele_dims.height + 'px',
		left:	(ele_dims.left - container_dims.left) + 'px',
		top:	(ele_dims.top - container_dims.top) + 'px'
	})
	
	// We need a minor tweak for post backgrounnds
	if(element.is('#post_bg')) 	element.css({ width: (ele_dims.width + 4) + 'px' })
}