// state of window, if clicked state = 1
var states = new Array();
var info_state = false;
var message_states = new Array();
var frame_horz = new Array();

var background_adjust = new Array();
background_adjust['portrait'] = [27,31];
background_adjust['landscape'] = [24,25];
var sound = true; // local deving
var sound_file = '';

function toggle_sound(){
    if(sound){
        sound_file = document.soundPlayer.src;
        s = document.getElementById('soundPlayer');
        s.innerHTML = ''
        document.getElementById('sound').src='/assets/img/sound_off.png'
    }else{
        tag = "<EMBED name='soundPlayer' id='soundPlayer' SRC='"+sound_file+"' autostart=true loop=true hidden=true></EMBED>"
        s = document.getElementById('soundPlayer');
        s.innerHTML = tag
        
        document.getElementById('sound').src='/assets/img/sound_on.png'
    }
    sound = !sound;
}

function expand_work(id,num,first_image){
    states[id] = !states[id];
    if(message_states[num]==undefined || !message_states[num]){
        show_work(id,first_image,num)
        message_states[num] = true;
        document.getElementById('message'+num.toString()).style.display = 'inline';
    }else{
        hide_work(id)
        message_states[num] = false;
        document.getElementById('message'+num.toString()).style.display = 'none';
    }
}

function show_image(id,img,thmb_id){
    _img_ = document.getElementById(thmb_id)
    w = _img_.width
    h = _img_.height
    
    if(w>h){
        frame_horz[thmb_id]=true;
        
        div = document.getElementById(id)
        imgs = div.getElementsByTagName('img')
        imgs[0].src = '/assets/img/windows/new_open_r.png'
        div.style.backgroundImage="url("+img+")";
        div.style.backgroundPosition=background_adjust['landscape'][0]+'px '+background_adjust['landscape'][1]+'px';
        
    }else if(w<h){        
        frame_horz[thmb_id]=false;
        div = document.getElementById(id)
        imgs = div.getElementsByTagName('img')
        imgs[0].src = '/assets/img/windows/new_open.png'
        div.style.backgroundImage="url("+img+")";
        div.style.backgroundPosition=background_adjust['portrait'][0]+'px '+background_adjust['portrait'][1]+'px';
            }

    /*
    document.getElementById(thmb_id).style.border='solid 1px';
    document.getElementById(thmb_id).style.borderColor='blue';
    document.getElementById(thmb_id).style.borderWidth='0px 0px 3px 0px';
    */
}


function show_work(id,first_image,num){
    // set inital state for id
    if(states[id]==undefined){ 
        states[id] = 0;
    }
    div = document.getElementById(id)
    div.style.backgroundImage="url("+first_image+")";
    imgs = div.getElementsByTagName('img')

    _img_ = document.getElementById('thmb_'+num.toString()+'_1')
    w = _img_.width; h = _img_.height;
    if(w>h){
        imgs[0].src = '/assets/img/windows/new_open_r.png'
        div.style.backgroundPosition=background_adjust['landscape'][0]+'px '+background_adjust['landscape'][1]+'px';
    }else{
        imgs[0].src = '/assets/img/windows/new_open.png'    
        div.style.backgroundPosition=background_adjust['portrait'][0]+'px '+background_adjust['portrait'][1]+'px';
    }

    
    l = parseInt(div.style.left)
    t = parseInt(div.style.top)
    div.style.left = (l - 70)+'px';
    div.style.top = (t - 100)+'px';
}

function hide_work(id){
    if(!states[id]){
        div = document.getElementById(id)
        div.style.backgroundImage="url(/assets/img/windows/test2.gif)";
        imgs = div.getElementsByTagName('img')
        imgs[0].src = '/assets/img/windows/new_closed.png'
        
        l = parseInt(div.style.left)
        t = parseInt(div.style.top)
        div.style.left = (l + 70)+'px';
        div.style.top = (t + 100)+'px';
        div.style.backgroundPosition='';
        
    }
}


function show_info(e,id,text){
    if(!info_state){
        info_state=true;
        var posx = 0;
    	var posy = 0;
    	//if (!e) var e = window.event;
    	if (e.pageX || e.pageY){
    		posx = e.pageX;
    		posy = e.pageY;
    	}
    	else if (e.clientX || e.clientY) 	{
    		posx = e.clientX + document.body.scrollLeft
    			+ document.documentElement.scrollLeft;
    		posy = e.clientY + document.body.scrollTop
    			+ document.documentElement.scrollTop;
    	}
    	popup = document.createElement("div");
    	document.body.appendChild(popup);		
    	popup.setAttribute("class", "popup");
    	popup.setAttribute("id",'popup-element')
    	popup.innerHTML = text;
    	popup.style.zIndex = '20'
    	popup.style.left = posx+"px";
    	popup.style.top  = posy+"px";
    }
}

function hide_info(){
	popup = document.getElementById('popup-element');
    document.body.removeChild(popup)
    info_state = false;
}


function goto(project){
    browser = window.outerWidth;
    
    proj = document.getElementById(project)
    left = parseInt(proj.style.left)
    calc_left = (left + 100) - (browser/2)
    window.scrollTo(calc_left,0)
}











/// anima ////

var firstRun = new Array();
var toggleX  = new Array();
var toggleY  = new Array();
var randX  = new Array();
var randY  = new Array();
var progX  = new Array();
var progY  = new Array();
var addX  = new Array();
var addY  = new Array();
var speed  = new Array();
var obj    = new Array();

for(i=0; i<2;i++){
    firstRun[i]= true;
    toggleX[i] = 0;
    toggleY[i] = 0;
    randX[i]   = 0;
    randY[i]   = 0;
    progX[i]   = 0;
    progY[i]   = 0;
    addX[i]	   = 1;
    addY[i]    = 1;
    speed[i]   = 1;
}


