/**
 * @title		yBox
 * @vesrion		0.0.2
 * @author		ylo
 */
// js class on html tag
document.getElementsByTagName("html")[0].className = "js";


/**
 * @section		png fix configuration
 */
pxPath = 'tpl/img/common/visu/px.gif';


// general inits
$(document).ready(function () {
	
	// init isIE
	manageIsIE.init();
	
	// png fix
	fixPng();
	
});


/**
 * @section		create global var ieIE 6, 7 & 8
 */
var isIE = false;
var manageIsIE = {
	init: function () {
		if (jQuery.browser.msie) {
			isIE = true;
			if(parseInt(jQuery.browser.version) == 6) {
				isIE = 6;
			} else if (parseInt(jQuery.browser.version) == 7) {
				isIE = 7;
			} else if (parseInt(jQuery.browser.version) == 8) {
				isIE = 8;
			}
		}
	}
};

/**
 * @section		fix png images
 * @affect		IE6
 */
function fixPng(elmt) {

	if(isIE == 6) {
		if(elmt) {
			var container = $(elmt);
		} else {
			var container = $('html');
		}
		var oImage = $('img', container);
		
		if(!oImage.length)  return;
		for(var i=0;i<oImage.length;i++) {
			if(oImage[i].src.indexOf('.png') > -1) {
				with(oImage[i].style) {
					background = 'none';
					filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + oImage[i].src + '", sizingMethod="image")';
				}
				oImage[i].src = pxPath;
			}
		}
	}
}

// manage custom select
(function($){
	$.fn.extend({
		ySelect: function() {
			return this.each(function() {
				
				var elmt = $(this);
				var container = elmt.parent();
				
				var select = {
					params: {
						mainContent: '<div class="selectContainer"><div class="link"></div><div class="itemList"><ul></ul></div></div>'
					},
					getSelectedItem: function (obj) {
						var elmt = $(obj);
						var list = elmt.find('option').filter(':selected');
						return list;
					},
					show: function (obj) {
						var elmt = $(obj);
					},
					hide:function (obj) {
						var elmt = $(obj);
					},
					update: function (obj) {
						var elmt = $(obj);
						var container = elmt.parent();
						var link = $('.link', container);
						
						var selectedItem = select.getSelectedItem(elmt);
						link.html(selectedItem.text());
					},
					select: function (obj, value) {
						var elmt = $(obj);
						elmt.val(value);
						elmt.change();
						select.update(elmt);
					}
				};
		
				// create plugin html
				container.append(select.params.mainContent);
				
				var link = $('.link', container);
				var linkList = $('.itemList', container);
				
				// create item into link list
				$('option', elmt).each(function () {
					var optionItem = $(this);
					$('ul', linkList).append('<li><a href="#'+optionItem.attr('value')+'">'+optionItem.text()+'</a></li>');
					$('ul li:last a', linkList).click(function (e) {
						e.preventDefault();
						var item = $(this);
						var value = item.attr('href').split('#')[1];
						select.select(elmt, value);
						linkList.hide();
					});
				});
				
				// bind click on link
				link.click(function () {
					linkList.toggle();
				});
				
				// update first state
				select.update(elmt);
				
				// bind onChange event on select item
				elmt.change(function () {
					select.update(elmt);
				});
				
				// container on foreground when mouse hover
				container.parent().parent().hover(function () {
					var obj = $(this);
					obj.css('z-index', '2');
				}, function () {
					var obj = $(this);
					obj.css('z-index', '1');
					linkList.hide();
				});
				
			});
		}
	});
})(window.jQuery);