jQuery(document).ready(function($) { 

	$('#current img').css({width: "466px", height: 'auto'})
	$('#current .img').append("<div></div>") //for a handler for draggable
	
	var increment = 20;
	var slideOptions = { 
		animate: true,
		slide:function(event, ui){initSlide($('#slider').slider('value'))},
		change:function(event, ui){initSlide($('#slider').slider('value'))},
		stop: function(event, ui){initSlide($('#slider').slider('value'))}
	}
		
	$('#slider').slider(slideOptions);

	$('#plus').live('click',function() {
		if ($('#slider').slider('value') >= (100 - increment)) {
			var position = 100;
		} else {
			var position = $('#slider').slider('value') + increment;
		}
		$('#slider').slider( 'value' , position )
		initSlide(position)
	});

	$('#minus').live('click',function() {
		if ($('#slider').slider('value') <= (0 + increment)) {
			var position = 0;
		} else {
			var position = $('#slider').slider('value') - increment;
		}
		$('#slider').slider( 'value' , position )
		initSlide(position)
	});
	
	$('#media li a').click(function(index) {
		$(this).parent("li").addClass("current").siblings().removeClass("current")
		src = $(this).attr("href");
		ext = src.slice("-4");
		if (ext == ".jpg" || ext == "jpeg" || ext == ".gif" || ext == ".png") {
			$('#controls, #media .screen, #award_flag').show()
			$('#current').empty().append("<div class=\"img\"><img src='"+src+"'/></div>").children(".img").append("<div>&nbsp;</div>")
			$('#current img').css({width: "466px", height: 'auto'})
			
			
			$('#slider').slider(slideOptions);
			$('#slider').slider( 'value' , 0 )

		} else if (ext == ".flv" || ext == ".f4v") {
				$('#controls, #media .screen, #award_flag').hide()
				thumb = escape($(this).attr("rel"))
				
				$('#current').empty().append("<a href='"+src+"'>video</a>").attr('href',src)
				$('#current a').media({
				    width:         466,
				    height:        450,
				    autoplay:      0,         // normalized cross-player setting
				    bgColor:       '#000000', // background color
				    //params:        { wmode: 'transparent'},  // added to object element as param elements; added to embed element as attrs
				    attrs:         {},        // added to object and embed elements as attrs
				    flvKeyName:    'file',    // key used for object src param (thanks to Andrea Ercolino)
				    flashvars:     {preview:thumb},        // added to flash content as flashvars param/attr
				    expressInstaller: null,   // src for express installer
				    flashVersion:  '9',       // required flash version

				    // default flash video and mp3 player (@see: http://jeroenwijering.com/?item=Flash_Media_Player)
				    flvPlayer:     '/themes/frontend/blackdiamond/swf/pdp-scale.swf',
				    mp3Player:     'mediaplayer.swf'
				})
		} else if (ext == ".swf") {
			$('#current a').media({
			    width:         466,
			    height:        450,
			    expressInstaller: null,   // src for express installer
			    flashVersion:  '9'      // required flash version
			})
			$('#controls, #media .screen').hide()
			
		} else if (ext == ".php" || ext == "html" || ext == ".htm" || ext == ".asp") {
			
			$('#current').empty().append('<iframe id="view360" width="466" height="450" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" />'); 
			$('#view360').attr('src', src);
			$('#controls, #media .screen, #award_flag').hide()
			
		} else if (ext == ".mov" || ext == ".m4v"){
			$('#controls, #media .screen, #award_flag').hide()
			
			$('#current').empty().append("<a href='"+src+"'>video</a>").attr('href',src)
			$('#current a').media({
			    width:         466,
			    height:        262,
			    autoplay:      0,         // normalized cross-player setting
			    bgColor:       '#000000', // background color
			    //params:        { wmode: 'transparent'},  // added to object element as param elements; added to embed element as attrs
			    attrs:         {}       // added to object and embed elements as attrs
			})
		}
		return false;
	});
	
	$('#pano').click(function() {
		src = $(this).attr("href");
		$('#current').empty().append('<iframe id="view360" width="466" height="450" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" />'); 
		$('#view360').attr('src', src);
		$('#controls, #media .screen').hide()
		return false;
	});
	

	// clicks the first item that has a color id, and clicking that color id triggers the clicking of the media for that id
	$('#colors li').click(function() {
		if ($(this).attr("id") && $(this).attr("id") != "") {
			var id = $(this).attr("id")
			id = id.replace("swatch_","")
			if ($("#media ul li #media_for_"+id).size() > 0) {
				$("#media ul li #media_for_"+id).trigger("click")
			};
		} 
	});
	
	
	var firstId = $('#media li a[id]').attr("id")

	if (!firstId) {
		$('#colors li:first a').trigger("click").addClass("activeSwatch")
	} else {
		firstId = firstId.replace("media_for_","")
		$('#colors li#swatch_'+firstId).children("a").trigger("click").addClass("activeSwatch")
	}



});


function initSlide(position) {
	
	var windowLoc = $('#current').offset()

	imgWidth = (position * 8) + 466

	centerMove = Math.floor(position * -4)


	$('#current img').css({width: imgWidth, height: 'auto'})
	$('#current .img').css({left:centerMove, top:centerMove})
	$('#current .img div').css({width: imgWidth, height: '100%' })
	$('#current .img').draggable( 'destroy' )
	var rightMax = windowLoc.left;
	var leftMax = windowLoc.left - ($('#current img').width() - 466)
	var topMax = windowLoc.top - ($('#current img').height() - 450)
	var bottomMax = windowLoc.top;

	$('#current .img').draggable({ 
		handle: "div"
		,containment: [leftMax, topMax, rightMax, bottomMax]
	})
	
}