// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

var loadings = new Object()
var timer;
var height = 400;

$(document).ready(function() {
  $('.art').mouseover(function() {
    $('.art_detail a',this).css('border-bottom', '1px solid #354FAD')
  })
  $('.art').mouseout(function() {
    $('.art_detail a',this).css('border-bottom', '0')
  })
})

function c_top(src, lnk, title, thumb) {
	//title.replace("'", ''')
	title.replace(/'/, "'")

	// reduce flickr, start with the blown up thumbnail, then switch to slow-loading bigger version
	// also trying to use innerHTML to prevent opera non-rewriting-of-screen bug
	//$('art_link').href = lnk
	//alert($('the_art_big').innerHTML)
	// um, 
		//console.log('new thumb: ', thumb, 'src:', src)
	// just try lowsrc for now, before goign to more complicated method below lowsrc='" + thumb + "'
	// eventually width will be more, but reduce by about 130 now to make the 'frame' appearing less jarring
	
	// CSS 'frame'
  add_frame(lnk,thumb)
  
	// set to full version after it's loaded
	if (timer) clearTimeout(timer)
	loadings[src]= new Image()
	loadings[src].src = src
	//timer = setTimeout("check_loaded('"+src+"','"+lnk+"')", 20) // shorten after testing..
	check_loaded(src, lnk)
	$('#art_title').html("<a href=\""+lnk+"\">"+title+"</a>")
}

function add_frame(lnk,src) {
  if ($('#the_art_big table').length) {
    $('#art_img').attr('src',src).parent().attr('href',lnk)
    return
  }
  
  // why sizing these differently?  No frame...
	if (location.href.match(/sculptures/)) {
	  $('#the_art_big').html("<table align='center' cellpadding=0 cellspacing=0><tr><td><a href=\""+lnk+"\"><img id='art_img' src='"+src+"' height="+(height+40)+" /></a></td></tr></table>")
	  
  } else {
    // blah, make the 'black' frame show up more.
    //if (location.href.match(/lightscapes/)) 
    //" + (location.href.match(/paintings/) ? 'D8CA7B' : '000') +"
    $('#container').css('background-color','#444')
    
	  $('#the_art_big').html("<table align='center' cellpadding=0 cellspacing=0 style='border: 18px solid #000'><tr><td><a href=\""+lnk+"\"><img id='art_img' src='"+src+"' height="+height+" style='border: 46px solid white'/></a></td></tr></table>")
	}  
}

// doesn't seem to be working very well, as it flashes the new image up over the old right away?
// called with setTimer
function check_loaded(src, lnk) {
	img = loadings[src]
	if (img.height == 0) {
		//console.log("height still 0, src="+src)
		setTimeout("check_loaded('"+src+"','"+lnk+"')", 20)
	} else {
		//console.log('set innerhtml to big version now')
		//$('the_art_big').innerHTML = "<a href=\""+lnk+"\"><img id='art_img' src='" + src + "' <% if @p.id == 'watercolors' %>height='560'<% else %>height='530'<% end %> /></a>"		
		//$('the_art_big').innerHTML = "<table align='center' cellpadding=0 cellspacing=0 style='border: 18px solid #D8CA7B'><tr><td><a href=\""+lnk+"\"><img id='art_img' src='"+src+"' height="+height+" style='border: 46px solid white'/></a></td></tr></table>"
		
		// now that it's loaded, a css update should be instant?
		$('#the_art_big img').attr('src', src)
	}

}


// update for jquery
function change_size(n) {
	if (n == 1) { 
	  $('#item_selection_1').val(3); $('#frame_select').val('0'); $('#frame_select').attr('disabled',false) }
	if (n == 2) { 
	  $('#item_selection_1').val(1); $('#frame_select').val('0'); $('#frame_select').attr('disabled',true);reset_big() } // 20x30 unframe
	if (n == 3) { 
	  $('#item_selection_1').val(2); $('#frame_select').val('0'); $('#frame_select').attr('disabled', true);reset_big()}	// 16x20 unframe
	//if (n == 4) { $('#item_selection_1').value = 3; $('#frame_select').value = '0'; $('#frame_select').disabled = true;reset_big()}	// 11x14 unframe
	//console.log("n = " + n, $('#item_selection_1').val(), $('#frame_select').val(), $('#frame_select').disabled)
}

function reset_big() {
	if (is_vertical) return	
	a= $('#art_inner')
	a.style.paddingLeft = '0px'
	a.style.paddingTop = '0px'	
	a.width = 802
	
	m = $('#art_mid')	
	m.style.width='100%' 
	
	o = $('#art_outer')
	o.style.backgroundImage = ''
	//artouter.style.border = '1px solid #000'
}

function change_frame(n) {
	$('#item_selection_1').val(n)
	
	return;
	// old rame stuff, but I ditched art_inner and artouter and art_mid wrappers...
	//if (is_vertical) return
	//if (n==0) {reset_big(); return}
	
	a = $('#art_inner')
	a.width = 651
	a.css('paddingLeft','125px')
	a.css('paddingTop', '82px')
	/* moving the image left within the overflow: hidden doesn't actually hide the left part, hmm.  Just hide the right edge? */
	/*a.style.left = '-8px'*/

	o = $('#art_outer') // already auto-set == can't reset!
	o.css('backgroundImage',"url(/images/framed/" + frame_color_names[n].toLowerCase() + ".jpg)")
	o.css('height','587px')
		
	m = $('#art_mid')	
	m.css('width','667px')
}