$(document).ready(function(){

    if (!$) return;
    $.fn.extend({
        fixPNG: function(sizingMethod, forceBG) {
                if (!($.browser.msie)) return this;
                var emptyimg = "/images/x.gif"; //Path to empty 1x1px GIF goes here
                sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions)
                this.each(function() {
                        var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"),
                                imgname = (isImg) ? this.src : this.currentStyle.backgroundImage,
                                src = (isImg) ? imgname : imgname.substring(5,imgname.length-2);
                        this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
                        if (isImg) this.src = emptyimg;
                        else this.style.backgroundImage = "url(" + emptyimg + ")";
                });
                return this;
        }
    });

	calcsize('.orange-slider');
	var id = $('.orange-slider li.active').attr('id');
    $('.orange-slider .active-bg-left.'+id).css('display','block');
	$('.orange-slider a.select-this').click(function(){
        $(this).parent().addClass('current');
        if($(this).parent().attr('id') == 'project-1') {
            slide1('.orange-slider');
        } else if ($(this).parent().attr('id') == 'sell-2') {
            slide2('.orange-slider');
        } else if ($(this).parent().attr('id') == 'montage-3') {
            slide3('.orange-slider');
        } else if ($(this).parent().attr('id') == 'setup-4') {
            slide4('.orange-slider');
        } else if ($(this).parent().attr('id') == 'repair-5') {
            slide5('.orange-slider');
        }
		return false;
	});

});
$(window).resize(function(){
	calcsize_res('.orange-slider');
});

function calcsize(div){
	var all_width = $(div).width();
	var width_elts = ($(div).children('ul').children('li:not(.active)').width()-29)*($(div).children('ul').children('li').size()-1);
	var active_width = all_width-300-width_elts;
    var ul_width = all_width-300;
	//alert(width_elts);
	//$(div).find('li.active').width(active_width);
    $(div).find('.active-bg-left').width(active_width-111);
    $(div).find('.ow').html(all_width);
    $('.orange-slider ul').width(ul_width);
    $('.orange-slider .o-bg').width(ul_width-34);
	if (active_width < 550) $(div).find('.orange-slider-text').css({'font-size':'11px', 'line-height':'15px'});
	if (active_width > 550 && active_width < 700) $(div).find('.orange-slider-text').css({'font-size':'12px', 'line-height':'16px'});
	if (active_width >= 700 && active_width < 890) $(div).find('.orange-slider-text').css({'font-size':'14px', 'line-height':'18px'});
	if (active_width > 890) $(div).find('.orange-slider-text').css({'font-size':'16px', 'line-height':'20px'});
}
function calcsize_res(div){
    var all_width = $(div).width();
    var width_elts = ($(div).children('ul').children('li:not(.active)').width()-29)*($(div).children('ul').children('li').size()-1);
    var active_width = all_width-300-width_elts;
    var ul_width = all_width-300;
    $(div).find('.active-bg-left').width(active_width-111);
    $('.orange-slider ul').width(ul_width);
    $('.orange-slider .o-bg').width(ul_width-34);
    if($('#sell-2').hasClass('active')){
        $('#project-1').css('right',active_width+69*3-29)
    } else if($('#montage-3').hasClass('active')){
        $('#project-1').css('right',active_width+69*3-29)
        $('#sell-2').css('right',active_width+69*2-29)
    } else if($('#setup-4').hasClass('active')){
        $('#project-1').css('right',active_width+69*3-29)
        $('#sell-2').css('right',active_width+69*2-29)
        $('#montage-3').css('right',active_width+69-29)
    } else if($('#repair-5').hasClass('active')){
        $('#project-1').css('right',active_width+69*3-29)
        $('#sell-2').css('right',active_width+69*2-29)
        $('#montage-3').css('right',active_width+69-29)
        $('#setup-4').css('right',active_width-29)
    };
    if (active_width < 550) $(div).find('.orange-slider-text').css({'font-size':'11px', 'line-height':'15px'});
    if (active_width > 550 && active_width < 700) $(div).find('.orange-slider-text').css({'font-size':'12px', 'line-height':'16px'});
    if (active_width >= 700 && active_width < 890) $(div).find('.orange-slider-text').css({'font-size':'14px', 'line-height':'18px'});
    if (active_width > 890) $(div).find('.orange-slider-text').css({'font-size':'16px', 'line-height':'20px'});
}