width = window.innerWidth;
height = window.innerHeight;

function get_random_x(){
    return Math.floor(Math.random() * width) + window.pageXOffset;
}

function get_left_edge(){
    return window.pageXOffset;
}

function get_right_edge(){
    return window.pageXOffset + width;
}

	

function build_pillar(window_id){
    var left_pos = document.getElementById('window'+window_id);
    var p = document.getElementById('pillar');
    var dp = document.getElementById('date');
    var shadow = document.getElementById('shadow');
    
    if(p != null){
        p.style.left = parseInt(left_pos.style.left) + 200 + 'px';
        p.style.display = 'none';
    
        p.style.height = window.innerHeight-15 + 'px';
    
        dp.style.left = parseInt(left_pos.style.left) + 665 + 'px';
        dp.style.height = window.innerHeight-15 + 'px';
        dp.style.display = 'none';
    
        shadow.style.left = parseInt(left_pos.style.left) + 260 + 'px';
        shadow.style.display = 'none';
    }
    // slug = left_pos.getAttribute('name')
    // var vals = new Array('',''); 
    // $.get("/writing/"+slug+'/', {}, function(data){
    //     vals = data.split('|');
    //     p.innerHTML = vals[0];
    //     dp.innerHTML = "<pre>"+vals[1]+"</pre>";
    // });
}

function move_pillar(window_id){
    var next = document.getElementById(window_id);
    var current = document.getElementById('pillar');
    var dp = document.getElementById('date');
    var shadow = document.getElementById('shadow');
        
    next_pos = parseInt(next.style.left);
    cur_pos = parseInt(current.style.left);
    
    browser = window.outerWidth;
    calc_left = (cur_pos+400) - (browser/2)
    window.scrollTo(calc_left,0)
    
    
    lerp = next_pos - cur_pos + 200;
    //alert('moving pillar by '+lerp)
    fade_in = 1500;
    $("#shadow").animate({"left": "+="+lerp+"px"}, "slow").fadeIn(fade_in);
    $("#pillar").animate({"left": "+="+lerp+"px"}, "slow").fadeIn(fade_in);
    $("#date").animate({"left": "+="+lerp+"px"}, "slow").fadeIn(fade_in);
    $('html,body').animate({"scrollLeft": "+="+lerp+"px"}, "slow");
    
    slug = next.getAttribute('name')

    var vals = new Array('',''); 
    $.get("/writing/"+slug+'/', {}, function(data){
        vals = data.split('|');
        current.innerHTML = vals[0];
        dp.innerHTML = "<pre>"+vals[1]+"</pre>";
    });
    
}

function whiteout(id){
    document.getElementById(id).style.backgroundImage = '';
}
		
		
function build_node(id){
    /* function to create animation node */
    var node = new Object();

    node.speed = 1;
    node.init = true;
    node.dom = $('#'+id)//document.getElementById(id);
    node.xdir = 1;
    node.ydir = 1;
    node.scroll = window.pageXOffset;
    
    node.dir = new Object();
    node.dir.x = 1; node.dir.y = 1;

    node.pos  = new Object();
    node.pos.x = 0; node.pos.y = 0;
    
    node.goto = new Object();
    node.goto.x = 0; node.goto.y = 0;

    node.new_goto = function (node){
        node.goto.x = Math.floor(Math.random() * window.innerWidth) + window.pageXOffset;
        node.goto.y = Math.floor(Math.random() * window.innerHeight);
        if(node.pos.x < node.goto.x){
            node.dir.x = 1;
        }else{
            node.dir.x = -1;
        }
        if(node.pos.y < node.goto.y){
            node.dir.y = 1;
        }else{
            node.dir.y = -1;
        }
    }
    
    node.epoch = function (){
        return parseInt(new Date().getTime()/1000)
    }
    node.last_epoch = node.epoch();    

    node.window_scrolled = function (){
        if(node.scroll != window.pageXOffset){
            node.scroll = window.pageXOffset;
            return true
        }else{
            return false
        }
    }

    node.animate = function (){
        if(node.init){
            node.new_goto(node);
            node.init = false;
        }
        
        if(node.epoch() - node.last_epoch > 5){
            if(node.window_scrolled()){
                node.new_goto(node);
            }
            node.last_epoch = node.epoch();
        }

        node.pos.x += node.speed * node.dir.x;
        node.pos.y += node.speed * node.dir.y;

        node.dom.css({'left':node.pos.x,'top':node.pos.y})
        //node.dom.style.left = node.pos.x + 'px';
        //node.dom.style.top = node.pos.y + 'px';
        
        // check for proximity
        if((node.pos.x >= node.goto.x && node.dir.x == 1) ||
           (node.pos.x <= node.goto.x && node.dir.x == -1)){
            node.dir.x = 0;
        }
        if((node.pos.y >= node.goto.y && node.dir.y) == 1 ||
           (node.pos.y <= node.goto.y && node.dir.y == -1)){
            node.dir.y = 0;
        }
        
        // check for hit
        if(node.dir.x == 0 && node.dir.y == 0){
            node.new_goto(node);
        }
    }
    
    return node
}
		
function launch(){
    //obj[0] = document.getElementById('isabella');
    //obj[1] = document.getElementById('project');
    
    //toggle_sound();
    
    build_pillar(1);
    //setTimeout('move_pillar(2)',3000);
    var node = new Array(
                         build_node('project'),
                         build_node('isabella')
                        )
    
    setInterval(function(){
                            for(i=0;i<2;i++){
                                node[i].animate();
                            }
                        },10)

    }

	
document.onload = setTimeout('launch()',100)