// JavaScript Document

$(function(){
	if (!Modernizr.input.placeholder) $('input[placeholder]').each(function(){ placeholder($(this)); });
	
	//Shadowbox.init();
	
	slideshow($('#slideshow'));
	
	$('.zebra > li:odd, tr:odd, .zebra.list > .item:odd').addClass('odd');
	$('.zebra > li:even, tr:even, .zebra.list > .item:odd').addClass('even');
	$('table').attr('cellspacing', 0);
	
	loginbox();
	
});

/* ** ------------------------------------------------------------------------- ** */
/*									LOGINBOX
/* ** ------------------------------------------------------------------------- ** */

function loginbox(){
	var $button = $('#loginbox').find('.label');
	var $box = $('#loginbox').find('.box');
	
	$button.bind('click', function(){
		$button.toggleClass('opened');
		$box.toggle('fade', 200);
	});
}

/* ** ------------------------------------------------------------------------- **
									SLIDESHOW
   ** ------------------------------------------------------------------------- ** */
function slideshow($slideshow){
	$slideshow.find('img').hide().first().show().addClass('act');
	images = new Array();
	index = 0;
	next = index + 1;
	$slideshow.children().each(function(i, img){
		images[i]=$(img);
	});
	
	setTimeout(fadeNext, 4000);
	
	function fadeNext(){
		images[next].addClass('next').fadeIn(700, function(){
			images[index].hide().removeClass('act');
			images[next].addClass('act').removeClass('next');
			index = next;
			next++;
			if( next == images.length ) next = 0;
			setTimeout(fadeNext, 4000);
		});
	}
}

/* ** ------------------------------------------------------------------------- ** */
/*								Showroom START
/* ** ------------------------------------------------------------------------- ** */

/*
 * Showroom beta
 * last modified 2011. 06. 21.
 *
 **/
$(window).load(function(){
	$('.showroom').each(function(){ showroom($(this)); });
});
var _inacThumbOp = 1.0;
var _acThumbOp = 0.3;
var _overThumbOp = 0.7;
var _rollOverFade = 200;
var _showHideFade = 400;
var _slideControlInact = 0.1;
var _slideControlAct = 0.6;
var _slideControlOver = 0.9;
var _slideControlDown = 1.0;
var _scrollSpeed = 200;
var _scrollStep = 100;

function showroom(showroom){
	
	showroom.identify('showroom');
	showroom.fadeIn();
	

	var showroom = showroom,
		showFrame = showroom.find('.showFrame'),
		thumbFrame = showroom.find('.thumbFrame'),
		thumbClip = showroom.find('.thumbClip'),
		thumbSlide = showroom.find('.thumbSlide'),
		thumbs = thumbSlide.children(),
		images = new Array(),
		scrollNext = showroom.find('.scrollNext'),
		scrollBack = showroom.find('.scrollBack');
	
	showroom.data({
		'showFrame' : showFrame,
		'thumbSlide' : thumbSlide
	});
	showFrame.data({
		'showroom' : showroom,
		'thumbSlide' : thumbSlide
	});
	thumbSlide.data({
		'showroom' : showroom,
		'showFrame' : showFrame,
		'thumbClip' : thumbClip,
		'scrollNext' : scrollNext,
		'scrollBack' : scrollBack
	});
	scrollNext.data({
		'thumbSlide' : thumbSlide,
		'thumbClip' : thumbClip
	});
	scrollBack.data({
		'thumbSlide' : thumbSlide,
		'thumbClip' : thumbClip
	});
	
	// collect images data from thumbs, set thumb opacity, events
	thumbs.each(function(i){
		var thumb =$(this);
		images[i] = { Id: showroom.attr('id')+'_img'+i, Source : thumb.attr('href')};
		thumb.attr('href', '#'+showroom.attr('id')+'_img'+i);
		//thumb.fadeTo(_rollOverFade, _inacThumbOp);
		bindThumb(thumb);
	});
	// create images from the collected data and the imageTemlpate, and appent them to showFrame
	$('#imageTemplate').tmpl(images).appendTo(showFrame);
	
	// activate and fade in the first thumb and image
	$('#'+showroom.attr('id')+'_img0').fadeIn(_showHideFade).load(function(){
		/*
		showFrame.animate({
			height: [$('#'+showroom.attr('id')+'_img0').height(), 'jswing']
		}, _showHideFade);*/
		$(thumbs[0]).unbind();
		$(thumbs[0]).addClass('active');
	});
	
	bindWheel(thumbSlide);
	setScrollControls(thumbSlide);
	
}
// bind mouse wheel for thumb slide
function bindWheel(slide){
	slide.data('thumbClip').mousewheel(function(event, delta){
		if(delta < 0) scrollNext(slide);
		if(delta > 0) scrollBack(slide);
		return false;
	});
};

// set and bind thumb slide controls
function setScrollControls(slide){
	slide.data('scrollNext').bind('click', function(){ scrollNext(slide); });
	slide.data('scrollBack').bind('click', function(){ scrollBack(slide); });
	
};

// scroll thumbs forward
function scrollNext(slide){
	slide.data('thumbClip').scrollTo('+='+_scrollStep+'px', 200, {axis: 'y'}, 'linear');
};

// scroll thumbs backward
function scrollBack(slide){
	slide.data('thumbClip').scrollTo('-='+_scrollStep+'px', 200, {axis: 'y'}, 'linear');
};

// bind thumb events
function bindThumb(thumb){
	thumb.bind('click', function(){
		showImage(thumb);
		return false;
	});
};


// change image in showFrame
function showImage(thumb){
	// fade out previously selected thumb and image
	var prevThumb = thumb.siblings('.active');
	bindThumb(prevThumb);
	prevThumb.removeClass('active');
	thumb.addClass('active');
	thumb.unbind();
	$(prevThumb.attr('href')).fadeOut(function(){
		// fade in selected thumb and image
		/*
		$(thumb.attr('href')).parent('.showFrame').animate({
			height: [$(thumb.attr('href')).height(), 'jswing']
		}, _showHideFade);*/
		$(thumb.attr('href')).fadeIn();
	});
};

/* ** ------------------------------------------------------------------------- ** */
/*								Showroom END
/* ** ------------------------------------------------------------------------- ** */

/* ** ------------------------------------------------------------------------- ** */
/*								INPUT HINT VALUES (PLACEHOLDER)
/* ** ------------------------------------------------------------------------- ** */
function placeholder(field) {
	
	field.data('hint', field.attr('placeholder'));
	field.addClass('hint');
	if (field.attr('type') == 'password') createPwHint(field);
	else {
		field.attr('value', field.data('hint'));
		field.focus(function() {focusField($(this))});
		field.blur(function() {blurField($(this))});
	}
	
	function focusField(field) { if (field.attr('value') == field.data('hint')) field.attr('value', '').removeClass('hint')};
	function blurField(field) { if (field.attr('value') == '') field.attr('value', field.data('hint')).addClass('hint')};
	
	function createPwHint(field) {
		field.wrap('<div class="pwHint"></div>');
		field.attr('value', '').removeClass('hint').hide();
		
		var pwHint = field.parents('.pwHint').first();
		pwHint.css({ 'position' : 'relative', 'display' : 'inline-block' });
		$(pwHint).append('<input class="hint" type="text">');
		
		var hint = pwHint.find('.hint');
		hint.attr('value', field.data('hint'));
		
		hint.focus(function(){
			hint.hide();
			field.show();
			field.focus();
		});
		field.blur(function(){
			if( field.attr('value') == '') {
				field.hide();
				hint.show();
			}
		});
	};
}