function slide1(div){
    $('.orange-slider .o-bg').css('background','#ec8a1a');
    var all_width = $(div).width();
    var width_elts = ($(div).children('ul').children('li:not(.active)').width()-29)*($(div).children('ul').children('li').size()-1);
    var active_width = all_width-300-width_elts;
    var ul_width = all_width-300;
    if($('#sell-2').hasClass('active')){
        $('.sell-2').css('z-index','0').fadeOut();
        $('#project-1').animate({right:'-='+(active_width-98)});
    } else if($('#montage-3').hasClass('active')){
        $('.montage-3').css('z-index','0').fadeOut();
        $('#project-1').animate({right:'-='+(active_width-98)});
        $('#sell-2').animate({right:'-='+(active_width-98)});
    } else if($('#setup-4').hasClass('active')){
        $('.setup-4').css('z-index','0').fadeOut();
        $('#project-1').animate({right:'-='+(active_width-98)});
        $('#sell-2').animate({right:'-='+(active_width-98)});
        $('#montage-3').animate({right:'-='+(active_width-98)});
    } else if($('#repair-5').hasClass('active')){
        $('.repair-5').css('z-index','0').fadeOut();
        $('#project-1').animate({right:'-='+(active_width-98)});
        $('#sell-2').animate({right:'-='+(active_width-98)});
        $('#montage-3').animate({right:'-='+(active_width-98)});
        $('#setup-4').animate({right:'-='+(active_width-98)});
    };
    $('.project-1').css('z-index','6').fadeIn();
    $('.active').removeClass('active');
    $('.current').removeClass('current').addClass('active');
}
function slide2(div){
    $('.orange-slider .o-bg').css('background','#f8a127');
    var all_width = $(div).width();
    var width_elts = ($(div).children('ul').children('li:not(.active)').width()-29)*($(div).children('ul').children('li').size()-1);
    var active_width = all_width-300-width_elts;
    var ul_width = all_width-300;
    if($('#project-1').hasClass('active')){
        $('.project-1').css('z-index','0').fadeOut();
        $('#project-1').animate({right:'+='+(active_width-98)});
    } else if($('#montage-3').hasClass('active')){
        $('.montage-3').css('z-index','0').fadeOut();
        $('#sell-2').animate({right:'-='+(active_width-98)});
    } else if($('#setup-4').hasClass('active')){
        $('.setup-4').css('z-index','0').fadeOut();
        $('#sell-2').animate({right:'-='+(active_width-98)});
        $('#montage-3').animate({right:'-='+(active_width-98)});
    } else if($('#repair-5').hasClass('active')){
        $('.repair-5').css('z-index','0').fadeOut();
        $('#sell-2').animate({right:'-='+(active_width-98)});
        $('#montage-3').animate({right:'-='+(active_width-98)});
        $('#setup-4').animate({right:'-='+(active_width-98)});
    };
    $('.sell-2').css('z-index','5').fadeIn();
    $('.active').removeClass('active');
    $('.current').removeClass('current').addClass('active');
}
function slide3(div){
    $('.orange-slider .o-bg').css('background','#f9ab29');
    var all_width = $(div).width();
    var width_elts = ($(div).children('ul').children('li:not(.active)').width()-29)*($(div).children('ul').children('li').size()-1);
    var active_width = all_width-300-width_elts;
    var ul_width = all_width-300;
    if($('#project-1').hasClass('active')){
        $('.project-1').css('z-index','0').fadeOut();
        $('#project-1').animate({right:'+='+(active_width-98)});
        $('#sell-2').animate({right:'+='+(active_width-98)});
    } else if ($('#sell-2').hasClass('active')) {
        $('.sell-2').css('z-index','0').fadeOut();
        $('#sell-2').animate({right:'+='+(active_width-98)});
    } else if($('#setup-4').hasClass('active')){
        $('.setup-4').css('z-index','0').fadeOut();
        $('#montage-3').animate({right:'-='+(active_width-98)});
    } else if($('#repair-5').hasClass('active')){
        $('.repair-5').css('z-index','0').fadeOut();
        $('#montage-3').animate({right:'-='+(active_width-98)});
        $('#setup-4').animate({right:'-='+(active_width-98)});
    };
    $('.montage-3').css('z-index','4').fadeIn();
    $('.active').removeClass('active');
    $('.current').removeClass('current').addClass('active');
}
function slide4(div){
    $('.orange-slider .o-bg').css('background','#f8b521');
    var all_width = $(div).width();
    var width_elts = ($(div).children('ul').children('li:not(.active)').width()-29)*($(div).children('ul').children('li').size()-1);
    var active_width = all_width-300-width_elts;
    var ul_width = all_width-300;
    if($('#project-1').hasClass('active')){
        $('.project-1').css('z-index','0').fadeOut();
        $('#project-1').animate({right:'+='+(active_width-98)});
        $('#sell-2').animate({right:'+='+(active_width-98)});
        $('#montage-3').animate({right:'+='+(active_width-98)});
    } else if ($('#sell-2').hasClass('active')) {
        $('.sell-2').css('z-index','0').fadeOut();
        $('#sell-2').animate({right:'+='+(active_width-98)});
        $('#montage-3').animate({right:'+='+(active_width-98)});
    } else if ($('#montage-3').hasClass('active')) {
        $('.montage-3').css('z-index','0').fadeOut();
        $('#montage-3').animate({right:'+='+(active_width-98)});
    } else if($('#repair-5').hasClass('active')){
        $('.repair-5').css('z-index','0').fadeOut();
        $('#setup-4').animate({right:'-='+(active_width-98)});
    };
    $('.setup-4').css('z-index','3').fadeIn();
    $('.active').removeClass('active');
    $('.current').removeClass('current').addClass('active');
}
function slide5(div){
    $('.orange-slider .o-bg').css('background','#fdc72b');
    var all_width = $(div).width();
    var width_elts = ($(div).children('ul').children('li:not(.active)').width()-29)*($(div).children('ul').children('li').size()-1);
    var active_width = all_width-300-width_elts;
    var ul_width = all_width-300;
    if($('#project-1').hasClass('active')){
        $('.project-1').css('z-index','0').fadeOut();
        $('#project-1').animate({right:'+='+(active_width-98)});
        $('#sell-2').animate({right:'+='+(active_width-98)});
        $('#montage-3').animate({right:'+='+(active_width-98)});
        $('#setup-4').animate({right:'+='+(active_width-98)});
    } else if ($('#sell-2').hasClass('active')) {
        $('.sell-2').css('z-index','0').fadeOut();
        $('#sell-2').animate({right:'+='+(active_width-98)});
        $('#montage-3').animate({right:'+='+(active_width-98)});
        $('#setup-4').animate({right:'+='+(active_width-98)});
    } else if ($('#montage-3').hasClass('active')) {
        $('.montage-3').css('z-index','0').fadeOut();
        $('#montage-3').animate({right:'+='+(active_width-98)});
        $('#setup-4').animate({right:'+='+(active_width-98)});
    } else if ($('#setup-4').hasClass('active')) {
        $('.setup-4').css('z-index','0').fadeOut();
        $('#setup-4').animate({right:'+='+(active_width-98)});
    };
    $('.repair-5').css('z-index','2').fadeIn();
    $('.active').removeClass('active');
    $('.current').removeClass('current').addClass('active');
}