$(document).ready(function(){
    
    
    load_pagination = function(){
        var slide_count = $('li img').length;
        var pagers_html = '';
        for(var i=0; i<slide_count; i++){
            pagers_html += '<div class="pager">•</div>';
        }
        $('#pagination').html(pagers_html);
        $('.pager:last').addClass('selected');
        $('#blinder').fadeOut();
    }
    
    
    load_picture = function(new_index,old_index){
        
        $('#blinder').fadeIn(function(){
            var holder = $('#display ul');
            var offset_nr = new_index - old_index;
            var slide_h = 368;
            var position = holder.position();
            var current_top = position.top;
            var offset_h = current_top + offset_nr * slide_h;
            holder.css({ 'top': offset_h });
            var total_pics = $('.pager').length;
            var pic = total_pics - new_index -1;
            var desc = $('li img').eq(pic).attr('desc');
            var client = $('li img').eq(pic).attr('client');
            $('#client').html(client);
            $('#media').html(desc);
        });
        $('#blinder').fadeOut();
        
    }
    
    var infobar_contents = 'client: <span id="client"></span>, <span id="infoname_2">work: </span><span id="media"></span><div id="pagination"></div><div id="dot1"></div><div id="dot2"></div><div id="dot3"></div><div id="dot4"></div><div id="dot5"></div>';
    
    
    
    $('#display').load('intro.html', function() {
        $('#blinder').fadeOut();
    });
    $('#logo').live('click', function(){
        $('body').data('panel','home');
        $('#blinder').fadeIn(function(){
            $('#display').load('intro.html', function() {
                $('#infobar').empty();
                $('#blinder').fadeOut();
            });
        });
        
    })
    
    
    
    
    $('#web').live('click', function(){
        $('body').data('panel','web');
        $('#blinder').fadeIn(function(){
            $('#display').load('web.html', function() {
                $('#infobar').html(infobar_contents);
                
                
                $('#infoname_2').html('work: ');
                $('#client').html('Oak Alarms');
                $('#media').html('identity, website design,');
                load_pagination();
            });
        });
    })
    $('#print').live('click', function(){
        $('body').data('panel','print');
        $('#blinder').fadeIn(function(){
            $('#display').load('print.html', function() {
                $('#infobar').html(infobar_contents);
                $('#infoname_2').html('work: ');
                $('#client').html('Puma');
                $('#media').html('perfume package design');
                load_pagination();
                
            });
        });
    })
    $('#illustration').live('click', function(){
        $('body').data('panel','illustration');
        $('#blinder').fadeIn(function(){
            $('#display').load('illustration.html', function() {
                $('#infobar').html(infobar_contents);
                $('#infoname_2').html('artwork: ');
                $('#client').html('Computer Arts');
                $('#media').html('Fenix');
                load_pagination();
                
            });
        });
    })
    
    
    $('.pager').live('click', function(event){
        if(!$(this).hasClass('selected')){
            var new_index = $(this).index();
            var old_index = $(".pager[class~=selected]").index();
            $(this).toggleClass('selected').siblings().removeClass('selected');
            load_picture(new_index,old_index);
        }
    })
    
    
    $('#contact').live('click', function(){
        
        $('#e_mail #message').removeClass('error');
		$('#contact_form span.error_wrapper').remove();
        $('#message').val('');
        $('#e_mail').val('');
        $('#contact_form').slideToggle(function(){
            $('#e_mail').focus();
        });
        
    })
    
    $('#contact_form').validate({
        
        rules: {
            e_mail: {
                required: true,
                email: true
            },
            message: {
                required: true,
                maxlength: 5000
            }
        },
        wrapper: 'span',
        errorPlacement: function(error, element) {
            poss = element.position();
            error.insertBefore(element);
            error.addClass('error_wrapper');// add a class to the wrapper
            error.css('position', 'absolute');
            error.css('top', poss.top + 2);
            error.css('left', poss.left + element.outerWidth());
            
        },
        submitHandler: function(form) {
            $('#contact_form').ajaxSubmit({
                success:   function (responseText, statusText)  {
                    
                    $('#info').addClass('sent');
                    setTimeout(function(){
                        $('#contact_form').slideUp(function(){
                            $('#info').removeClass('sent');
                        })
                    },'2600');
                    
                }
            });
        }
        
    });
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
})