var itnvis = 0,
    viscnt = 0,
    totcnt = 0,
    rhTimer = null,
    folio = null,
    workpos = null,
    works = [],
    folioanim = false;

$(document).ready(function () {
    var arrow = $('#menu b.arrow');

    $('#menu a').hover(
		function () {
		    $(this).addClass('over');
		},
		function () {
		    $(this).removeClass('over');
		}
	);

    var ul = $('#folio-v');
    if (ul.length > 0) {
        $('#tnails').height($('#nails').height() + 50);
        var winw = $(window).width() - 65;
        if (winw < 990) winw = 990;
        var ulw = ul.width() - 50;
        totcnt = $('li', ul).length;
        itnvis = viscnt = Math.floor(winw / 275) - 1;
        viscnt++;
        if (winw < ulw) {
            itnvis = viscnt = Math.floor(winw / 275) - 1;
            viscnt++;
            $('li:gt(' + itnvis + ')', ul).hide();
            $('#right').show();
        }
        $('#right a').click(function () {
            $('#right').hide();
            $('li:lt(' + (itnvis + viscnt + 1) + ')', ul).show();
            $('#nails').animate({
                left: -(275 * (itnvis + 1))
            }, 700, 'easeOutCirc', function () {
                if (totcnt > (itnvis + 1)) {
                    $('#right').fadeIn('fast');
                }
                $('#left').show();
            });
            itnvis += viscnt;
            return false;
        });

        $('#left a').click(function () {
            $('#left').hide();
            itnvis -= viscnt;
            $('li:gt(' + itnvis + ')', ul).hide();
            $('#nails').animate({
                left: -(275 * ((itnvis - viscnt) + 1))
            }, 700, 'easeOutCirc', function () {
                if ((itnvis - viscnt) + 1 > 0) {
                    $('#left').fadeIn('fast');
                }
                $('#right').show();
            });
            return false;
        });
        $(window).bind('resize', handlethumbResize);
    }

    folio = $('#folio');
    if (folio.length > 0) {
        $('div.work:visible').css({ left: -5000, top: -5000, opacity: 0.1 });
        setWorkPositions($('div.work:visible'));
        $('div.work:visible').css({ left: workpos.left + 300, top: workpos.top })
            .animate({
                left: workpos.left,
                opacity: 1.0
            }, 500, 'easeInOutQuad', function () { folioanim = false; });

        $('#headline li.msg').click(
            function () {
                if ($('div', $(this)).is(':visible'))
                    $('div', $(this)).stop(true, true).slideUp('fast');
                else
                    $('div', $(this)).stop(true, true).slideDown('fast');
            }
        );
        $(window).bind('resize', folioresizeSize);

        if (works.length > 1) {
            $('#right').show().click(function () {
                if (!folioanim) {
                    folioanim = true;
                    var cwork = $('div.work:visible');
                    var idx = parseInt(cwork[0].id.substring(4));
                    if ((idx + 1) >= works.length) {
                        folioanim = false;
                        return false;
                    }
                    if ((idx + 2) == works.length) { $('#right').hide(); }

                    if ($('#work' + (idx + 1)).length == 0) {
                        folio.append('<div class="work none" id="work' + (idx + 1) + '" style="left:154px;"><img src="/Common/img/ajax-loader.gif" align="loader" /></div>');
                        cwork.fadeOut(function () {
                            var $w = $('#work' + (idx + 1));
                            $w.show();
                            var img = new Image();
                            $(img).load(function () {
                                $w.empty()
                                    .append(this)
                                    .css({ left: -5000, top: -5000, opacity: 0.1 });

                                setWorkPositions($w);
                                $w.css({ left: workpos.left + 300, top: workpos.top })
                                    .animate({
                                        left: workpos.left,
                                        opacity: 1.0
                                    }, 500, 'easeInOutQuad', function () { folioanim = false; });
                            }).attr('src', works[idx + 1]);
                        });
                    } else {
                        cwork.fadeOut(function () {
                            var $w = $('#work' + (idx + 1));
                            $w.css({ left: -5000, top: -5000, opacity: 0.1 }).show();
                            setWorkPositions($w);
                            $w.css({ left: workpos.left + 300, top: workpos.top })
                                .animate({
                                    left: workpos.left,
                                    opacity: 1.0
                                }, 500, 'easeInOutQuad', function () { folioanim = false; });
                        });
                    }
                    $('#left').show();
                }
                return false;
            });

            $('#left').click(function () {
                if (!folioanim) {
                    folioanim = true;
                    var cwork = $('div.work:visible');
                    var idx = parseInt(cwork[0].id.substring(4));
                    if (idx == 0) {
                        folioanim = false;
                        return false;
                    }
                    if (idx == 1) { $('#left').hide(); }

                    cwork.fadeOut(function () {
                        var $w = $('#work' + (idx - 1));
                        $w.css({ left: -5000, top: -5000, opacity: 0.1 }).show();
                        setWorkPositions($w);
                        $w.css({ left: workpos.left - 300, top: workpos.top })
                            .animate({
                                left: workpos.left,
                                opacity: 1.0
                            }, 500, 'easeInOutQuad', function () { folioanim = false; });
                    });
                    $('#right').show();
                }
                return false;
            });
        }
    }

    var homeenv = $('#home');
    if (homeenv.length > 0) {
        var kverse = $('#kverse');
        $('div.verse').eq(0).css({ top: -5000 }).show();

        //$('img:gt(0)', kverse).css({ opacity: 0.5 });

        var hp = getHomePositions($('div.verse').eq(0));
        $('div.verse').eq(0).hide().css({ top: hp.top }).fadeIn('slow');
        $(window).bind('resize', homeresizeSize);

        $('img', kverse).live('click', function () {
            var kvi = parseInt(this.id.substring(2));
            var kvsrc = $(this).attr('rel');
            var pli = $(this).parent('li');
            var pl = pli.position().left;
            $('.kvspan a').removeClass('on');
            $('#ak' + kvi).addClass('on');

            if (kverse.position().left != (0 - pl)) {
                kverse.animate({ left: 0 - pl }, 750, 'easeInOutQuad');
                if (pli.hasClass('thmb')) {
                    pli.animate({ width: 775 }, 750, 'easeInOutQuad', function () {
                        pli.append('<div class="kvloader"><img src="/Common/img/ajax-loader.gif" align="loader" /></div>');
                        var img = new Image();
                        $(img).load(function () {
                            pli.empty().removeClass('thmb').addClass('chgd').append(this);
                            $(this).hide().attr('id', ('kv' + kvi)).fadeIn(1250);
                        }).attr('src', kvsrc);
                    });
                }
            }
        });

        $('.kvspan a').click(function () {
            var aki = parseInt(this.id.substring(2));
            $('#kv' + aki).click();
            return false;
        });

    }
}); 

