JS+animacja+pozycja względem diva Opcje

[PrzeeMOC]

WItam wszystkich!
Zazwyczaj nie piszę, tylko szukam do skutku, ale chyba nie tym razem (IMG:style_emoticons/default/closedeyes.gif)

Chciałem zrobić prostą animację "celownika". Pozioma i pionowa linia (divy) najeżdżają spoza strony, tak by ich punkt przecięcia znalazł się w odpowiednim miejscu. Realizuję to przez zmianę pozycji margin w JS.
Problem pojawia się taki, że linie mają przecinać całą stroną, więc pozioma ma mieć szerokość względem body 100%, a pionowa wysokość 100%, jednak punkt ich przecięcia ma być względem diva z logo, a ten na różnych rozdzielczościach będzie miał różną wartość margin-left. Nie mogę ruszać tymi liniami poziomu diva body, bo nie dam rady przeciąć ich w odpowiednim miejscu gdy szerokość strony będzie różna. Nie dam rady także ich uruchomić z poziomu diva z logo, bo długość (pionowej) i szerokość (poziomej) dostosują się tylko do wielkości diva z logo, a ja potrzebuję, żeby za niego wychodziły.
Nie wiem czy dobrze wytłumaczyłem. Zamieszczam fragmenty kodu. Problem by znikł gdybym wiedział jak zrobić tak, żeby te linie mogły mieć rozmiary większe od kontenera w którym się znajdują lub gdyby ich pozycja margin mogła być ustalana względem innego diva niż ten w którym się znajdują.

JS:

[HTML] pobierz, plaintext 
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">//!window.jQuery && document.write('<script src="jquery.min.js"><\/script>')
    $(window).load(function(){
        $(document).ready(function(){
 
 
                $('.x_linia').delay("1000").animate({ 
                    marginTop: "61px"
                }, 1000 );; ;
 
                $('.y_linia').delay("1000").animate({ 
                    marginLeft: "59px"
                }, 1000 );; ;
         });         
 
    });
 
    </script>
[HTML] pobierz, plaintext 

HTML:

[HTML] pobierz, plaintext 
    <body>      
        <div id="content">           
            <div id="logo">
                     <div class="x_linia"></div>
                    <div class="y_linia"></div>                    
            </div>
         <article></article>   
        </div>
            <footer>
 
            </footer>
        </div>
 
 
        </body>
</html>        
[HTML] pobierz, plaintext 

CSS:

[HTML] pobierz, plaintext 
#content
{
    position:relative;
    width:1100px;
    min-height:900px;
    padding-top:20px;
}
 
#logo
{
    background:url('../images/logo.png');
    width:362px;
    height:95px;
    margin-left:200px;
    position: relative;
 
}
 
.x_linia, .y_linia
{
	position: absolute;
	background:#000;
	  z-index:100;
 
 
}
 
.x_linia
{
    height:1px;
    width:2000px;
    margin-top:-100px;
    margin-left:0px;    
 
}
 
.y_linia
{
    width:1px;
    height:2000px;
    overflow:hidden;
    margin-left:-500px;
    margin-top:0px;        
 
}
[HTML] pobierz, plaintext