/**  
  * Slide design text blocks 
  */
var menu_elements;  //define the block positions into an array
var menu_elements_size;
var design_block_width; //width of the design_block
var header_height;	//height of the header div element
var curr_photo_frame_offset;  //the current position offset (in px) in photo-frame-list
var photo_elements;	//the mapping of photo to id, todo: automate this.
var photo_elements_size; 
var photo_width;  //width of photo
var photo_right_padding; //photo right padding
var fixed_curr_offset;  //variable to store the next position of the photo.

/** 
 * Instantiate all variables and preset values into the DOM
 */
function init(){
    //set menu elements values
    menu_elements = {'menu_design':0,'menu_develop':1,'menu_review':2,'menu_marketing':3};  //define the block positions into an array
    menu_elements_size = 0;    
    //set photo elements values
    photo_elements = {'pn':0, 'bball':1, 'novelty':2, 'bcard':3}; 
    photo_elements_size = 0;
    //set design block values
    design_block_width = parseInt($('.design_block').css('width')); //width of the design_block
    design_block_width += 4;    //tweak to the above, missing 4 pixels.
    $.each(menu_elements,function(){menu_elements_size++;});
    //set shadow-cloak values
    fixed_curr_offset = 0;
    $('#shadow-cloak').css('height', $(document).height());
    $('#shadow-cloak').css('margin-left', $(document).width()/2);
    //the height of the header element, use the css value.
    header_height = $('.header').height();
    //set photo frame related elements
    $.each(photo_elements,function(){photo_elements_size++;});
    photo_width = parseInt($('.portfolio-photo').css('width')); //width of the photo frame
    photo_right_padding = parseInt($('.photo-frame-list :first-child').css('padding-right'));
}

/** 
 * The shadow-cloak animation, expanding from a vertical bar to the whole screen
 * in both directions
 * @param   string      'collapse' for strinking the box, 'expand' to expand it to document size.
 */
function animateShadowCloak(state){
    margin_width=0;
    shadow_cloak_width = 0;

    if(state==='collapse'){
        shadow_cloak_width = '0px';
        margin_width = $(document).width()/2;        
    } else if (state=='expand'){
        shadow_cloak_width = '100%';
        margin_width = 0;
    }
    $('#shadow-cloak').show(); //jquery-1.4.4 fix
    $('#shadow-cloak').animate({ 
        width: shadow_cloak_width,
        marginLeft: margin_width+"px", 
      }, 250);
}

/*
 * bind keyboard to left, right, escape on shadowCloak
 * todo: think of a better way to bind documents
 */
var bindKeysOnShadowCloak = function() {
    $(document).bind('keydown', function(e) {
        if(e.keyCode==37){
            $('#photo-frame .arrows.left').click();
        } else if (e.keyCode==39) {
            $('#photo-frame .arrows.right').click();
        } else if (e.keyCode==27) {
            $('#photo-frame input.close, #shadow-cloak').click();
        }
    });
};
// unbind keys
var unbindKeysOnShadowCloak = function() {
    $(document).unbind('keydown');
};

//bind menu items and shadowCloak related events
var bind_events = function() {
    /**
     * Action clicked on menu items 
     */
    $('.menu li').bind('click', function() {
        var sign = '=';
        var clicked_id = $(this).attr('id');  //id of the clicked <li> element
        var current_node = $('ul').find('li.menu_current').attr('id'); //find the item with 'menu_current' class
        var current_offset =  menu_elements[current_node];  //get the assoc. id
        var offset_pos = current_offset - menu_elements[clicked_id]; //how much more block it has to move based on current position?

        //reset previous tab class, and set the current tab class, and expand its width
        $('.menu li').removeAttr('class');
        $(this).attr('class', 'menu_current');
        
        //slide the clicked block
        if (offset_pos < 0){
            //if the above is negative, that means it should slide from left to right -->
            sign = '-' + sign;
            offset_pos = offset_pos * -1;    //don't want negative numbers.
        } else {
            //slide from right to left <--
            sign = '+'+sign;
        }
        offset_pos = offset_pos * design_block_width;
        $(".sliding_design_text").animate({"left": sign + offset_pos + "px"}, 250);
    });

    /**
     * Action clicked on Projects 
     */
    $('#project_block div').bind('click', function(){
        var curr_offset = 0;
        var photo_index = photo_elements[$(this).attr('id')];
        //hide the prev button if it's the first item, same for the last.
        $('#photo-frame .left, #photo-frame .right').show();
        if(photo_index===0){
            $('#photo-frame .left').hide();
        } else if (photo_index===photo_elements_size-1){
            $('#photo-frame .right').hide();
        }

        //bind keyboard actions to left-click, right-click actions
        bindKeysOnShadowCloak();

        //set photo-frame offset with respect to this photo
        curr_offset = -1*(photo_width + photo_right_padding)*photo_index;
		fixed_curr_offset = curr_offset;
        $('.photo-frame-list').css("left", curr_offset+"px");
        
        //lightbox here
        animateShadowCloak('expand');
        $(this).find('a').css('left', -288);
        $(this).find('a').css('z-index', 11);
        //add padding to the top so the photo-frame is always in the center of the page
        $('#photo-frame').css('top', self.pageYOffset-header_height);
        $('#photo_container').show();
    })

    /**
     * When the 'x' is clicked on the photo-frame
     */
    $('#photo-frame input.close, #shadow-cloak').bind('click', function(){
        //the shaded background
        $('#photo_container').hide();
        animateShadowCloak('collapse');
        $('#project_block div a').css('left', '');
        $('#project_block div a').css('z-index', '');

        //unbind keydown from ShadowCloak
        unbindKeysOnShadowCloak();
    })
    
    /** 
     * Previous and Next buttons action
     */
    $('#photo-frame .arrows').bind('click', function(){
        var curr_offset = fixed_curr_offset;
        if (curr_offset === 0) {
            //use css left iff it's the first time user click on it
            curr_offset = parseInt($('.photo-frame-list').css('left'));
        }
        if($(this).hasClass('left')){
            //if this is the left button
            curr_offset = curr_offset + (photo_width + photo_right_padding);
        } else if ($(this).hasClass('right')){
            //else if this is the right button
            curr_offset = curr_offset - (photo_width + photo_right_padding);
        }
        
        //error handling: prevent scrolling beyond photo-frame allowed size
        var last_element_offset = -1*(photo_width + photo_right_padding)*(photo_elements_size-1);
        if (curr_offset > 0) {
            curr_offset = 0;
        } else if (curr_offset < last_element_offset){
            curr_offset = last_element_offset;
        }
        
        //store this value so that it does not rely on css's "left"
        fixed_curr_offset = curr_offset;
        
        //if first element, don't display prev icon. if last, then don't display the next.
        if (curr_offset==0){
            $('#photo-frame .left').hide();
        } else if(curr_offset==last_element_offset){
            $('#photo-frame .right').hide();
        } else {
            $('#photo-frame .left, #photo-frame .right').show();
        }
        $('.photo-frame-list').animate({"left":curr_offset+"px"});
    });
};