function folioresizeSize(){
    if (rhTimer) clearTimeout(rhTimer);
    rhTimer = setTimeout(folioSize, 100); 
}

function folioSize(){
    var work = $('div.work:visible');
	setWorkPositions(work);
    work.stop(false, false).animate({ 
        left:workpos.left, 
        top:workpos.top 
    }, 400, 'easeInOutQuad');
}

function setWorkPositions(work){
    folio.height($(window).height() - 240);	
	if(folio.height() < (work.height() + 40)){
	    folio.height(work.height()+40);
	}
	var area = { w:folio.width() - 70, h:folio.height() };
	
	workpos = { left:Math.floor((area.w - work.width())/2), top:Math.floor((area.h - work.height())/2)}
	if(workpos.left < 1) workpos.left = 0;
	if(workpos.top < 1) workpos.top = 0;
}

function homeresizeSize(){
    if (rhTimer) clearTimeout(rhTimer);
    rhTimer = setTimeout(homeSize, 100); 
}
function homeSize(){
    var vrs = $('div.verse:visible');
	var hp = getHomePositions(vrs);
    vrs.stop(false, false).animate({ 
        top:hp.top 
    }, 400, 'easeInOutQuad');
}


function getHomePositions(verse){
	var $h = $('#home');
	$h.height($(window).height() - 190);	
	if($h.height() < (verse.height() + 40)){
	    $h.height(verse.height()+40);
	}
	var area = { w:$h.width() - 70, h:$h.height() };	
	var pos = { left:Math.floor((area.w - verse.width())/2), top:Math.floor((area.h - (verse.height() + 20))/2)}
	if(pos.left < 1) pos.left = 0;
	if(pos.top < 1) pos.top = 0;
	return pos;
}

function handlethumbResize(){    
    if (rhTimer) clearTimeout(rhTimer);
    rhTimer = setTimeout(thumbResize, 100); 
}
function thumbResize(){
    var ul = $('#folio-v');
    var winw = $(window).width() - 65;
    if(winw < 990) winw = 990;
    var ulw = ul.width() - 50;
    $('#left').hide();
    $('#nails').css('left', 0);
    
	if(winw < ulw){
	    itnvis = viscnt = Math.floor(winw / 275) -1;
	    $('li', ul).each(function(idx, el){
	        if(idx > itnvis)
	            $(el).hide();
	        else
	            $(el).show();
	    });
	    $('#right').show();
	    viscnt++;
	} else {
	    $('li', ul).show();
        $('#right').hide();
	}
}

function selectMenu($item, num){
	$item.addClass('on');
}
